[Next.js] CSR, SSR, SSG, ISR, On-demand ISR

Next.js 기반의 프로젝트를 진행하면서, CSR과 SSR 방식에 대해서 알게 되었다. 그 외에도 SSG, ISR.. 방식이 있었고, 앞으로 렌더링 과정을 보다 잘 이해하고 효율적으로 구현하기 위하여 이를 공부해보았다.

 

---

 

알아두어야 할 것

• Next.js는 React로 만드는 SSR 프레임워크이다. 
• CDN (Content Delivery Network) 서버 : CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다. CDN 서버는 웹 애플리케이션 서버보다 항상 빠르다.
• WAS (Web Application Server) : 웹 애플리케이션 서버는 쉽게 말하면 생각하는 서버라고 생각하면 된다. 사용자의 요청에 따라 API 서버에 다녀와야함을 알고 요청과 응답을 받아 전달해준다. (Vercel)

 

브라우저에 들어왔을 때 렌더링 하는 과정

CSR (Client Side Rendering)

총 3번의 라운드트립이 발생한다. 브라우저(사용자)가 렌더링의 모든 책임을 갖는다.

 

 

1. 사용자가 웹 애플리케이션 서버에 요청을 보내고 응답을 받는다. 

2. 자바스크립트 파일을 받기 위해 또 다시 웹 애플리케이션 서버에 요청을 보내고 응답을 받는다.

2. API 백엔드 서버에 요청을 보내고 응답을 받는다. 

 

SSR (Server Side Rendering)

웹 애플리케이션 서버가 렌더링의 책임을 갖는다. CSR 방식보다 SSR 방식은 서버끼리 소통하여 내려주기 때문에 더 적은 라운드 트립으로 속도가 더 빠르다.

1. 사용자가 웹 애플리케이션 서버에 요청을 보내면, 웹 애플리케이션 서버가 html 컴포넌트 랜더링에 필요한 부분에 대해 API 백엔드 서버에 요청을 보내고 응답을 받는다.

2. 웹 애플리케이션 서버는 API 백엔드 서버에게 응답 받은 내용에 대하여 렌더링을 하고, 이를 사용자에게 응답한다.

 

SSG (Static Site Generation)

CND 서버를 이용한 즉각적인 응답이 가능하다. 빌드타임에 API 서버로부터 받은 응답으로 그려내서 CDN에 저장한 것을 사용하기 때문에, 런타임이 길어지면 길어질 수록 받는 데이터가 옛날 데이터가 될 것이다. 그래서 나온 것이 ISR이다. 

 

ISR (Incremental Static Regeneration)

사용자가 요청한 해당 부분에 대해서만 재빌드한다. 즉, 정적 생성으로 미리 만들어 놓았던 것도 업데이트가 가능하게 되었고, 그래서 최신 데이터를 유지한다.

 

On-demand ISR

ISR의 한계를 뛰어넘어 admin 페이지에서 요청한 부분을 업데이트한다.

 

공식 문서

Data Fetching: Incremental Static Regeneration | Next.js (nextjs.org)

Data Fetching: Incremental Static Regeneration | Next.js