📚 Reference
📜 Chapter
‣
‣
‣
‣
렌더링 방식
- Next.js는 React 기반 프레임워크지만, 렌더링 방식을 다양하게 지원한다.
- CSR (Client Side Rendering): SPA처럼 동작 가능
- SSR (Server Side Rendering): 요청 시 서버에서 HTML 생성 → SEO 친화적
- SSG (Static Site Generation): 빌드 시 HTML을 생성해 배포 → 빠르고 SEO 최적화
- ISR (Incremental Static Regeneration): 정적 페이지를 일정 주기로 다시 생성
- 즉, Next.js 앱은 SPA처럼 클라이언트 전환이 가능하면서도, 페이지 단위로 SSR/SSG를 지원하는 하이브리드 앱이다.
Pre-rendering
- Next.js는 기본적으로 모든 페이지를 Pre-Render(사전 렌더링)한다.
- 파일 사전 렌더링은 빠른 초기 렌더링과 SEO에 유리하고, 유저가 초기 유입 시 빈 페이지를 보지 않아도 된다는 장점이 있다.
- 서버에서 HTML 요소를 모두 구성한 후 클라이언트에 전달해주는데, 이때 클라이언트가 전달받은 HTML은 정적인 뷰에 해당하고 Javascript 번들 파일이 로드되기 전이므로 Pre-Render 상태에서 인터렉티브한 동작이 불가한 상태이다.
- Next.js에서는 두 가지 Pre-rendering 방식을 제공한다.
- SSG: Static Generation (정적 생성 방식)
- HTML이 빌드 시 생성되며 각 요청에서 재사용된다.
- SSR: Server-Side Rendering 방식
- Next.js에서는 바로 이 정적 생성 방식을 권장한다.
Static Generation