✅ CSR(Client Side Rendering)
Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식입니다.
최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다.
장점
▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.
▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.
단점
SPA(Single Page Application) 의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.
▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를 실행해서 동적으로 콘텐츠를 생성해야 데이터를 수집할 수 있기 때문에 크롤러가 원하는 수집을 할 수 없는 경우가 있어 검색엔진 최적화에 불리한 점이 있습니다.
활용
▪️ 유저의 상호작용이 많고, 유저의 개인정보를 기준으로 서비스하는 페이지에 적합합니다.
▪️ 예시로 유저 프로필 페이지나, 결제 내역, 어드민 전용 페이지가 있습니다.
✅ SSR(Server Side Rendering)
Server Side Rendering의 약자로 서버측에서 렌더링하는 방식을 말합니다. 서버에서 리퀘스트에 맞는 HTML을 만들어서 리스폰스로 보내줍니다.
장점
▪️ 크롤러에게 완성된 페이지를 전달하기 때문에 검색엔진 최적화에 유리합니다.
▪️ 처음 페이지 접근시 서버로부터 해당 페이지에 필요한 데이터들만 전달받고 만들어진 HTML을 전달 받기 때문에 유저가 사용하기 까지 걸리는 시간이 CSR에 비해 빠릅니다.
단점
▪️ 서버로 짧은 시간에 많은 요청이 있는 경우 HTML을 만드는 연산작업이 서버에 많은 부하를 줄 수 있습니다.
▪️ 웹 어플리케이션 내에서 페이지 전환시 전체 페이지가 사라지고 새로운 페이지 HTML을 받으면서 깜빡임이 발생해 사용자 경험을 헤칠 수 있습니다.
활용
▪️ 페이지 내용에 데이터베이스에 있는 데이터가 필요하고, 검색엔진 최적화가 필요한 페이지에 적합합니다.
▪️ 예시로 가격이나 할인율이 변하기 쉽고, 검색엔진 최적화가 필요한 상품 상세보기 페이지가 있습니다.
✅ SSG(Static Site Generation)
Static Site Generation의 약자로 SSG는 미리 HTML 파일을 만들어서 서버를 배포하고, 서버에 리퀘스트가 들어오면 이미 만들어진 HTML 파일을 읽어서 리스폰스로 보내주는 방식을 말합니다.
장점
▪️ 미리 만들어 둔 페이지를 브라우저에 제공하므로 렌더링 속도가 매우 빠릅니다.
▪️ SSR과 마찬가지로 완성된 페이지를 크롤러가 수집하므로 검색엔진 최적화에도 유리합니다.
단점
▪️ 모든 url에 대해 개별 HTML 파일을 생성해야 해서 url을 미리 예측할 수 없거나 양이 너무 많으면 적용이 어렵습니다.
활용
▪️ 페이지의 내용에 있는 데이터가 자주 바뀔 필요 없고, 검색엔진 최적화가 필요한 페이지에 적합합니다.
▪️ 예시로 블로그나 뉴스같은 정보성 페이지가 있습니다.
출처
https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/
https://velog.io/@kyeun95/CSR-SSR-SSG-ISR-%EC%9D%B4%EB%9E%80
