[공식문서] NextJS - Pre-rendering and Data Fetching #3

사전 렌더링 (Pre-rendering)

데이터 가져오기에 대해 이야기하기 전에, Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 이야기해보겠습니다.

기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 이는 Next.js가 모든 페이지의 HTML을 미리 생성한다는 것을 의미합니다. 클라이언트 사이드 JavaScript로 모두 처리하는 것이 아닙니다. 사전 렌더링은 성능과 검색 엔진 최적화에 도움이 될 수 있습니다.

각 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 브라우저에서 페이지가 로드되면 해당 JavaScript 코드가 실행되어 페이지가 완전히 상호작용 가능해집니다. (이 과정을 hydration 라고 합니다.)

사전 렌더링이 진행되고 있는지 확인하기

사전 렌더링이 진행되고 있는지 다음 단계로 확인할 수 있습니다.

1. 브라우저에서 JavaScript를 비활성화하세요. (Chrome에서는 이렇게 할 수 있습니다.)
2. 이 페이지에 접근해보세요 (이 튜토리얼의 최종 결과물 페이지입니다).

JavaScript를 비활성화한 상태에서 페이지에 접근하면, JavaScript를 실행하지 않고 앱이 렌더링된 것을 볼 수 있습니다. Next.js는 앱을 정적 HTML로 사전 렌더링하여 JavaScript를 실행하지 않고도 앱 UI를 확인할 수 있게 해줍니다.

 

참고: 위 단계를 로컬호스트에서도 시도해볼 수 있지만, JavaScript를 비활성화하면 CSS가 로드되지 않습니다.

 

앱이 순수한 React.js 앱 (Next.js 없음)인 경우에는 사전 렌더링이 없으므로 JavaScript를 비활성화하면 앱을 볼 수 없습니다.

예를 들어:

• 브라우저에서 JavaScript를 활성화하고 이 페이지를 확인하세요. 이 페이지는 Create React App으로 만든 순수한 React.js 앱입니다.
• 이제 JavaScript를 비활성화하고 동일한 페이지에 다시 접근하세요.
• 더 이상 앱을 볼 수 없고 대신 "이 앱을 실행하려면 JavaScript를 활성화해야 합니다."라는 메시지가 표시됩니다. 이는 앱이 정적 HTML로 사전 렌더링되지 않았기 때문입니다.

 

요약: 사전 렌더링 vs 사전 렌더링 없음

다음은 간단한 그래픽 요약입니다:

Next.js 공식문서 - 사전 렌더링

Next.js 공식문서 - 사전 렌더링 없을 경우

 

다음으로, Next.js에서의 두 가지 사전 렌더링 방식에 대해 이야기하겠습니다.