1. 개념 요약

Pre-rendering은 Next.js가 페이지를 미리 HTML 형태로 생성하는 방식이다. 이는 브라우저가 JS를 실행하기 전에 HTML을 받아서 초기 콘텐츠를 빠르게 보여줄 수 있게 한다.

Next.js는 두 가지 pre-rendering 방식을 지원한다:

• Static Generation (정적 생성)
• Server-side Rendering (서버 사이드 렌더링)

2. 배경 지식

• CSR (Client-side Rendering)

  일반적인 React 앱은 클라이언트에서 JS를 통해 렌더링된다. 초기 로딩 속도는 느릴 수 있고, SEO에 불리하다.

• Hydration

  서버에서 전달된 정적 HTML을 클라이언트에서 React가 takeover 하여 인터랙티브하게 만드는 과정.

  즉 서버에서 미리 렌더링된 HTML에 클라이언트 측 자바스크립트를 연결하여, 페이지를 동적으로 작동하게 만드는 과정.

• FCP (First Contentful Paint)

  사용자가 콘텐츠를 처음 볼 수 있는 시점. Pre-rendering이 잘 되어 있다면 빠른 FCP를 제공할 수 있음.

• TTI (Time to Interactive)

  페이지가 완전히 interactive 해지는 시점.

3. 상세 설명

1. CSR 방식 (기본 React 방식)

• 브라우저는 index.html을 받고, 이후 JS bundle을 받아 실행
• JS 실행 후에야 콘텐츠 렌더링 시작
• 초기 로딩 시간 길어짐, FCP 느림, SEO에 불리

2. Next.js Pre-rendering 방식

• 사용자가 요청 시 서버는 HTML을 먼저 전달함