CSR(Client Side Rendering) 과 SSR(Sever Side Rendering

SPA와 MPA

    • SPA (Single Page Application)

        • 하나의 html 파일을 기반으로 자바스크립트를 이용해서 동적으로 화면 구성을 바꿔주는 웹 어플리케이션

    • MPA (Mutiple Page Application)

        • 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 html로 파싱해서 보여주는 웹 어플리케이션 방식이다.      

 

보통 각 SPA방식은 CSR이고 MPA방식은 SSR방식이다. 왜 그런지 알아보도록 하자

 

 

---

CSR

CSR에서는 웹브라우저가 서버에 html과 js를 요청하고 나서 해당 내용이 로드 되면 사용자의 상호작용을 JS를 이용해서  동적으로 렌더링 시킨다.

 

장점

• 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 측면에서 활용하기 좋다.

• 서버에 요청하는 횟수자체가 적기 때문에 서버에 부담이 덜 된다. 

• 페이지를 매번 요청할 때마다 새로고침이 되지는 않기 때문에 사용자가 페이지를 매우 빠르게 이용할 수 있다.

 

단점

• 하지만 모든 스크립트를 한번에 로딩하기 때문에 첫 로딩이 될때 까지 기다려야 한다.

    • 리소스를 chuck(데이터 덩어리) 단위로 묶어서 요청할 때만 다운로드 받는 방식으로 첫 로딩 시간을 줄일수 있지만 극단적으로 짧게 할 수는 없다.

• 검색엔진이 메타 데이터를 크롤링을 할 때 어려움을 겪기 때문에 검색엔진 최적화 SEO(Search Engine Optimization) 의 문제가 있다.

    • 구글 봇의 경우는 JS를 지원하지만 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.

    • 한 html 페이지 만으로 페이지가 동적으로 렌더링 되므로 페이지마다 meta 데이터 적용이 애매하다.

        → react 의 경우에는 react-helmet 이라는 라이브러리로 JSX안에 <Helmet> 태그를 적용해서 메타데이터의 동적

       적용을 할 수 있다.

 

 

---

SSR

   

SSR에서는 웹 브라우저가 서버에 페이지를 요청할 때마다 페이지에 관련된 html, css, js를 요청해서 렌더링 한다.

 

장점

• 초기 렌더링 속도가 빠르다

• JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다. 

    •페이지 마다 meta 데이터 적용이된 html이 불려와지므로 SEO가 원활하다.

 

단점

• 매번 페이지를 옮겨갈 때 마다 서버에 html, css, js등을 요청해야하므로 페이지가 새로고침 되어 렌더링이 된다.

• 서버에 매번 요청을 하므로 서버에 부하가 커진다.

 

 

---

참고

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md

baeharam/Must-Know-About-Frontend

byseop.netlify.app/csr-seo/

SPA에서 서버사이드 렌더링을 구축하지 않고 SEO 최적화하기 - BYSEOP's devlog