[Next.js] CSR / SSG / ISR / SSR 특징 장&단점

CSR

---

Clinet Side Rendering

렌더링(=서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.) 하는 주체자가 클라이언트(=브라우저) 

어플리케이션에 필요한 HTML, 라이브러리 자체, 소스코드를 클라이언트 측에서 서버에서 받아서 클라이언트 측에서 DOM요소로 변환해서 브라우저에 표기하는 것.

 

장점? 

• 한번 로딩 되면, 빠른 UX 제공
• 부분적으로만 가져오면 되니까 서버의 부하가 작은

단점?

• 페이지 로딩 시간(TTV)이 길다. TTV: time to view
• FCP (first contentful paint) 처음으로 의미있는 컨텐츠가 표기 될 때까지 오래 걸린다.
• 자바스크립트 활성화가 필수
• SEO 최적화가 힘듬(CSR방식은 서버에서 받아오는 HTML파일이 거의 빈 파일이기 때문에 검색 엔진이 제대로 동작하지 않는다)
• 보안에 취약함
• CDN에 캐시가 안됨 - CDN: Content Delivery Network (콘텐츠 배달 네트워크)은 사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크

이런 문제점을 해결하려고 나온 것들이 SSG, SSR 이다

---

 

SSG

---

Static Site Generation

랜더링 하는 주체자가 서버, 언제 렌더링 하냐에 따라 달라짐. 빌드할 때 렌더링! 

정적인 사이트를 만드는 것. 정적인 파일로 변환 후 배포하자. 

 

장점?

• 페이지 로딩 시간이 빠름
• 자바스크립트 필요 없음
• SEO 최적화가 좋음. 웹 크롤러가 빠르고 효율적으로 페이지를 확인함
• 보안이 뛰어남
• CDN에 캐시가 됨

단점?

• 데이터가 정적임(데이터가 잘 바뀌지 않는 웹 사이트에는 적합)
• 사용자별 정보 제공의 어려움
• 정적일 때만 유용

---

ISR

---

Incremental Static Regeneration 

주기적으로 다시 만들수 있는 방식

렌더링하는 주체자가 서버, 언제 렌더링 하냐? 주기적으로 렌더링! 설정한 주기 만큼.

 

정점?

• SSG와 동일한 원리, 데이터 주기적으로 랜더링됨.

단점?

• 여전히 실시간 데이터가 아님.
• 사용자별 저보 제공 어려움

 

이런 문제점을 해결하기 위해 나온 게 SSR

---

SSR

---

Server Side Rendering

렌더링 하는 주체자가 서버, 어제 렌더링 하냐? 클라이언트가 요청시 렌더링

 

장점?

• TTV가 빠름
• 자바스크립트 필요 없음
• SEO 최적화가 좋음
• 보안이 뛰어남
• 실시간 데이터를 사용!
• 사용자별, 필요한 데이터를 사용

문제점?

• SSG, ISR과 비교했을 때, 비교적 느릴 수 있음
• 서버의 과부하가 걸릴 수 있음
• CDN에 캐시가 안 됨

---

하이브리드 렌더링

---

Next.js 에서 제공하는 Hybrid Web App

혼합 : 두개 이상 기능이나 요소를 결합

(CSR, SSG, ISR, SSR)

한 어플리케이션 내에서 페이지 별로, 페이지 특징별로 가장 최적화된 렌더링 방식을 선택해서 만들어 나갈 수 있다.

한 페이지 내에서도 페이지 부분 별로 섞어서 하이브리드 형태로 만들 수 있다. 

 

하이드레이션 - > 수화시키다. 물(리액트)로 가득 채우다 

pre rendering된 정적인 HTML + React 컴포넌트로 랜더링

TTV를 줄여나가는 것이 중요!

 

 

언제 어떤 걸 쓰면 좋은지 정리

 

 

feat.드림코딩 강의