CSR(Client Side Rendering)

브라우저에 표기가 필요한 모든 코드를 클라이언트(브라우저)에서 다운받아 렌더링 시키는 방식

---

HTML,js,css등을 서버로부터 받아 클라이언트측에서 DOM요소를 조작해 내용을 출력하는 것

장점

• 한번 로딩이 끝나면 빠른 UX를 제공한다.
• 서버의 부하가 적다

단점

• 페이지 로딩시간이 길다.
• 자바스크립트를 필수적으로 활성화 해야한다.
• SEO에 취약하다.(초기에 빈 HTML만 받기에 검색엔진 bot이 확인 불가)

SSR(Server Side Rendering)

서버에서 HTML을 미리 생성해 렌더링 시키는 방식

장점

• 페이지 로딩 시간이 빠르다 (미리 만들어 렌더링 하기 때문)
• 자바스크립트 필요 X
• SEO에 좋다 (초기 렌더링시 HTML이 있기 때문)
• 보안에 좋다
• 실시간 데이터를 보여준다.

단점

• 요청을 할때마다 HTML을 생성하기 때문에 SSG,ISR에 비해 느리다.(CSR보다는 빠름)
• 요청이 많을 경우 서버에 과부하가 걸릴 수 있다.
• CDN 캐시가 이루어지지 않는다. (매 요청마다 콘텐츠를 읽어 HTML에 포함시키고 렌더링을 하기 때문에 보통 캐시를 하지 않음)
• 페이지 이동시 화면이 깜빡임

ISR(Incremental Static Regeneration)

서버에서 일정 주기를 가지고 '빌드시점' 에 HTML을 생성 후 내려줌

장점

• 페이지 로딩 시간이 빠르다
• 자바스크립트 필요 X
• SEO가 좋다
• 보안이 좋다
• CDN 캐싱이 가능하다
• 주기적으로 데이터 업데이트

단점

• 실시간 데이터가 아님
• 사용자별 정보 제공에 어려움이 있다.

SSG(Static Site Generation)

서버에서 정적인 HTML을 '빌드시점'에 미리 생성

장점

• 페이지 로딩 시간이 빠르다.
• 자바스크립트 필요 X
• SEO가 좋다
• 보안이 좋다
• CDN 캐시 가능

단점

• 정적인 내용
• 실시간 데이터가 아니다
• 사용자별 정보 제공에 어려움이 있다.

Hybrid

두개 이상의 렌더링 방식을 결합 시키는 것

• 넥스트는 여러개의 렌더링 방식을 한 페이지에서 사용이 가능하다