CSR (Client Side Rendering)
클라이언트 사이드 렌더링이란?
HTML 및 Static파일들이 로드 되면서 데이트가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다.
Brower가 서버에 HTML과 Static파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JavaScript를 통해 동적으로 Rendering한다.
필요에 따라 데이터를 서버에 요청해서 받아와 Rendering한다.
장점
첫 로딩에 HTML과 Static파일들만 다 받으면 동적으로 빠르게 Rendering하기 때문에 사용자 UX가 뛰어나다.
서버에 요청하는 횟수가 훨씬 적기 때문에 서버 부담이 덜하다.
단점
모든 HTML과 Static파일이 로드될 때까지 기다려야 한다.
리소스를 Chunk 단위로 묶어서 요청할 때만 다운받아 하는 방식으로 완화시킬 수는 있지만 해결할 수는 없다.
SEO (검색엔진 최적화) 문제가 발생할 수 있다.
검색엔진이 크롤링을 하는데 어려움을 겪기 때문에, 구글 검색엔진은 JavaScript까지 크롤링을 하지만 다른 검색엔진의 경우 그렇지 않다.
SSR (Server Side Rendering)
서버 사이드 렌더링이란?
완전하게 만들어진 HTML파일을 받아오고 Rendering하게 된다.
웹서버에 요청할때 마다 Browser에 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식.
장점
초기 로딩 속도가 빠르ㅣ 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다.
단점
매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.
서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.
SSG (Static Site Generation)
정적 사이트 생성이란?
빌드 타임에 미리 HTML 파일을 생성하여 배포하는 방식.
사용자 요청 시 서버에서 HTML을 생성하는 것이 아니라, 이미 생성된 HTML을 빠르게 제공함.
대표적인 프레임워크로는 Next.js, Gatsby 등이 있음.
장점
성능 최적화: 모든 페이지가 정적으로 생성되므로 빠른 응답 속도를 제공.
SEO 친화적: SSR과 마찬가지로 완전한 HTML이 제공되므로 검색 엔진 최적화(SEO)에 유리.
서버 부하 감소: 정적 파일이기 때문에 서버에서 별도의 처리가 필요 없음.
단점
동적인 데이터 반영 어려움: 정적 파일이므로 데이터가 자주 변경되는 사이트에는 적합하지 않음.
해결 방법: ISR(Incremental Static Regeneration)을 사용하면 일정 주기로 정적 페이지를 다시 생성 가능.
빌드 시간 증가: 페이지가 많아질수록 빌드 시간이 길어질 수 있음.