[Next.js14 강의] 1강 - Next.js란 무엇인가? (SSR, SSG, ISR 개요)

 

안녕하세요! 그레이해커 월횽입니다. 이 강의에서는 Next.js의 기본 개념과 주요 기능을 이해하고, Next.js를 사용하여 웹 애플리케이션을 개발할 때 얻을 수 있는 이점을 알아봅니다. 특히 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 점진적 정적 재생성(ISR)에 대해 자세히 설명해드리겠습니다.

 

1. Next.js 소개

 

Next.js란 무엇인가?

· Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 점진적 정적 재생성(ISR) 등을 지원하여 성능이 뛰어난 웹 애플리케이션을 만들 수 있도록 도와줍니다.

728x90

Next.js의 장점

· 빠른 페이지 로딩 속도
· SEO 친화적
· 자동 코드 분할
· 파일 기반 라우팅
· 쉬운 배포 및 관리

 

 

2. 서버 사이드 렌더링 (SSR)

 

SSR이란?

· 서버 사이드 렌더링(SSR)은 페이지가 요청될 때마다 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다. 이는 초기 로딩 속도를 개선하고, SEO 최적화에 도움을 줍니다.

반응형

SSR의 동작 방식

· 사용자가 페이지를 요청하면 서버에서 데이터를 가져오고 HTML을 렌더링하여 클라이언트에 전달합니다.
· 클라이언트는 초기 HTML을 받기 때문에, 페이지가 더 빠르게 렌더링됩니다.

 

Next.js에서의 SSR

· getServerSideProps를 사용하여 페이지 요청 시 서버에서 데이터를 가져오고 렌더링할 수 있습니다.

 

 

3. 정적 사이트 생성 (SSG)

 

SSG란?

· 정적 사이트 생성(SSG)은 빌드 시점에 HTML 파일을 생성하여 클라이언트에 제공하는 방식입니다. 이 방식은 서버 요청 없이 페이지를 제공할 수 있어 성능이 뛰어나며, 일반적으로 더 빠릅니다.

SMALL

SSG의 동작 방식

· 빌드 타임에 HTML이 미리 생성되어 배포됩니다.
· 클라이언트는 이 미리 생성된 HTML을 받아서 빠르게 페이지를 로드합니다.

 

Next.js에서의 SSG

· getStaticProps를 사용하여 빌드 시에 데이터를 가져와 정적 HTML 파일을 생성할 수 있습니다.
· getStaticPaths를 사용하여 동적 라우팅을 처리할 수 있습니다.

 

 

4. 점진적 정적 재생성 (ISR)

 

ISR이란?

· 점진적 정적 재생성(ISR)은 정적 사이트 생성의 확장으로, 페이지를 정적으로 생성하되, 일정 시간 간격으로 페이지를 업데이트할 수 있는 기능입니다. 이를 통해 페이지의 최신 상태를 유지하면서도 성능을 최적화할 수 있습니다.

ISR의 동작 방식

· 페이지를 처음 요청할 때 정적 HTML을 제공하고, 설정된 주기에 따라 백그라운드에서 페이지를 재생성합니다.
· 사용자는 새로 고침 없이 최신 콘텐츠를 볼 수 있습니다.

 

Next.js에서의 ISR

· revalidate 옵션을 사용하여 ISR을 설정할 수 있습니다. 페이지가 지정된 시간 간격으로 재생성됩니다.