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

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

CSR

• Client Side Rendering의 약자이다.
• 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다.

과정 설명

1. 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다. 
   React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web Application 전체가 들어 있다.
2. Script가 load 된 후 Browser가 React를 실행시키게 된다.
3. React Componet들이 화면에 그려지게 되고 그 이후 화면이 보여지고 유저가 Interaction 할 수 있게 됩니다.

---

SSR

• Server Side Rendering의 약자이다.
• 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다.

1. 이미 표현 되어진 HTML을 다운로드하게 된다. 
2. HTML이 먼저 렌더 되고 난 후 React Web Application이 포함된 JS가 다운로드된다. (이때 사용자는 Interaction 불가능)
3. React Script가 load 된 후 사용자가 Interaction이 가능하다.

---

정리

SSR

• JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음.
• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능
• 전통적인 렌더링 방식이다. React에선 CSR을 사용한다. 
• 단점으론 페이지 구성 요소가 바뀌었을 때 그 요소만 재 랜더링 할 수 있는 것이 아닌, 불필요한 부분까지 모두 재 랜더링 하게 된다.

 

CSR

• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않는다.
• JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 이후, 화면이 보이면서 유저가 인터렉션 가능하다.
• 필요한 데이터만 서버에서 가져오기 때문에 서버의 부하가 덜하다는 장점이 있다.
• 초기 html은 빈 깡통이기 때문에 SEO(검색 엔진 최적화)가 제대로 되지 않는다는 단점이 있다. 

 

---

따라서 Next.js가 개발 되었다.

SSR의 단점인 불 필요한 부분까지 모두 재 랜더링 하는 것과 CSR의 단점인 SEO를 단점들을 보완한 프레임 워크가 Next.js이다.

https://nextjs.org/

Next.js by Vercel - The React Framework

Production 단계를 거치는 React 앱에 필수라고 불린다. Next.js를 사용하여 처음 빌드되는 페이지에 서버에서 렌더링 하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색 최적화 문제를 해결한 리액트 프레임워크이다.

 

레퍼런스

• https://slides.com/woongjae/react2021#/2/8
• https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4