[React] CSR vs SSR vs SSG [4/27 study]

 

 

CSR vs SSR vs SSG

 

 

 

 

Client Side Rendering (CSR)

CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.

👍장점

▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.

▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.

👎단점

▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.

▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를 실행해서 동적으로 콘텐츠를 생성해야 데이터를 수집할 수 있기 때문에 크롤러가 원하는 수집을 할 수 없는 경우가 있어 검색엔진 최적화에 불리한 점이 있습니다.

👌활용

▪️ 유저의 상호작용이 많고, 유저의 개인정보를 기준으로 서비스하는 페이지에 적합합니다.

▪️ 예시로 유저 프로필 페이지나, 결제 내역, 어드민 전용 페이지가 있습니다.

 

 

Server-side Rendering(SSR)

SSR은 서버에서 리퀘스트에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 말합니다.

👍장점

▪️ 크롤러에게 완성된 페이지를 전달하기 때문에 검색엔진 최적화에 유리합니다.

▪️ 처음 페이지 접근시 서버로부터 해당 페이지에 필요한 데이터들만 전달받고 만들어진 HTML을 전달 받기 때문에 유저가 사용하기 까지 걸리는 시간이 CSR에 비해 빠릅니다.

👎단점

▪️ 서버로 짧은 시간에 많은 요청이 있는 경우 HTML을 만드는 연산작업이 서버에 많은 부하를 줄 수 있습니다.

▪️ 웹 어플리케이션 내에서 페이지 전환시 전체 페이지가 사라지고 새로운 페이지 HTML을 받으면서 깜빡임이 발생해 사용자 경험을 헤칠 수 있습니다.

👌활용

▪️ 페이지 내용에 데이터베이스에 있는 데이터가 필요하고, 검색엔진 최적화가 필요한 페이지에 적합합니다.

▪️ 예시로 가격이나 할인율이 변하기 쉽고, 검색엔진 최적화가 필요한 상품 상세보기 페이지가 있습니다.

 

 

Static Site Generator(SSG)

SSG는 미리 HTML 파일을 만들어서 서버를 배포하고, 서버에 리퀘스트가 들어오면 이미 만들어진 HTML 파일을 읽어서 리스폰스로 보내주는 방식을 말합니다.

👍장점

▪️ 미리 만들어 둔 페이지를 브라우저에 제공하므로 렌더링 속도가 매우 빠릅니다.

▪️ SSR과 마찬가지로 완성된 페이지를 크롤러가 수집하므로 검색엔진 최적화에도 유리합니다.

👎단점

▪️ 모든 url에 대해 개별 HTML 파일을 생성해야 해서 url을 미리 예측할 수 없거나 양이 너무 많으면 적용이 어렵습니다.

👌활용

▪️ 페이지의 내용에 있는 데이터가 자주 바뀔 필요 없고, 검색엔진 최적화가 필요한 페이지에 적합합니다.

▪️ 예시로 블로그나 뉴스같은 정보성 페이지가 있습니다.

 

 

😁참고자료 (사진만 참고하고, 자료는 따로 공부해서 정리해보았다)

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

 

 

🔥마무리

웹 페이지 렌더링 방식이 이렇게 많은지 이번 공부를 통해서 처음 알게 되었고 서로의 장단점과 활용예시까지 공부하면서 더 자세하게 알아가 본 유익한 시간인 것 같다!
가끔 프로그래밍 언어에 대한 깊은내용들을 알아보는 시간도 괜찮은 것 같다😁