[바미] SSR과 CSR

브라우저 렌더링

먼저 브라우저 랜더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시해주는 작업을 말합니다.

브라우저가 서버로부터 HTML, CSS, JS 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이죠.

 

예를 들어, 아무 브라우저에 접속해서 주소창에 https://www.naver.com/ 을 입력한다면 브라우저는 네이버 서버로부터

네이버 웹사이트에 대한 정보를 받아 브라우저 화면에 네이버 홈페이지를 그려 주게 되는 것이죠.

 

그리고 이러한 브라우저 렌더링은 크게 ' 서버 사이드 렌더링'과 ' 클라이언트 사이드 렌더링' 방식으로 나누어 지죠.

---

서버 사이드 렌더링

서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식을 말합니다.

클라이언트에서 요청이 들어올 때마다 매 번 서버에서 새로운 화면을 만들어 제공하는 것이죠.

그러니까 서버가 화면을 그리는 주체가 되는 것이죠.

 

 

장점

• 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빨라요.
  • 해당 첫 페이지에서 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링 하기 때문에 초기 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르죠.
• SEO가 가능해요.

단점

• 초기 로딩 이후 페이지 이동 시 속도가 다소 느려요.
  • 페이지 이동 시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이다 보니 속도가 다소 느릴 수 밖에 없습니다.

---

클라이언트 사이드 렌더링

클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식이에요.

서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 방식이죠.

 

장점

• 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있어요.
  • View 렌더링을 브라우저에게 담당시켜 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공해줘요.
  • 새로고침이 발생하지 않기 때문에 사용자가 네이티브 앱과 비슷한 경험을 할 수 있죠.

단점

• SEO에 대한 추가 보완 작업이 필요해요
  • 포털사이트 검색엔진 크롤러가 웹 사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있어요.
    구글의 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 네이버, 다음의 경우 검색엔진이 제대로 크롤링하지 못하기 때문에 sitemap 문서 작성과 같은 별도의 보완 작업이 필요해요.