클라이언트 사이드 렌더링(CSR) VS 서버 사이드 렌더링(SSR) ?

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

페이지의 내용을 브라우저에서 그리는 클라이언트 사이드 렌더링(CSR)을 내장하고 있다.

따라서 사용자가 페이지에 진입 후

(클라이언트 쪽에서) 페이지 내 자바스크립트 코드가 실행될 때 데이터를 가져올 수 있으므로
데이터를 가져오는 시간을 사용자는 기다린 후 화면을 볼 수 있다.

 

이러한 경우가 큰 문제가 되는건 아니지만 검색 엔진 최적화(SEO)가 중요한 경우 문제가 될 수 있다.

로그인을 해야만 볼 수 있는 화면 같은 경우 검색 엔진이 볼 수 없기에 검색 엔진 최적화(SEO)가 중요하지 않지만,
콘텐츠가 많이 공개되어 있는 화면 같은 경우 검색 엔진 최적화(SEO)가 중요하다!
검색 엔진 크롤러는 서버에서 들어온 비어있는 초기 HTML만 바라볼 수 있기 떄문에 검색 엔진 최적화(SEO)가 제대로 이루어지지 않을 수 있다.
따라서 이런 경우를 보완하기 위해 서버 사이드 렌더링(SSR)이 필요하다.

 

💡 서버 사이드 렌더링(SSR)이란?

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 말한다.
따라서 페이지 콘텐츠를 클라이언트가 아닌 서버에서 전적으로 준비하는 것을 의미한다.

---

물론 ReactJS에서도 SSR을 추가할 수 있는 기능이 내장되어 있지만, 추가 설정이 까다롭기 때문에 구현하기 어려울 수 있다.
그러나 NextJS에서는 SSR이 내장되어 있으므로 NextJS로 앱을 만들면 추가 설정 없이 자동으로 서버에서 사전 렌더링을 하게 된다.
따라서 NextJS를 통해 사용자는 깜빡이는(로딩) 상태 화면을 보지 않아도 되고, 검색 엔진도 다 불러와진 데이터를 볼 수 있게 되므로 SEO 문제를 해결할 수 있다.

또한 NextJS에서는 SSR과 CSR을 혼합하여 사용할 수 있다.
대화형 인터페이스 경우 CSR을, 초기 로딩 시에는 SSR을 사용할 수 있다는 것이다.(결론 아주 좋다.)