SSR (Server Side Rendering)

SSR

서버 사이드가 App을 렌더링 하는 것

서버 사이드가 App을 렌더링 하는 것

• 동작 과정 : 클라이언트에서 페이지 요청 -> 서버에서 요청을 처리 -> 서버의 템플릿 엔진에서 HTML 렌더링 -> 렌더링된 HTML 응답 -> 클라이언트에서 받은 HTML 로 페이지 렌더링

• 장점

  검색 엔진 최적화 : HTML 을 제공하기 때문에 검색 엔진 크롤러 봇이 데이터를 읽을 수 있음

  초기 렌더링 빠름 : JS 를 통한 별도의 렌더링 없이 브라우저는 응답 값인 HTML 을 바로 렌더링하기 떄문에 초기 렌더링이 빠름

• 단점

  페이지 이동 시 화면을 로드해야 하기 떄문에 깜빡임

  페이지 이동시 마다 서버에 페이지를 요청하므로 불필요한 요청이 많음

  서버가 렌더링까지 하므로 부하가 걸림

  모바일 앱 개발시 추가적인 작업 필요

• SPA 프레임워크, 라이브러리 의 등장 전

  템플릿 엔진을 통한 SSR 이 웹 패러다임

  서버의 통신이 필요없는 경우에만 Vanilla JS 나 Jquery 를 사용해 부분 렌더링 함

• SPA 프레임워크, 라이브러리 의 등장

  CSR 에게 웹 렌더링의 패러다임을 빼앗기게 됨

  하지만 CSR 의 단점을 보완하기 위해 다시 등장해서 혼합해서 사용됨