Web 생태계의 렌더링 CSR ~ SSR

CSR : Client Side Rendering

렌더링 주체가 클라이언트.

 

첫 수신 페이지가 빈 html이고 

JS가 프레임워크 코드를 해석하여 렌더링 후 Painting하기 때문에

JS 활성화가 필수 옵션임.

단점

페이지 로딩 시간이 상대적으로 길다. ( TTV, FCP가 길다. )

첫 페이지가 빈 html이기 때문에 웹 크롤러 봇에 의한 SEO최적화가 어렵다.

장점

React와 같이 잘 활성화된 프레임워크를 사용하는 경우

리액트 라이브러리 소스와 리액트 Syntax로 만든 컴포넌트 소스 코드를 

서버에서 클라이언트로 전달한다.

 

컴포넌트 단위로 소스를 관리하기 때문에 유지 보수성이 뛰어남.

첫 로딩만 상대적으로 길다 뿐이지 로딩 이후에는 반응성이 뛰어남.

SSG : Static Site Generation

렌더링 주체가 서버.

서빙할 HTML파일들을 빌드 타임에 제작하며 

HTML파일이 서버에 위치한다.

장점

첫 html페이지에 컨텐츠가 담겨있기 때문에 SEO 최적화에 좋음

문서만 받는 형태이기 때문에 (HTML만 주고받을 수 있음)

CDN에 캐시가 가능하고

JS가 불필요하기 때문에 상대적으로 보안이 뛰어남.

위의 이유로 페이지 로딩 시간 빠름.

단점

정적인 데이터를 서빙하기 때문에

사용자 개개인의 정보 제공이 어렵다.

(할 수는 있으나 html을 빌드하는 과정에서 해야 함.)

정적인 데이터 제공 방식에 적합함.

ISR Incremental Static ReGeneration

렌더링 주체가 서버

한 번 컨텐츠를 생성하고 마는 것이 아니라

주기적으로 렌더링한다.

SSG에 주기적으로 내용을 업데이트하는 특징이 

장점

첫 html페이지에 컨텐츠가 담겨있기 때문에 SEO 최적화에 좋음

문서만 받는 형태이기 때문에 (HTML만 주고받을 수 있음)

CDN에 캐시가 가능하고

JS가 불필요하기 때문에 상대적으로 보안이 뛰어남.

위의 이유로 페이지 로딩 시간 빠름

데이터가 주기적으로 업데이트 됨

단점

주기적이기 때문에 완전 실시간 데이터가 아님

사용자별 정보 제공 어려움

SSR Server side rendering

렌더링 주체가 서버

요청시 요청 정보에 따라 적합한 데이터를 첨부하여 렌더링한다.

SSG와의 차이는 SSR또한 문서를 반환하지만

정적인 문서와 달리 데이터가 동적이다.

(매출 내역, 통계 , 방문자 수 등)

장점

동적 데이터 취급 

SEO 최적화 용이

단점

요청시, 요청 정보에 따라 서버에서 렌더링하므로

바뀐 정보나, 새 정보, 또는 기존 변하지 않은 정보라도 페이지 refresh가 필수적이다.

(브라우저 자체에서 캐싱하는 데이터의 경우는 제외함)

변하지 않은 정보의 페이지도 서버에서 받아오도록 로직이 짜여있기 때문.

Hybrid 방식

목적에 맞게 위 기법들을 혼합하여 서비스 구성.