https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
JavaScript 심화
3. Static Site Generators (SSG)
🔎 Single Page Application (SPA)
SPA는 단일 웹페이지로 구성된 웹 어플리케이션을 말한다. 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고, 이후 새로운 페이지 요청이 있을 때 갱신에 필요한 데이터만 전달받아 페이지를 재구성한다. 클라이언트 관점에서 최초 페이지를 로딩한 이후 리로딩 없이 필요한 부분만 서버로 받아 화면을 갱신하기 때문에 자연스러운 페이지 이동(새로고침 시 화면 깜빡임 X)과 사용자 경험을 제공할 수 있다.
.
🔎 Multi Page Application (MPA)
MPA는 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운로드 하는 전통적인 방식의 웹 어플리케이션을 말한다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
.
🔎 Client Side Rendering (CSR)
CSR은 클라이언트 측에서 렌더링하는 방식을 말한다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석해서 렌더링하는 방식.
장점
- JS 를 최대한도로 활용하여 HTML, CSS를 동적으로 생성할 수 있다.
- 컴포넌트 단위로 코드를 나누고 다양한 디자인 패턴을 적용하는 등, 클라이언트 개발의 수준을 한 단계 끌어올릴 수 있다.
- Full page load 없이 라우팅이 가능하다. : js를 사용해서 동적으로 돔을 그리기 때문에 원하는 내용만 업데이트 할 수 있다.
단점
- SEO(검색 엔진 최적화)에 취약하다. : html파일을 하나만 받아와서 작동하기 때문에 각각 페이지들에 대한 정보를 담기 힘들다.
- 첫 로드 시 모든 로직이 담겨있는 JS를 다운로드 하다보니 첫 진입 시 로딩 속도가 길다.
.
🔎 Static Sit Generation (SSG)
SSG는 클라이언트에서 필요한 페이지들을 사전에 미리 준비해두고 요청을 받으면 이미 완성된 파일을 반환하여 보여지는 웹 어플리케이션.
장점
- DB 나 서버 측 프로세스가 거의 필요하지 않은 완전히 정적인 페이지를 생성할 수 있다
- 가장 빠른 방식의 웹 어플리케이션이다.
- SEO(검색 엔진 최적화)에 유리하다.
단점
- 컨텐츠를 편집하고 올리는 것이 어렵다.
- 컨텐츠를 업데이트 하려면 사이트를 다시 빌드하고 테스트한 후 최종적으로 배포해야 한다.
- 대규모 웹 사이트의 경우 빌드가 오래 걸리고, 관리도 매우 번거롭다.
Gatsby
React 기반의 SSG 프레임워크. 배포와 동시에 정적페이지를 만들기 때문에 앱서버가 필요없다. Data Sources 라 불리우는 곳에서 웹 어플리케이션에 필요한 데이터를 GraphQL을 사용하여 가져와 React를 이용해서 웹사이트를 만들어 낸다. 이 후 만들어진 정적 페이지를 배포파일에 포함시켜 배포하게 된다.
참조
https://velog.io/@ka0son/렌더링-삼형제-CSR-SSR-SSG-이해하기
https://www.youdad.kr/frontend-rendering-ssg-isg-ssr-csr/
