Next.js를 공부하기 전에 웹의 렌더링 방식에 대해 알면 좋을 것 같아 정리해본다.
웹에서 렌더링이란?
HTML, CSS, JS 등과 같이 개발자가 작성한 문서를 서버로부터 응답 받아 화면에 그려주는 동작을 말한다.
렌더링하는 주체가 무엇인지, 언제 렌더링을 하는지에 따라 렌더링 방식이 달라진다.
Client Side Rendering (CSR)
렌더링 하는 주체자가 클라이언트 즉, 브라우저인 렌더링 방식이다.
렌더링 과정은 다음과 같다.
1. 사용자가 홈페이지 접속 시 클라이언트가 서버에게 웹페이지를 요청한다.
2. 서버에서 빈 HTML을 먼저 전달해준다.
3. 서버에서 번들파일(JS)을 전달받는다.
4. 클라이언트 측에서 응답받은 코드를 DOM 요소로 변환하는 렌더링을 진행한다.
장점👍
- 로딩이 한번 완료되고 나서 이후는 변경되는 부분만 업데이트 되어 빠른 UX를 제공한다.
- 서버의 부하가 적다.
단점👎
- 페이지 로딩 시간 TTV(Time To View)가 길다.
- 자바스크립트의 활성화가 필수이다.
- SEO 최적화가 힘들다.
- 보안에 취약하다.
- CDN에 캐시가 불가능하다.
Server Side Rendering (SSR)
렌더링 하는 주체자가 서버인 렌더링 방식이다.
렌더링 시점에 따라 SSR, SSG, ISR로 나뉜다.
SSR은 클라이언트에서 요청할 때마다 렌더링이 진행된다.
렌더링 과정은 다음과 같다.
1. 사용자가 홈페이지 접속 시 클라이언트가 서버에게 웹페이지를 요청한다.
2. 서버에서 렌더링을 진행한다.
3. 서버에서 렌더링이 완료된 완성된 페이지를 클라이언트에 전달해준다.
장점👍
- 페이지 로딩시간 TTV가 빠르다.
- 자바스크립트가 필요 없다.
- SEO 최적화하기 좋다.
- 보안이 뛰어나다.
- CDN 캐시가 가능하다.
- 요청시마다 렌더링을 하기 때문에 실시간 데이터이다.
- 사용자별 정보 제공이 가능하다.
단점👎
- 비교적 느리다.
- 서버 과부하가 올 수 있다.
- CDN 캐시가 불가능하다.
Static Site Generation (SSG)
렌더링 하는 주체자가 서버인 렌더링 방식이다.
SSG는 이미 URL별 정의된 파일들을 빌드 시에 정적으로 렌더링 한다.
변경되는 데이터가 없는 페이지에 사용하면 좋다. (ex. 랜딩 페이지)
장점👍
- 페이지 로딩시간 TTV가 빠르다.
- 자바스크립트가 필요 없다.
- SEO 최적화하기 좋다.
- 보안이 뛰어나다.
- CDN 캐시가 가능하다.
단점👎
- 빌드 시 렌더링 되므로 데이터가 정적이다.
- 사용자별 정보 제공이 어렵다.
Incremental Static Regeneration (ISR)
렌더링 하는 주체자가 서버인 렌더링 방식이다.
ISR은 설정된 주기에 따라 주기적으로 렌더링이 진행된다.
장점👍
- 데이터가 주기적으로 업데이트 된다.
단점👎
- 주기적으로 업데이트 되어 실시간 데이터는 아니다.
- 사용자별 정보 제공이 어렵다.
다양한 렌더링 방식중에 Next.js는 페이지 별로 최적화된 렌더링 방식을 선택해서 웹페이지를 구성할 수 있다.
이러한 방식을 Hybrid Rendering 방식이라고 한다.
또한, 하나의 페이지에서도 두개의 렌더링 방식을 섞어서 구현도 가능하다.
Next.js에서 이런 Hybrid Rendering을 하기 위한 Hydration 이라는 개념이 있다.
Next.js의 Hydration
Hydration은 수분 공급이라는 의미로, 정적인 페이지에 수분을 공급하여 동적인 페이지로 만들어준다는 개념이라고 이해 할 수 있다. Next.js에서 Hydration의 과정은 다음과 같다.
1. 클라이언트가 서버에 데이터를 요청했을 때 서버에서 정적인 html만 먼저 보내준다. => Pre-Rendering
2. 정적인 html에 리액트로 페이지를 채우는 컴포넌트 렌더링 과정 (Hydration)을 거쳐 페이지가 완성된다.
Next.js 개발 시에는 이러한 Hydration 컨셉으로 인해 정적인 html과 완성된 페이지 사이 간극을 줄이는 것이 중요하다.
✨ 도움이 되었던 글들 ✨
- 드림코딩 엘리 강의) Next.js 개념정리 - 클론코딩