서로 다른 브라우저 렌더링

우리가 보고 있는 브라우저에서는 다양한 일들이 일어납니다.

그 다양한 일 중 하나는 브라우저 렌더링도 있습니다.

SPA에서는 렌더링 방식이 두가지로 나뉘게 됩니다.

바로 CSR(Client Side Rendering)과 SSR(Server Side Rendering)입니다.

CSR

CSR 방식은 SPA(Single Page Application)의 등장으로부터 대두되었습니다.

SPA는 싱글, 즉 하나의 페이지에 필요한 부분만 불러오는 방식을 채택한 것입니다.

처음 접속 시 빈 껍데기의 HTML 파일을 받고, 사용자가 필요할 때마다 데이터를 받아 화면을 렌더링 합니다.

처음 유저가 접속 시 빈 화면을 보고, 요청에 따라 데이터가 채워지는 형식인 셈이죠.

단, 모든 HTML과 Css, 그리고 JS들을 다 로드해야만 페이지 렌더링이 완료됩니다.

그리고 아주 치명적인 단점이 존재하는데, SEO(검색엔진최적화)를 할 수 없다는 점입니다.

크롤러가 자바스크립트만으로 되어있는 웹 페이지를 못읽기 때문입니다..

이점 때문에 리액트로 서버사이드렌더링 설정을 하는 경우도 종종 있긴합니다.

장점

• 빠른 페이지 이동(처음에 다 불러오니까)
• 서버에 데이터를 요청하는 횟수가 적음

단점

• SEO가 친화적이지 않음
• 처음에 모든 HTML과 Static 파일을 로드해야함.

SSR

그 반면에 SSR 방식은 어떨까요?

CSR 방식과 다릅니다.

완전히 만들어진 HTML 파일을 받아오고 렌더링하게 됩니다.

초기 로딩 속도가 빠르기 때문에 컨텐츠를 빨리 볼 수 있다는 장점이 있지만

페이지 이동 시, 만약 SSR이 되어있다면 꽤 느린 속도를 경험할 수 있습니다.

매번 페이지를 요청할 때마다 새로고침이 되고, 서버에 매번 요청하기 때문에 서버 부하도 크겠죠.

하지만 SEO에 친화적이기 때문에 앞서 말한대로 리액트에 서버사이드렌더링을 끼얹던가 넥스트를 사용하곤 합니다.

장점

• 초기 로딩 속도가 빠름.
• SEO(검색엔진 최적화)가 가능.
  단점
• 서버에 매번 요청을 해 속도가 느리고 서버가 부하됨

CSR VS SSR ?

CSR과 SSR을 하나만 선택해서 사용하는 건 그렇게 권장할만한 사항은 아닌 거 같습니다.

CSR과 SSR을 따로 떼어 놓고 설명할 순 없기 때문입니다.

각각의 장점이 있으니 검색 엔진이 필요하다면 SSR 방식을 취하고, 검색 엔진이 필요하지 않다면 CSR 방식을 취하면 되겠습니다.