[React] 서버 사이드 렌더링

서버 사이드 렌더링의 이해

서버 사이드 렌더링 vs 클라이언트 사이드 렌더링

브러우저 렌더링이란?

서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것

클라이언트 사이드 렌더링(Client Side Rendering)이란?

• 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)을 그리는 주체가 되는 것
• 장점
  • 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있음
    • View 렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터랙션을 제공해 줌
    • 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있음
• 단점
  • 첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 다소 느림
    • 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받아 보니 서버 사이드 렌더링보다 로딩 속도가 느림
  • 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요
    • 포털사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있음. 구글의 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버, 다음의 경우 검색엔진이 제대로 크롤링하지 못하기 때문에 별도의 보완작업이 필요(예 : sitemap 문서 작성)
    * SEO란?
  • 구글과 네이버 같은 검색 엔진들은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML 문서를 분석해서 우리가 검색할 때 웹 사이트를 빠르게 검색할 수 있도록 도와준다. 하지만 CSR에서 사용되어지는 HTML의 바디는 대부분 텅텅 비어있기 때문에 검색엔진들이 CSR로 작성된 웹페이지를 분석하는데 어려움을 겪는다.

서버 사이드 렌더링(Server Side Rendering)이란?

• 서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것. 즉, 서버가 화면(View)을 그리는 주체가 됨
• 장점
  • 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠름.
    • 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠름
  • 검색엔진최적화(SEO)가 가능
• 단점
  • 초기 로딩 이후 페이지 이동 시 속도가 다소 느림
    • 페이지 이동 시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이다 보니 속도가 다소 느림