프리렌더링은 Next.js에서 가장 중요한 개념 중 하나다.
Next.js는 기본적으로 모든 페이지를 프리렌더링한다. 이것은 Next.js가 각 페이지의 HTML을 미리 생성한다는 것을 의미한다.
클라이언트 사이드의 자바스크립트가 모든 작업을 수행하진 않는다. 프리렌더링은 성능과 SEO를 개선하는데 도움이 된다.
생성된 각각의 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다.
브라우저에서 페이지가 로드 되면 해당 자바스크립트 코드가 실행되어 페이지가 인터랙티브한 상태가 된다.
(이 과정을 Hydration이라고 한다.)
프리렌더링이 진행되고 있는지 확인하기
다음 단계를 통해 프리렌더링이 진행되고 있는지 확인해볼 수 있다.
- 브라우저에서 자바스크립트를 비활성화한다.
- 이 페이지(이 튜토리얼의 최종 결과물)에 액세스 해본다.
자바스크립트 없이도 앱이 렌더링되는 것을 확인할 수 있다. 이는 Next.js가 앱을 정적 HTML로 미리 렌더링하여 자바스크립트를 실행하지 않고도 앱 UI를 볼 수 있게 해주기 때문이다.
만일 순수 React 앱이라면 프리렌더링은 진행되지 않는다. 그래서 자바스크립트를 비활성화하면 앱을 볼 수 없다. 예를 들어 Create React App으로 빌드된 앱의 경우, 브라우저에서 자바스크립트를 비활성화하고 페이지를 확인하면, 앱이 표시되지 않고 "이 앱을 실행하려면 JavaScript를 활성화해야 합니다."라는 메시지가 표시됩니다. 이는 앱이 정적 HTML로 프리 렌더링되지 않았기 때문이다.
Quick Review: Which of the following is not a benefit of pre-rendering?
A. Improved SEO
B. Allows your application to work without JavaScript
C. Allows your application to only run server-side
'개발 > Next.js' 카테고리의 다른 글
| [Docs] 정적 생성(Static Generation) (0) | 2023.05.10 |
|---|---|
| [Docs] 두 가지 형태의 프리렌더링 (0) | 2023.05.09 |
| [Docs] Layout 다듬기(Polishing Layout) (0) | 2023.05.08 |
| [Docs]전역 스타일 적용하기 (0) | 2023.05.07 |
| [Docs] CSS 스타일링 & Layout 컴포넌트 (0) | 2023.05.07 |