CSR과 SSR 그리고 Next.js

🌐 CSR SSR?

CSR은 Client Side Rendering의 약자이고 SSR은 Server Side Rendering의 약자이다.

• SSR
  • SSR은 요청 후 서버에서 렌더링 준비를 마치면, 그걸 클라이언트에 전달하여 준다.
  • 클라이언트에 전달되는 순간 이미 렌더링 준비가 되어 있기 때문에 HTML이 즉시 렌더링된다.(JS가 다운되기 전이라도 사용자가 화면에서 무언가를 볼 수 있음)
  • 초기로딩은 CSR보다 빠르지만 페이지를 이동할 때 마다 위 작업을 반복해서 실행하기 때문에 상대적으로 서버에 부하가 간다.
• CSR
  • CSR은 요청을 받으면 서버에서 처리하지 않고 HTML과 JS를 클라이언트로 보내주고, 클라이언트에서 렌더를 시작한다.
  • 모든 JS파일이 다운되어야 사용자에게 화면이 보인다.

💡 React에서 Next.js를 사용하는 이유?

• SPA?
  • React나 Vue와 같은 JS의 프레임워크(라이브러리)들은 SPA(Single Page Application)방식을 사용한다.
  • SPA는 단일 페이지로 구성된 웹 어플리케이션이다. 화면 이동 시 필요한 데이터만 서버에서 전달받아서 동적으로 렌더링한다.
  • 그렇기 때문에 이동할 때 화면을 구성하는 속도가 빠르며, 모든 페이지가 다시 구성되지 않기 때문에 페이지를 이동할 때 화면이 깜빡이지 않는 장점이 있다.
• 기본적으로 SPA는 CSR을 사용한다.
  • CSR은 웹페이지를 요청할 때 빈 HTML을 먼저 가져온 후 스크립트를 가져오기 때문에 초기로딩이 오래걸린다.
  • 이 때문에 SEO(검색엔진 최적화)문제가 발생한다. 검색엔진 봇이 웹사이트에 오래 머무르지 않기 때문에 CSR로 이루어진 사이트는 빈 사이트로 인식하고 나가버릴 수 있다.
  • 다만 검색엔진이 JS기반이면 SPA사이트라도 사이트 색인이나 정보수집을 잘 한다고 한다(ex. 구글) 어쨌든 SEO가 잘 되려면 SSR이 유리
• React의 프레임워크인 Next.js는 React에서 SEO문제를 해결하기 위한 방법 중 하나이다.
  • Next.js를 사용하면 SSR을 할 것인지 CSR을 할 것인지 유연하게 선택할 수 있다.
  • 처음 웹사이트를 로딩할 때는 SSR을 사용하여 처음부터 데이터가 채워진 HTML을 받아서 SEO문제를 해결하고, 페이지 이동 시에는 CSR을 사용하여 필요한 데이터만 갱신한다면 두 렌더링 방식의 장점만 활용할 수 있다.