참고

SSR, SSG, JAM Stack이 뭔가요? (+ CSR, SEO, Next.js, Nuxt.js, Gatsby)

Angular, React, Vue가 뭔가요? (+ Single Page Application)

CSR : Client Side Rendering

SSR : Server Side Rendering

CSR

• React, Vue, Angular등이 기본적으로 CSR을 함

MVC 웹 프레임워크들이 등장, 발전

→ 편리하고 빠르게 웹사이트 개발 가능

기존 MVC 웹의 단점

1. 오래된 웹사이트일수록 사용자 경험 많음 → 사용자와 상호작용 할때마다 서버에서 리로드
   • 좋아요 하나만 누르더라도 서버에서 모든 작업을 다시 해서 브라우저에 전송해 비효율적
   • ajax 기술 등장 → http통신으로 데이터 전송하고 결과 받아와서 JS로 명령 가능
     하지만 일일히 프로그래밍해야하는 불편함 있음
2. 모바일 시대가 열리며 앱, 스마트폰 브라우저로 서비스 이용 증가
   • 웹, 모바일, 안드로이드, ios를 위해 일일히 만들어줘야 함

서버에서 데이터만 보내줘도 브라우저에서 렌더링 해낼 수 있다면, 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 됨.

➡SPA 프레임워크

1. 서버는 정적 웹처럼 HTML, CSS, JS로 된 코드를 브라우저에 전송

2. JS코드는 주어진 데이터에 따라 HTML 웹페이지를 랜더링

   → 기존 동적 웹의 서버가 하던 일을 사용자의 컴퓨터에서 브라우저가 해냄

3. 서버에서 데이터 받아와야할때마다 요청을 보내 반환된 데이터로 사이트 내용 갱신

   • 한번 로드된 화면에서 많은 기능 사용 가능

CSR의 단점

• 처음 화면 로딩되는 속도가 다소 느림 → 자바스크립트 코드를 통해 사용자의 브라우저에서 사이트 요소들을 렌더링하기 때문
  
• SEO : 구글이나 네이버 등의 검색엔진에서 검색되기가 어려울 수 있음
  

SSR

• SSR 자체는 오랫동안 쓰이던 개념
• CSR과 SSR의 장단점을 절충한 NEXT.js, NUXT.js 등 하이브리드 프레임워크들이 등장

Next.js 는 React에 SSR로 페이지 제공하는 기능을 추가한 것

• 사이트의 원하는 부분을 SSR로 제작 가능
• 페이지 접속 시 바로 나타나야 할 것들을 정해서, 서버에서 미리 렌더링해서 보내도록 짤 수 있음

→ 첫 화면은 빠르게 띄우고 그 이후로는 SPA처럼 빠르게 사용할 수 있는 웹앱 제작이 가능

SSG : Static site generator

• REACT 방식으로 로 CSR, SSR이아닌 정적웹사이트를 생성
• 사이트에서 접속하는 모든 페이지마다 정적 HTML이 이미 빌드한 시점에서 생성돼서 서버에 올라가 있음 → 정적 사이트처럼 완제품으로 배포
• Next, Nuxt, Hugo등 지원
• 블로그 같은 곳에서 많이 쓰임