서버사이드 렌더링 SSR , 클라이언트 사이드 렌더링 CSR 간단 장단점

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

Next.js를 알아보다 서버 사이드 렌더링이라는 말을 들었다.

서버 사이드 렌더링이란 무엇일까 ?

말 그대로 서버에서 렌더링을 한다는 것이다. 더 자세히 얘기해보자면, 서버에서 페이지를 그려 클리이언트로 보낸 후 화면을 표시하는 기법이다.
이 반대대는 개념이 클라이언트 사이드 렌더링이고 대표적으로 내가 사용하는 React이다.

서버 사이드 렌더링 , SSR

동작과정

장단점

• 장점

  • SEO, 검색엔진 최적화의 좋다.
    여기서 SEO란 검색엔진이 웹을 크롤링 하면서 페이지에 컨턴츠 색인을 생성하는 과정인데,
    모든 데이터가 이미 HTML에 담겨진채로 서버에서 받기 때문에, 어플리케이션을 구성하는 모든 페이지를 가지고 있게되고 이로 인해 seo 효과가 좋다.

  • 빠른 초기 로딩
    서버에서 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 비교적 초기 로딩 속도가 빠르다.

• 단점

  • 서버 부화의 요지가 있다
    새로운 요청이 생길때마다 바뀌지 않아도 되는 부분도 렌더링이된다. 사용자가 많이 겹치게 되면 이 부분이 더 심해지고 서버 부화로 이어질 수 있다.

클라이언트 사이드 렌더링 , CSR

동작 과정

장단점

• 장점

  • 서버의 부담을 줄일 수 있다
    SRR과 다르게 필요한 페이지를 그리는데 필요한 데이터만 서버에 요청하기 때문 또한 변경된 부분만 요청하기 때문에 서버의 부담을 줄일 수 있다.
  • 사용자 친환경적
    SSR 부분에서는 따로 말하진 않았는데, SSR에서 필수 요소만 받아오기 때문에 렌더링이 빠르게 되지만, 명령(?)을 빠르게 실행하면 TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 존재하게 된니다. 즉 이동을 하려고 링크를 눌렀지만 아무런 반응이 없을 수도 있다.
    또한 모든 페이지를 렌더링 하기 때문에 오래 걸린다.
  • CSR은 이 부분이 없기 때문에 사용자 경험을 좋게 할 수 있다.*

• 단점

  • 초기 로딩속도가 느리다
    모든 JS를 사용하여 로드 해야하기 때문에 빈페이지를 보는 시간이 길어진다.
  • seo의 약하다
    이 부분에서는 당연하게도 모든 페이지가 없기 때문에 검색 엔진에 노출할 수 없게 된다.
  • 다만* 구글에서는 크롤러 봇을 통해 검색을 하게 되는데, 이 친구는 JS를 실행할 줄 안다. 그래서 CSR 웹 크롤링도 가능하다고는 하는데, 아직은 완벽한 단계는 아니라고 한다.

좋은 렌더링 방식

어떤게 좋다고 말할 수 없다.
서비스, 프로젝트 성격에 따라 달라질 수 있을 것이다.
많은 상황을 고려해야 하지만 검색 엔진 노출이 1순위라면 당연히 SSR을 선택할 것이고, 더 나은 사용자 경험을 원한다면 CSR 방식을 선택 할 것이다.

보통은 정적인 페이지는 SSR / 동적인 페이지는 CSR을 선택한다고 들었는데, 아직까지는 이해하기 어려운 부분인 것 같다.

아래 이미지는 지금 당장 이해할 수 없는데, 나중에 보면 도움이 될 것 같아서 우선 가져와 봤다.

출처 :
oneroomtable.tistory.com

miracleground.tistory.com

nyeongnyeong.tistory.