CSR, SSG, ISR, SSR

CSR(Client Side Rendering)

React application은 CSR 방식으로 렌더링을 합니다. CSR은 렌더링을 하는 주체자가 클라이언트(브라우저)임을 의미합니다. 렌더링에 필요한 파일을 서버에서 다운로드 받아서 클라이언트 측에서 실행하는 것을 의미합니다.

장점	단점
한 번 로딩 되면, 빠른 UX 제공	페이지 로딩 시간(TTV Time To View)이 길다.
FCP(First Contentful Paint)를 보는 시간이 길다.
서버의 부하가 작음	자바스크립트 활성화가 필수적이다.
	SEO(Search Engine Optimization) 적용이 어렵다.
	모든 코드들이 브라우저에서 작동이 되기 때문에 보안이 취약하다.
	CDN(Content Delivery Network)에 캐시가 안됨 모든 소스 코드를 캐시하는 것이 어렵기 때문이다.

SSG(Static Site Generation)

렌더링 하는 주체자가 서버이다. 언제 서버에서 렌더링 하는지에 따라 SSG, SSR이 달라집니다.

SSG는 build 할 시 React 코드를 HTML 코드로 변환한다. Static Site는 정적 사이트를 build 하는 것을 의미한다. 클라이언트에서 요청이 오면 미리 만든 HTML 사이트를 보여준다. 즉 서버까지 가지 않고 CDN에 미리 캐시된 HTML 파일을 보여줍니다. 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해줍니다.

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	데이터가 정적인 것에만 유효하다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	사용자별 정보 제공이 어렵다.
SEO 최적화가 좋다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
CDN에 캐시가 된다.

ISR(Incremental Static Regeneration)

렌더링 하는 주체자가 서버인데, 주기적으로 렌더링 하는 것을 의미합니다. 개발자가 설정한 주기만큼 다시 사이트를 만듭니다. 따라서 5분 동안 있었던 변경 사항을 반영하여 다시 페이지를 생성합니다.

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	실시간 데이터는 아니다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	사용자별 정보 제공은 어렵습니다.
SEO 최적화가 좋다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
CDN에 캐시가 된다.
데이터가 주기적으로 업데이트 된다.

SSR(Server Side Rendering)

렌더링하는 주체자가 서버입니다. SSR은 요청시에 렌더링이 됩니다. 미리 렌더링을 하는 것이 아닌 클라이언트가 요청할때에 렌더링을 하고 클라이언트에 전달합니다.

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	SSG, ISR에 비해 상대적으로 느립니다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	서버의 과부하가 발생할 수 있습니다. (overhead)
SEO 최적화가 좋다.	CDN에 캐시가 되지 않습니다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
실시간 데이터를 사용합니다.
사용자별 필요한 데이터를 사용합니다.

Next.js for Hybrid Web App

Hybrid는 사전적 의미로 ‘혼합’을 의미합니다. 특정 목적을 달성하기 위해 두 개 이상의 기능이나 요소를 결합하는 것을 의미합니다. 웹 앱의 특정 목적은 성능 좋은 강력한 웹 앱을 만드는 것을 의미합니다. 따라서 Next.js는 하나의 렌더링 방식을 고집하지 않고 다양한 렌더링 방식을 혼합해서 사용할 수 있습니다.

예를 들어 홈페이지는 ISR로 만듭니다. about 페이지는 변경이 없기 때문에 SSG 방식을 도입합니다. Profile은 SSR/CSR을 혼합해서 사용합니다. 이처럼 각 페이지의 역할에 따라 다양한 rendering 방식을 혼합해서 사용할 수 있는 것이 Next.js의 장점입니다.

Hydration fot interaction

Hybrid 방식을 가능하게 한 것은 Next.js의 Hydration입니다. Hydrated의 뜻은 수화시키다, 물로 가득 채우다라는 의미를 가지고 있습니다. Next.js에서 물은 react를 의미합니다.

클라이언트가 서버에 요청을 하면 정적인 HTML 페이지를 생성합니다. 사용자가 빠르게 볼 수 있도록 pre-rendering된 페이지를 먼저 보내줍니다. 하지만 아직 JS코드가 포함되어 있지 않기 때문에, 사용자가 버튼을 클릭해도 어떠한 반응도 발생하지 않습니다. 이후 소스코드를 클라이언트에 보냅니다. 즉 이때 정적인 페이지를 react로 가득채우는 hydration 작업이 진행됩니다. hydration 이후에는 리엑트의 컴포넌트가 되어 각종 event를 처리할 수 있게 됩니다.

Rendering Decision Tree

Next.js를 사용한다면, 언제 CSR, SSR, ISR, SSG를 사용할지 정의하기가 어렵습니다. 이를 간단히 도식화하여, 언제 어떤 렌더링 기법을 사용할지 정리했습니다.

CSR(Client Side Rendering)

장점	단점
한 번 로딩 되면, 빠른 UX 제공	페이지 로딩 시간(TTV Time To View)이 길다.
FCP(First Contentful Paint)를 보는 시간이 길다.
서버의 부하가 작음	자바스크립트 활성화가 필수적이다.
	SEO(Search Engine Optimization) 적용이 어렵다.
	모든 코드들이 브라우저에서 작동이 되기 때문에 보안이 취약하다.
	CDN(Content Delivery Network)에 캐시가 안됨 모든 소스 코드를 캐시하는 것이 어렵기 때문이다.

SSG(Static Site Generation)

렌더링 하는 주체자가 서버이다. 언제 서버에서 렌더링 하는지에 따라 SSG, SSR이 달라집니다.

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	데이터가 정적인 것에만 유효하다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	사용자별 정보 제공이 어렵다.
SEO 최적화가 좋다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
CDN에 캐시가 된다.

ISR(Incremental Static Regeneration)

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	실시간 데이터는 아니다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	사용자별 정보 제공은 어렵습니다.
SEO 최적화가 좋다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
CDN에 캐시가 된다.
데이터가 주기적으로 업데이트 된다.

SSR(Server Side Rendering)

장점	단점
페이지 로딩 시간 (TTV)이 빠르다.	SSG, ISR에 비해 상대적으로 느립니다.
자바스크립트 활성화가 필요 없다. 빠르게 컨텐츠를 확인할 수 있다.	서버의 과부하가 발생할 수 있습니다. (overhead)
SEO 최적화가 좋다.	CDN에 캐시가 되지 않습니다.
불필요한 파일을 클라이언트 측으로 보내지 않아도 되기에 보안이 뛰어나다.
실시간 데이터를 사용합니다.
사용자별 필요한 데이터를 사용합니다.