1. 서버 사이드 렌더링이란

1) 싱글 페이지 애플리케이션의 세상

(1) 싱글 페이지 애플리케이션이란

• Singe Page Application

• 최초의 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 js와 브라우저의 history.pushState와 history.replaceState로 이뤄진다

• 페이지를 불러온 이후에는 서버에서 html을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고 한다

• body 태그 내부에 아무런 내용이 없다. 사이트 렌더링에 필요한 body 내부의 내용ㅇ르 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 때문

• 페이지 전환 시에도 새로운 html 페이지를 요청하는 게 아니라 자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 http 요청 등으로 가져온 다음 그 결과를 바탕으로 body 태그 내부에 DOM을 추가/수정/삭제하는 방법으로 페이지가 전환된다

• 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 api를 기반으로 모든 작동이 이뤄진다

• 최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점

• 한번 로딩 후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 UI/UX 강화

(2) 전통적인 방식의 애플리케이션 vs 싱글 페이지의 애플리케이션

ex. 네이버 vs gmail

(3) 싱글 페이지 렌더링 방식의 유행과 JAM 스택의 등장

2) 서버 사이드 렌더링이란?

장점
최초 페이지 진입이 비교적 빠르다
검색 엔진과 SNS 공유 등 메타데이터 제공이 쉽다
누적 레이아웃 이동이 적다
사용자의 디바이스 성능에 비교적 자유롭다
보안에 좀 더 안전하다

단점
소스코드를 작성할 때 항상 서버를 고려해야 한다
적절한 서버가 구축돼 있어야 한다
서비스 지연에 따른 문제

3) SPA와 SSP을 모두 알아야 하는 이유

서버 사이드 렌더링 역시 만능이 아니다
싱글 페이지 애플리케이션과 서버 사이드 렌더링 애플리케이션
현대의 서버 사이드 렌더링

4) 정리

2. 서버 사이드 렌더링을 위한 리액트 API 살펴보기

1) renderToString

2) renderToStaticMarkup

3) renderToNodeStream

4) renderToStaticNodeStream

5) hydrate

6) 서버 사이드 렌더링 예제 프로젝트

7) 정리

3. Next.js 톺아보기

1) Next.jsf란

2) Next.js 시작하기

3) Data Fetching

4) 스타일 적용하기

5) _app.tsx 응용하기

6) next.config.js 살펴보기

7) 정리