SSG & SSR & CSR

웹에서의 렌더링이란?

• HTML, CSS, JS 등 개발자가 작성한 문서들을 서버에서 응답받아 브라우저가 화면에 그려주는 동작

SSG(Static Site Generation)

• 변경되지 않는 웹 페이지의 최적화에 쓰임
• SSR처럼 서버로부터 완성된 HTML을 받아오지만, HTML 파일의 생성시점이 다름
• React에 내장된 동적페이지를 HTML로 제공하는 특정 사례를 제공하기 위해 존재
• React 앱을 HTML로 미리 렌더링

SSG의 장점

• SEO(검색엔진최적화) : 이미 생성된 HTML을 받기 때문에 SEO 친화적(크롤러가 페이지를 쉽게 인덱싱할 수 있음)
• 속도 : 브라우저가 사전에 많은 처리를 할 필요가 없기 때문에 최종 사용자에게 HTML 페이지를 제공하는 것이 훨씬 더 빠름. 사전 렌더링을 사용하면 브라우저에서 HTML을 가져와 바로 렌더링할 수 있음.
• CDN으로 캐싱 : 모든 요청은 서버가 페이지를 렌더링할 때까지 기다릴 필요가 없으며 CDN에서 페이지를 수신하기만 하면 컴퓨팅 리소스와 비용을 절약할 수 있음

SSG의 단점

• 모든 URL에 대해 개별 HTML 파일을 생성해야 함

SSR(Server Side Rendering)

• 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식
• 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

SSR 단계

1. User가 Website 요청을 보냄.
2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다.
   (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
4. 클라이언트가 자바스크립트를 다운받는다.
5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.

-> 서버에서 이미 '렌더 가능한 상태'로 클라이언트에 전달되기 때문에 JS가 다운로드 되는 시간에 사용자는 무언가를 보고 있을 수 있다.

SSR 장점

• SEO 최적화
• 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.

SSR 단점

• 클라이언트가 페이지를 이동한다든가, 클릭으로 인한 다른 요청이 생길때마다 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링 됨

CSR(Client Side Rendering)

• React 이후의 웹구조
• SPA에서 쓰이는 기법
• 클라이언트에서 화면을 구성
• 자바스크립트가 애플리케이션 구현에 핵심적인 역할

CSR 단계

1. User가 Website 요청을 보냄.

2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.

• CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식

3. 클라이언트는 HTML과 JS를 다운로드 받는다.
   (이때 SSR과 달리 유저는 아무것도 볼 수 없다)

4. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.
   (이때 유저들은 placeholder를 보게된다. )

5. 서버가 API로부터의 요청에 응답한다.

6. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.

CSR의 장점

• 초기 진입 속도가 느린 반면, 그 후론 필요한 데이터만 갱신하면 되기때문에 SSR방식에 비해 서버 부하가 덜하다는 장점

CSR의 단점

• 초기 진입속도가 SSR에 비해 느림 => code splitting이라는 기능으로 어느정도 해결 가능
• 초기에 html에 데이터가 없다보니 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO(Search Engine Optimization) 검색엔진 최적화에 취약(구글제외)

SSR의 단점 : 불필요한 부분까지 렌더링이 된다.
CSR의 단점 : 초기 진입 속도가 느리다. SEO에 취약하다.

두 문제를 해결한 Next.js

• Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결

• 그 다음 페이지부턴 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하도 줄이게 한 것

Next에서의 렌더링

1. SSG

• Next.js에서 getStaticProps함수를 통해 HTML 파일에 들어갈 데이터를 빌드 시점에 넣어줄 수 있다.

2. SSR

• Next.js에서 getServerSideProps함수를 통해서 HTML 파일을 클라이언트 요청에 따라 다르게 생성할 수 있다. 이 함수는 클라이언트가 해당 HTML을 요청했을 경우만 실행이 됨

Next.js의 대표적인 기능들

prerendering

• next.js에서 기본적으로 모든 페이지를 프리 렌더링 함
  - 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌.
  

아래는 React

next.js에서는 SSG와 SSR 형태의 프리 렌더링을 지원하고 있음. 성능상 SSG를 추천하고 있지만 각 페이지마다 어떤 종류를 택할지 선택할 수 있음.

hydration

• 최소한의 자바스크립트 코드를 사용해 HTML화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화

참고
| https://velog.io/@jodheeee/WEB-%EC%9B%B9-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%98-%EB%B0%A9%EC%8B%9DSSR-CSR-SSG

| https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/

| https://dev.to/anshuman_bhardwaj/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs-5cja

| https://higher77.tistory.com/105

| https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4

| https://velog.io/@acwell94/%EB%A0%8C%EB%8D%94%EB%A7%81SSR-SSG-CSR-Next.js-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%8A%B9%EC%A7%95