[Next.js] 사전 렌더링

사전 렌더링

기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다.

즉, Next.js는 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성합니다.

사전 렌더링은 더 나은 성능과 SEO를 제공 할 수 있습니다.

 

생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결 됩니다.

브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되고 페이지가 완전히 대화식으로 만들어 집니다.

(이를 수화라고 합니다.)

 

사전 렌더링이 있으면 JavaScript가 비활성화 되더라도 앱을 볼 수 있습니다.

Next.js가 없는 일반 React.js 앱인 경우 사전 렌더링이 없기 때문에 JavaScript가 비활성화 되면 앱을 볼 수 없습니다.

---

사전 렌더링이 있는 경우 vs 사전 렌더링이 없는 경우