프론트엔드 개발/React
[React] SSR vs. CSR (Feat.Next.js)
Jongung
2022. 7. 1. 23:59
CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저가 렌더하는 방식들을 의미하는 단어들이다.
CSR
- Client Side Rendering의 약자이다.
- 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다.
과정 설명
- 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다.
React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web Application 전체가 들어 있다. - Script가 load 된 후 Browser가 React를 실행시키게 된다.
- React Componet들이 화면에 그려지게 되고 그 이후 화면이 보여지고 유저가 Interaction 할 수 있게 됩니다.
SSR
- Server Side Rendering의 약자이다.
- 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다.
- 이미 표현 되어진 HTML을 다운로드하게 된다.
- HTML이 먼저 렌더 되고 난 후 React Web Application이 포함된 JS가 다운로드된다. (이때 사용자는 Interaction 불가능)
- React Script가 load 된 후 사용자가 Interaction이 가능하다.
정리
SSR
- JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음.
- JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능
- 전통적인 렌더링 방식이다. React에선 CSR을 사용한다.
- 단점으론 페이지 구성 요소가 바뀌었을 때 그 요소만 재 랜더링 할 수 있는 것이 아닌, 불필요한 부분까지 모두 재 랜더링 하게 된다.
CSR
- JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않는다.
- JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 이후, 화면이 보이면서 유저가 인터렉션 가능하다.
- 필요한 데이터만 서버에서 가져오기 때문에 서버의 부하가 덜하다는 장점이 있다.
- 초기 html은 빈 깡통이기 때문에 SEO(검색 엔진 최적화)가 제대로 되지 않는다는 단점이 있다.
따라서 Next.js가 개발 되었다.
SSR의 단점인 불 필요한 부분까지 모두 재 랜더링 하는 것과 CSR의 단점인 SEO를 단점들을 보완한 프레임 워크가 Next.js이다.
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
Production 단계를 거치는 React 앱에 필수라고 불린다. Next.js를 사용하여 처음 빌드되는 페이지에 서버에서 렌더링 하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색 최적화 문제를 해결한 리액트 프레임워크이다.
레퍼런스