[공식문서] Next.js의 작동 방식 #9

렌더링이란 무엇인가?

React에서 작성한 코드를 UI의 HTML 표현으로 변환하는 작업을 의미합니다. 이 과정을 렌더링이라고 합니다.

 

렌더링은 서버 또는 클라이언트에서 발생할 수 있습니다. 렌더링은 빌드 시점에서 미리 실행될 수 있고, 런타임에서 각 요청마다 실행될 수 있습니다.

 

Next.js에서는 세 가지 유형의 렌더링 방법을 사용할 수 있습니다. 서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링.

 

Pre-Rendering (사전 렌더링)

서버 사이드 렌더링과 정적 사이트 생성은 사전 렌더링으로도 불립니다. 외부 데이터의 가져오기 및 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에게 결과가 전송되기 전에 미리 실행되기 때문입니다.

 

Client-Side Rendering vs. Pre-Rendering

일반적인 React 애플리케이션에서 브라우저는 서버로부터 빈 HTML 셀과 UI를 구성하는 JavaScript 지시문을 받습니다. 이것을 클라이언트 사이드 렌더링이라고 합니다. 초기 렌더링 작업이 사용자의 기기에서 수행되기 때문입니다.

Next.js 공식문서 - 클라이언트  사이드 렌더링

참고 : 특정 컴포넌트에서는 React의 useEffect() 나 useSWR과 같은 데이터 가져오기 훅을 사용하여 클라이언트 사이드 렌더링을 선택할 수 있습니다.

반면에 Next.js는 기본적으로 모든 페이지를 사전 렌더링합니다. 사전 렌더링은 HTML이 사용자의 기기에서 JavaScript에 의해 모두 처리되는 대신, 서버에서 사전에 생성되어 성능을 향상시키는 것을 의미합니다.

 

실제로 이는 완전히 클라이언트 사이드 렌더링된 앱에서 렌더링 작업이 수행되는 동안 사용자가 빈 페이지를 볼 것이라는 것을 의미합니다. 사전 렌더링된 앱의 경우 사용자는 생성된 HTML을 볼 수 있습니다.

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

 

이제 사전 렌더링의 두 가지 유형에 대해 알아보겠습니다.

 

Server-Side Rendering (서버 사이드 렌더링)

서버 사이드 렌더링에서는 각 요청마다 페이지의 HTML이 서버에서 생성됩니다.

생성된 HTML, JSON 데이터 및 페이지를 인터렉티브하게 만들기 위한 JavaScript 지시문이 클라이언트로 전송됩니다.

 

클라이언트에서는 HTML을 사용하여 빠른 비인터렉티브 페이지를 표시하고, React는 JSON 데이터와 JavaScript 지시문을 사용하여 컴포넌트를 인터렉티브하게 만듭니다 (예: 버튼에 이벤트 핸들러를 연결). 이 과정을 수화(hydration)라고 합니다.

 

Next.js에서는 getServerSideProps를 사용하여 서버 사이드 렌더링을 선택할 수 있습니다.

참고 : React 18과 Next 12에서는 React 서버 컴포넌트의 알파 버전이 도입되었습니다. 서버 컴포넌트는 완전히 서버에서 렌더링되며 클라이언트 사이드 JavaScript를 필요로하지 않습니다. 또한 서버 컴포넌트는 개발자가 일부 로직을 서버에 유지하고 그 결과만 클라이언트로 전송할 수 있도록 합니다. 이로 인해 클라이언트로 전송되는 번들 크기가 줄어들고 클라이언트 사이드 렌더링 성능이 향상됩니다. React 서버 컴포넌트에 대해 더 자세히 알아보세요.

 

Static Site Generation (정적 사이트 생성)

정적 사이트 생성에서는 HTML이 서버에서 생성됩니다. 그러나 서버 사이드 렌더링과 달리 런타임에 서버가 없습니다. 대신 콘텐츠는 한 번에 생성되며, 애플리케이션이 배포될 때 빌드 시점에 CDN에 HTML이 저장되고 각 요청마다 재사용됩니다.

 

Next.js에서는 getStaticProps를 사용하여 정적 페이지 생성을 선택할 수 있습니다.

 

참고 : Incremental Static Regeneration을 사용하여 사이트를 구축한 후에 정적 페이지를 생성하거나 업데이트 할 수 있습니다. 이렇게 하면 데이터가 변경되더라도 전체 사이트를 다시 빌드할 필요가 없습니다.

 

Next.js의 아름다움은 페이지별로 가장 적합한 렌더링 방법을 선택할 수 있다는 것입니다. 정적 사이트 생성, 서버 사이드 렌더링 또는 클라이언트 사이드 렌더링 중 어떤 렌더링 방법이 특정한 사용 사례에 적합한지 자세히 알아보려면 데이터 가져오기 문서(data fetching docs)를 확인하세요.

 

다음 섹션에서는 배포 후 코드가 어디에 저장되거나 실행되는지에 대해 논의하겠습니다.