지난번 메타(Meta) 태그와 OG(Open Graph)에 이어서 SSR(Server Side Rendering)도 함께 간단히 정리해 보고자 한다.
SSR과 CSR의 차이점
SSR이란?
서버 사이드 렌더링(SSR)이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다. 처음 클라이언트가 접속했을때 브라우저에서 자바스크립트 코드를 다운로드 받아 해석 할 때까지 기다리지 않고 서버에서 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식이다.
CSR이란?
클라이언트 사이드 렌더링(CSR)이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식으로 간단히 말하자면 Vue 나 React와 같은 SPA(Single Page Application)가 CSR방식으로 동작되어 진다.
클라이언트 사이드 렌더링(CSR)은 페이지의 내용을 브라우저에서 랜더링
서버 사이드 렌더링(SSR)은 서버에서 페이지의 내용을 미리 준비하여 브라우저로 랜더링
SSR을 사용하는 이유
서버 사이드 렌더링(SSR) 쓰는 이유는 크게 두가지로 "검색 엔진 최적화"와 "빠른 페이지 렌더링"이다.
지난번 정리한 내용에서와 같은 오픈 그래프(Open Graph)를 사용하여 검색 엔진 최적화를 하기 위해서는 SSR이 효율적이다. (Vue에서는 Nuxt.js를 사용)
또한 SSR은 서버에서 페이지를 미리 준비하여 브라우저로 보내기때문에 클라이언트 입장에서는 CSR더 빠르게 페이지를 확인 할 수가 있다.
SSR사용시 유의할 점
장점만 생각하여 무작정 서버 사이드 렌더링(SSR)방식을 사용하기에는 유의할 사항이 있다.
우선 기본적으로 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하며 Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야할 점이 있다.
마치며
다음번 작업때 기회가 된다면 Next.js도 배워서 지난번때 적용하지 못한 오픈 그래프(Open Graph)를 꼭 한번 적용해 봐야겠다. 앞으로 배워나가야 할 것들이 한두가지가 아닌듯🤔
