CSR | SSR | SSG

CSR(Client-Side-Rendering)

클라이언트(브라우저)에서 페이지를 렌더링하는 방식으로 SPA(react,vue)에서 쓰이는 기법.
서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 렌더링을 시작함

특징

• CSR은 HTML,CSS,JS 파일을 한번에 모두 다운로드한 뒤 뷰가 구성됨으로 초기 로딩 시간이 길다.
• 그 대신 첫 페이지 로딩 후 사이트의 다른 페이지로 이동할 땐 SSR보다 빠르다.
• 초기에 HTML에 데이터가 없다 보니 검색엔진이 해당 페이지를 빈 페이지로 인식하여 SEO에 취약하다.

SSR(Server-Side-Rendering)

서버에서 뷰 구성에 필요한 전체 HTML을 요청받은 즉시 생성해서 클라이언트로 전달.
(클라이언트 브라우저에서 응답을 받을 때 이미 완성된 뷰를 보이게 됨)

특징

• 초기 로딩 시간은 비교적 짧지만, 페이지 이동 시 서버에서 렌더링 해주는 새로운 파일을 받기 때문에 페이지 전환 간에 깜빡임 현상이 존재한다.
• 완성된 HTML을 서버에서 보내주므로 SEO에 적합하다.

SSG(Static-Site-Generation)

SSG는 프로젝트 빌드 시 페이지를 사전렌더링(Pre-rendering)하는 방식으로 NextJS, Gatsby, NuxtJs에서 제공

특징

• 초기화면 렌더링 속도가 빠르다
• SEO에 적합하다.
• 모든 페이지를 정적 파일로 만들어 주는 것은 불가능하므로 주로 블로그, 정보성 페이지등 정적인 데이터를 보여주는 사이트에 적합하다.