[CS] SPA & CSR, SSR, SSG

• SPA ( Single Page Application )

  Client는 index.html 하나의 페이지에 접속하고, 필요한 데이터만 부분적으로 업데이트하여 화면을 보여주는 방식

• CSR ( Client Side Rendering )

  HTML 페이지에는 ID Route와 javascript의 link만 담겨져 있고, 이 정보를 통해 서버로 요청하여 javascript 파일을 받아와 화면에 보여준다.

  때문에 첫 화면의 로딩이 오래걸리고, HTML 페이지 내 내용이 적다보니 SEO ( Search Engine Optimization )가 비효율적이다.

  첫 화면의 로딩을 줄이기 위해 전송하는 javascript 파일의 최적화가 중요하다.

  사용자가 웹 페이지를 보게 되는 시점 ( TTV, Time To View )과 웹 페이지를 인터랙션 할 수 있는 시점 ( TTI, Time To Interact )이 같다.

  CSR에 특화된 프레임워크로 React, Vue, Angular 등이 있다.

• SSR ( Server Side Rendering )

  서버에서 HTML파일을 생성하여 제어를 위한 javascript 파일과 함께 client로 제공한다.

  때문에 첫 페이지의 로딩이 빠르고 SEO가 효율적이다. 다만 전체 페이지를 서버에서 매번 받아오기때문에 블링크가 있을 수 있고, 서버에 부하가 있을 수 있다. 또한 HTML과 JS의 다운로드 속도 차이로 인해 화면은 표시되나 인터랙션이 작동하지 않을 수 있다.

  즉, TTV와 TTI가 다르다.

• SSG ( Static Site Generation )

  서버에서 HTML 파일을 생성하여 클라이언트 측으로 제공한다는 점은 SSR과 같으나, SSR은 요청 시 마다 HTML문서를 생성하나 SSG는 빌드 타임에 각 페이지를 생성하고 요청이 올 때는 이미 생성된 HTML 파일을 전달한다.

출처

• https://www.youtube.com/watch?v=iZ9csAfU5Os&t=505s