React | Server Side Rendering vs. Client Side Rendering, 서버사이드 렌더링과 클라이언트 사이드 렌더링

렌더링은 무엇인가?

서버로 부터 받은 내용을 브라우저 화면에 표시하는 것

렌더링 과정

• Loader 가 서버로 부터 정보(HTML 문서)들을 불러옴
• 파싱을 통해 문서를 DOM 트리로 만든다.
• DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
• CSS 설정/레이아웃 위치 지정
• 렌더링 트리가 그려짐

---

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 페이지를 이동할 때마다 새로운 페이지를 요청한다.

• 웹사이트를 방문하면 브라우저가 서버에 요청한다.
• 이 요청이 처리되면 브라우저가 컨텐츠를 해석하고 페이즈를 표시한다.
• DB에서 데이터를 가져오고 HTML 페이지를 만들어 브라우저로 다시 보낸다.
• 이러한 방식은 서버 부하가 증가하고 불필요한 인터넷 대역폭이 소모될 수 있다.

장점

• 검색엔진에 최적화
• HTML이 먼저 렌더링 되기 때문에 성능이 개선된다.

단점

• 페이지 요청마다 새로고침이 일어나기 때문에 페이지 이동 시 화면이 깜빡 거린다.
• 서버 렌더링에 따른 부하가 발생

클라이언트 사이드 렌더링 (CSR)

브라우저가 자바스크립트에 대한 링크가 있는 빈 문서를 제공한다.

• 클라이언트에서 렌더링하는 방식이다.
• 서버로부터 데이터를 받아 클라이언트에서 바뀐 데이터가 있는 화면만 새롭게 렌더링 한다.
• 첫 요청 시에는 한 페이지만 불러옴 (리액트에서는 index.js)
• 서버는 단지 JSON 파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.

장점

• 리로딩 없는 빠른 인터랙션 - 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

단점

• 초기 구동속도가 느리다.
• 검색엔진 최적화가 어렵다

자바스크립트 위주로 돌아가는 프로젝트는 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못함. 크롬에서 react로 만든 웹의 소스를 확인하면, 내용이 비어있다. 그렇기 때문에 검색엔진 크롤러가 데이터들을 제대로 수집하지 못한다. 하지만 구글에서는 자바스크립트 엔진이 내장되어 있다. 다음, 네이버 등 검색 엔진은 제대로 크롤링하지 못하기 때문에 서버사이드 렌더링을 따로 구현해야한다.

📌 SPA (Single Page Aplication)

SPA(Single Page Application)은 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 어플리케이션이다.

• 여기서 SPA는 클라이언트사이드렌더링 방식이다.
  • 기본적으로 페이지 로드가 없고, 모든 페이지는 단순히 HTML5 History에 의해 렌더링 될 뿐, 언제 새로운 데이터를 불러와야 할지 스스로 정해서 구현해야 한다.