SSR
SSR은 server side rendering의 줄임말입니다. 웹 브라우저에서 서버에 request를 하면 서버에서 렌더링을 한 후 완성된 페이지를 웹 브라우저에게 보내줍니다. 웹 브라우저는 완성된 페이지를 바탕으로 화면을 구성합니다. 만약 화면 구성에 데이터가 필요하다면 서버에서 렌더링을 할 때 데이터베이스에 데이터를 요청해 데이터를 포함시킵니다.
CSR
CSR은 clinet side rendering의 줄임말입니다. 웹 브라우저에서 서버에 request를 하면 서버는 기본 골격의 html파일과 js파일을 보내줍니다. 웹 브라우저는 기본 골격 html파일과 js파일을 사용해 rendering을 하여 페이지를 완성시켜 화면을 구성합니다. 만약 화면 구성에 데이터가 필요하다면 웹 브라우저에서 API서버로 API요청을 하여 데이터를 받아 화면을 구성합니다.
SSR VS CSR
첫 화면 로딩 속도
SSR이 CSR보다 빠릅니다.
첫 화면 로딩 이후 이벤트 반응 속도 및 사용자 경험
CSR이 더 좋습니다. CSR에서는 브라우저에서 변경이 필요한 화면만을 새로 랜더링 합니다. 하지만 SSR에서는 변경이 필요한 화면만이 아니라 기존의 화면까지 서버측에서 렌더링되어 온 것을 다시 다운로드 하여 화면을 구성합니다. 속도가 느려질뿐더러 화면이 깜빡이는 현상까지 있습니다.
검색 엔진 최적화(SEO)
SSR이 더 좋습니다.
