[React] CSR vs SSR (feat.Next.js)

✔️ 개요

리액트를 공부하다보면 CSR과 SSR이라는 용어들을 접하게 된다.
이번 포스팅에서는 CSR과 SSR에 대해서 알아보려고 한다.

CSR과 SSR은 브라우저가 렌더하는 방식들을 의미하는 단어들이다.

📌 CSR

Client Side Rendering

• 렌더링이 클라이언트 쪽에서 일어난다.
• 기본적인 뼈대와 javascript 파일을 우선 모두 받아온 뒤, 소스 코드를 실행하면서 화면을 그려 나간다.
• 즉, 소스 코드를 받은 쪽인 클라이언트가 화면을 완성한다.
  
  출처 : https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when

  1. user가 웹사이트 요청을 보냄.
  2. cdn이 html파일과 js로 접근할 수 있는 링크를 클라이언트로 보냄.
  3. 클라이언트는 html과 js를 다운로드 받음.
  4. 다운이 완료된 js가 실행됨. 데이터를 위한 api가 호출됨.
  5. api로부터의 요청에 서버가 응답함.
  6. api로부터 받아온 데이터를 placeholder자리에 넣어줌. 페이지는 상호작용이 가능해짐.

  즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 js가 모두 다운로드 되고 실행이 끝나기 전까지는 사용자가 볼 수 있는게 없다.

📌 SSR

Server Side Rendering

• 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식이다.
• 클라이언트에서 요청이 들어올 때 마다 서버에서 화면을 미리 완성하여 유저에게 전달한다.
• 즉, 소스 코드를 제공하는 쪽인 서버가 화면을 미리 완성한다.
  
  출처 : https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when

  1. user가 웹사이트 요청을 보냄.
  2. 서버는 즉시 렌더링 가능한 html파일을 만듦.
  3. 클라이언트에 전달되는 순간 이미 렌더링 준비가 되어있기 때문에 html은 즉시 렌더링 됨.
  4. 클라이언트가 js를 다운받음.
  5. 다운이 받아지고 있을 때 유저는 컨텐츠를 볼 수 있지만 사이트 조작은 할 수 없음. 이 때 사용자 조작을 기억하고 있음.
  6. 브라우저가 js프로임워크를 실행함.
  7. js까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 웹 페이지는 상호작용이 가능해짐.

  즉, 서버에서 이미 렌더링 가능한 상태로 클라이언트에 전달되기 때문에 js가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.
  

✔️ 정리

😀 CSR

• js가 전부 다운로드 되어 리액트 어플리케이션이 정상 실행되기 전까지 화면에 보이지 않는다.
• 서버에서 필요한 데이터만 가져오기 때문에 서버의 부하가 덜하다.
• 초기 html은 비어있기 때문에 SEO(검색 엔진 최적화)가 제대로 되지 않는다.

😀 SSR

• js가 전부 다운로드 되지 않아도 일단 화면은 보이지만 유저가 사용할 수는 없다.
• 구성 요소가 바뀌었을 때 그 요소만 재 렌더링을 할 수 있는게 아닌 불필요한 부분까지도 모두 재 렌더링 하게 된다.
• SEO의 최적화가 가능하다.
• 첫 페이지 로딩 속도가 빨라진다.

따라서 Next.js가 개발 되었다.
SSR의 단점인 불필요한 부분까지 모두 재 렌더링 하는 것과 CSR의 단점인 SEO를 보완한 리액트의 프레임 워크가 Next.js이다.
https://nextjs.org/

참고 : https://hahahoho5915.tistory.com/52