CSR & SSR

박재성·2022년 4월 8일

프론트엔드 스터디 준비를 하며 자바스크립트 전반에 대해 정리를 해보려 한다.

브라우저의 랜더링을 중심으로 꼭 알아야할 내용들을 다뤄보고자 한다.

프론트엔드 개발을 공부했다면 SPA 단어를 많이 들어봤을 것이다.

단어 그대로 의미를 직역하면 단일 페이지의 웹 어플리케이션이다.

처음 보는 사람이 단일 페이지라는 단어를 본다면 아 화면이 하나인 레이아웃이구나 생각할 수 있다.

SPA는 이런 의미가 아니라 하나의 HTML 파일을 자바스크립트를 이용해 동적으로 화면을 제어하는 웹 어플리케이션을 의미한다.

단일 페이지와 반대로 여러 페이지 웹 어플리케이션도 존재한다.

이를 MPA라 하며, 사용자가 페이지를 요청할 때마다 웹 서버에서 해당 하는 데이터를 HTML로 파싱해서 보여주는 웹 어플리케이션 방식이다.

두 방식은 이름만 비슷하지 성격은 완전 다르다.

CSR

앞서 언급했던 SPA를 구현하기 위해 CSR 렌더링 방식을 사용한다.

CSR 방식은 최초에 한 번 전체 페이지를 로딩한 후 사용자의 인터렉션에 의해 필요한 부분만 새롭게 데이터를 바꾼다.

필요한 부분에 집중하자. 과거의 방식은 전체를 로딩하는 방식이었다. 필요한 부분만 데이터를 바꿀 수 있다는 것은 과도한 트래픽이 몰렸을 때 더 효율적으로 처리가 가능해 졌다는 것을 의미이다.

그리고 인터렉션 도중 새로고침이 발생하지 않아, ux 관점에서 더 나은 서비스를 제공하고, 네이티브 앱과 비슷한 경험을 제공할 수 있다는 장점이 있다.

하지만 CSR도 문제가 있다. 검색이 생활화된 사회에서 검색이 잘 안되는 데이터를 가진 웹은 어떻게 될까

절대 안될 것이다. CSR방식만 사용한 웹은 검색엔진최적화(SEO)를 하기 어렵다.

검색 엔진들은 크롤링작업을 통해 웹의 데이터를 검색하는데, CSR 방식, 자바스크립트 위주로 동작하는 웹은 자바스크립트 엔진이 있어야 검색엔진에게 잡힐 수 있게 된다.

다행이 우리의 구글은 자바스크립트 엔진을 내장하고 있어 검색엔진이 크롤링을 할 수 있지만, 모든 브라우저가 제공하는 것이 아니기 때문에, 웹 접근이 어려워질 수 있는 단점이 있다.

SSR은 CSR과 다르게 첫 페이지를 로딩할 때 html,css 즉 View를 먼저 렌더링하고 js 파일을 읽어 적용하기 때문에 사용자가 눈으로 접하는 속도는 굉장히 빠릅니다. 하지만 js 파일이 전부 읽어지기 전까지 사용자와 인터렉션 작용을 할 수 없습니다.

그리고 사용자가 무언가 요청할 때마다 새로운 페이지를 로딩해 항상 돌아가는 마우스를 볼 수 있습니다.

장점 하나 없는 방식 같지만, SSR 방식은 CSR에서 문제가 됐던 SEO에 큰 강점을 가졌습니다.

CSR 그리고 SSR 두 가지 장점을 합친 무언가가 없을까 찾아봤습니다.

첫 번째 방법은 둘 다 사용하는 것 입니다.
처음 페이지를 로딩할 때 SSR을 사용하고 그 후에는 CSR 렌더링 방식을 사용하기

너무 고전적이다. X

그래서 이제 next.js로 리액트식 서버사이드 렌더링을 만들 수 있게 되었다.

두 번째는 react pre-rendering을 만드는 것.

빌드할 때 미리 특정 html파일을 만들어서 처음 렌더링 시 해당 파일을 사용자에게 제공하는 방식이다. 하지만 이 방식은 첫 요청에서 전송된 정적인 파일만 가져오는 것이므로, 완벽한 대안이라고 할 수 없다.

얼른 해보자... 해봐야 마음에 와닿을 것 같다.

개발, 정복