SSR, SSG, jamstack

SSR

Server Side Rendering으로 서버에서 HTML 구조로 응답하는 방식

CSR

Client Side Rendering (ex Angular, React, Vue) javascript로 동적 페이지를 출력

SPA

Single Page Application으로 한 페이지 내에서 모든 동작을 수행 ( CSR과는 다른 개념)

SEO (Search Engine Optimization)

검색 페이지 적합하게 만들어진 페이지, 크롤링을 통해 구조, 컨텐츠 파악해 목차와 색인을 만드어 사용자 검색의 결과물을 나타낸다.

Next.js, Nuxt.js

Next.js는 React, Nuxt.js는 Vue에 각각 두개의 장점을 가져오는 ssr로 페이지를 제공하는 기능들을 추가 즉( CSR을 통해 비 동기인 방식으로 요청했을 때, SSR의 장점인 html 구조로 응답하는 방식

Vue를 통해 만든 프로젝트를 요청했을 때, 처음에 div만 들어있는 페이지를 호출하고, 브라우저의 요청이 실행되었을 때, 링크된 자바스크립트 파일을 다운로드 뒤 데이터를 요청해서 서버에 받아온 데이터들을 클라이언트에서 모양을 생성해 출력한다. 이때 요청이나 로직이 많은 경우라면 시작 시에 딜레이가 발생한다.

허나 Next.js나 Nuxt.js를 사용하면 기존에 노출시키고 싶은 페이지와 데이터를 mounted()를 통해 먼저 렌더링 한 후, fetch 코드를 사용하여 변화되는 데이터를 API 서버에 요청해 받아오는 것이다. node js가 깔린 서버에서 프로젝트를 어플리케이션으로 실행해 프론트를 배포한다. 즉, 페이지에서 접속시 바로 출력할 내용을 서버에 미리 렌더링 해 출력한다.

또한 mounted를 통해 먼저 렌더링했을 경우 SEO에 잡힐 수 있기 때문에 검색결과에 노출 비중이 높다.

SSG

Static Site Generator, 정적 사이트 생성기, -> 렌더링을 다 마친 정적 파일들을 배포,
정적인 사이트를 만들 때엔 json, yaml, xml등의 view 파일에 저장하고 build 시 html 태그 구조에 맞게 수정한 html 파일을 서버에 저장시켜 놓는다. (Next, Hugo, Gatsby)

Jam Stack

Javascript API Markup + Stack 으로 웹서비스 만드는 설계 방식,
pre-landering, decoupling

자바 스크립트를 사용한 Jam으로 페이지를 Pre 렌더링 후 외부 API 서비스로 아웃소싱해서 설계 분리(decoupling)
이렇게 만든 정적 페이지를 CDN으로 배포하는 방식이다. 이걸 통해 비용절감, 보안강화, 사이트 확장에 용이하다.