렌더링 전략: SSG, ISR, SSR, CSR

Next.js를 다루게 되면서 일반 리액트의 렌더링 방식과는 다른 Next.js의 렌더링 방식에 대해 접하게 되었다.
오늘은 웹 페이지의 네 가지 렌더링 방식에 대해 알아보려 한다!

 

📌 Next.js에서의 렌더링

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

특히 빌드 시점에 생성되는 SSG와 요청 시점에 생성되는 SSR을 지원한다.

Next는 각 페이지별로 사용할 프리렌더링 방식을 선택할 수 있게 해 준다는 엄청난 장점이 있다.
따라서 용도에 맞게 다른 렌더링 방식을 선택할 수 있다!

*프리렌더링 - 빌드 시점에 HTML을 미리 만들어 두거나, 요청 시 HTML을 생성해 두는 것

 

📌 네 가지 렌더링 방식

다음의 네 방식은 모두 page router 버전의 공식 명칭으로, app router에서는 다른 용어로 사용된다고 한다!
💡각각 SSG -> Static Rendering, SSR -> Dynamic Rendering, ISR -> Revalidation이다.

 

📌 Static Site Generation(SSG)

Next.js의 기본적인 방식이다.

빌드 시에 미리 페이지를 만들어놓고 사용자가 해당 라우트에 들어왔을 때 바로 화면에 보여줄 수 있는 HTML 파일을 클라이언트에 주어 화면에 그리는 방식으로, 바뀌지 않는 정적인 컴포넌트에 적합한 기본 렌더링 방식이다.

빌드 시에 해당 컴포넌트를 100% 프리렌더링해놓고 클라이언트 요청 시 제공한다.
주로 내용이 거의 변하지 않아서 새로 그릴 필요가 없는 페이지에 사용하는 것이 좋다!

 

📌 Incremental Static Rendering(ISR)

빌드 시 100% 프리렌더링을 해놓고 지정된 주기마다 서버에서 백그라운드로 페이지를 다시 생성하여 업데이트를 하는 렌더링 방식이다.

사이트 전체를 재구축하지 않고 정적 콘텐츠만 업데이트한다. 대부분의 요청에 대해 미리 렌더링 된 정적 페이지를 제공하여 서버 부하를 줄인다. 

 

📌 Server Side Rendering(SSR)

사용자 요청마다 매번 서버 컴포넌트가 실행되며 완전한 HTML을 브라우저에 제공한다.
브라우저가 자바스크립트를 다운로드하고 실행하기 전에도 화면이 빠르게 표시되며, 검색 엔진 크롤러가 페이지의 내용을 쉽게 읽을 수 있어 SEO에 유리하다. 다만, 페이지를 이동할 때마다 서버에 새로운 HTML을 요청해야 하기에 트래픽이 몰릴 경우 서버 부하가 커질 수 있다.

 

📌 Client Side Rendering(CSR)

React의 기본 방식이다.

React를 사용한 CSR에서 브라우저는 최소한의 HTML 페이지와 해당 페이지에 필요한 JS를 다운로드한다.
다운로드된 JS는 DOM을 업데이트하고 페이지를 렌더링 하는 데 사용된다.

페이지가 처음 로드된 후에 동일한 웹사이트의 다른 페이지로 이동하는 속도가 일반적으로 빠르다.
필요한 데이터만 가져오고, 전체 페이지를 고치지 않고도 페이지의 일부를 다시 렌더링 할 수 있다.

다만, SEO에 영향을 미칠 수 있다. 일부 검색 엔진 크롤러는 JS를 실행하지 않기 때문이다.
또한 인터넷 연결 속도가 느리거나 기기 성능이 저하된 사용자는 모든 JS가 로드되고 실행된 후까지 기다려야 전체 페이지를 볼 수 있기에 성능 문제가 발생할 수 있다.
따라서 Next.js는 애플리케이션의 각 페이지 요구 사항에 따라 CSR, SSR 및 SSG 하이브리드 방식을 권장한다.

 

💡 Hydration

CSR과 SSR의 차이는 바로 하이드레이션 과정의 유무이다. 순수 CSR 방식에는 하이드레이션이 존재하지 않는다.

브라우저가 JS를 이용해 처음부터 DOM을 직접 생성하기 때문이다.
서버에서 렌더링 된 정적 HTML이 클라이언트로 전달된 후, 자바스크립트가 결합하여 웹 페이지가 사용자와 상호작용할 수 있는 상태가 되는 과정을 의미한다.

서버 측에서 렌더링된 SSR이나 SSG방식은 초기 로딩 시 HTML 형태만 전달받는다.

따라서 화면에 내용은 보이지만, 버튼을 클릭하거나 폼을 입력하는 등의 상호작용은 즉시 동작하지 않는 상태이다.
이때 브라우저가 필요한 JS 번들을 다운로드하고 실행하면 정적인 페이지에 동적인 기능을 입히게 된다.

 

🤔 어떤 방식을 택해야 할까?

렌더링 방식	추천 사용 사례	이유
SSG	마케팅 페이지, 블로그	데이터가 자주 변하지 않으므로, 빌드 시 생성한 정적 파일을 배포하여 빠르게 로딩 가능
ISR	커머스 상품 목록, 뉴스	데이터가 주기적으로 변경되지만, 매번 새로 빌드하는 것이 비효율적이기에 백그라운드에서 정적 페이지를 재생성하여 성능과 최신성을 모두 확보
SSR	사용자 개인화 페이지, 대시보드	사용자마다 다른 데이터가 필요하여 매 요청마다 서버에서 최신 상태를 반영한 HTML을 즉시 생성해야하기에
CSR	관리자 페이지, 개인 대시보드	화면 내 인터렉션이 매우 많고, 이미 로그인된 사용자가 사용하는 페이지이기에 초기 로딩 이후 필요한 데이터만 빠르게 가져와 동적으로 렌더링

 

 

출처:
Next.js - Rendering
Next.js - CSR