CSR, SSR, SSG
CSR (Client-side Rendering)
CSR은 웹 브라우저에서 JavaScript로 HTML을 생성하여 렌더링하는 방식입니다.
장점
- 페이지 전환 속도가 SSR보다 빠르며, 깜빡임 없이 부드럽게 페이지가 바뀝니다.
- JavaScript에서 HTML을 생성하는 연산 작업이 서버에 집중되지 않아, 서버에 부하가 적게 발생합니다.
단점
- SPA(Single Page Application)의 경우, 처음 페이지에 접근 시 서버로부터 전체 페이지에 대한 JavaScript 번들 파일, CSS 파일을 받아야 하므로, 페이지를 생성하고 사용자가 사용하기까지의 시간이 SSR보다 오래 걸립니다.
- 검색 엔진에서 자동화된 로봇인 '크롤러'로 웹 사이트를 읽는데, CSR은 JavaScript를 실행하여 동적으로 콘텐츠를 생성해야 데이터를 수집할 수 있기 때문에, 크롤러가 원하는 수집을 할 수 없는 경우가 있어 검색엔진 최적화(SEO)에 불리합니다.
활용
- 사용자의 상호작용이 많고, 사용자의 개인 정보를 기준으로 서비스하는 페이지에 적합합니다.
- 예시로 사용자 프로필 페이지, 결제 내역, 관리자 전용 페이지 등이 있습니다.
SSR (Server-side Rendering)
SSR은 서버에서 요청에 맞는 HTML을 생성하여 응답으로 보내주는 방식입니다.
장점
- 크롤러에게 완성된 페이지를 전달하므로 SEO에 유리합니다.
- 처음 페이지에 접근시 서버로부터 해당 페이지에 필요한 데이터들만 전달받고 만들어진 HTML을 전달 받기 때문에, 사용자가 사용하기까지 걸리는 시간이 CSR보다 빠릅니다.
단점
- 서버로 짧은 시간에 많은 요청이 있는 경우, HTML을 만드는 연산 작업이 서버에 많은 부하를 줄 수 있습니다.
- 웹 애플리케이션 내에서 페이지 전환 시 전체 페이지가 사라지고 새로운 페이지 HTML을 받으면서 깜빡임이 발생해 사용자 경험을 해칠 수 있습니다.
활용
- 페이지 내용에 데이터베이스에 있는 데이터가 필요하고, SEO가 필요한 페이지에 적합합니다.
- 예시로 가격이나 할인율이 변하기 쉽고, SEO가 필요한 상품 상세보기 페이지 등이 있습니다.
SSG (Static Site Generation)
SSG는 미리 HTML 파일을 생성하여 서버를 배포하고, 서버에 요청이 들어오면 이미 생성된 HTML 파일을 읽어서 응답으로 보내주는 방식입니다.
장점
- 미리 만들어 둔 페이지를 브라우저에 제공하므로 렌더링 속도가 매우 빠릅니다.
- SSR과 마찬가지로 완성된 페이지를 크롤러가 수집하므로 SEO에 유리합니다.
단점
- 모든 URL에 대해 개별 HTML 파일을 생성해야 하므로, URL을 미리 예측할 수 없거나 양이 너무 많으면 적용이 어렵습니다.
활용
- 페이지의 내용에 있는 데이터가 자주 바뀔 필요 없고, SEO가 필요한 페이지에 적합합니다.
- 예시로 블로그나 뉴스 같은 정보성 페이지가 있습니다.
참고 자료: Codeit
안녕하세요 강나리입니다.