[5팀 손승현] Chapter 4-1 성능최적화: SSR, SSG, Infra

[sonsonsh1125]

과제 체크포인트

배포 링크

기본과제 (Vanilla SSR & SSG)

Express SSR 서버

• Express 미들웨어 기반 서버 구현
• 개발/프로덕션 환경 분기 처리
• HTML 템플릿 치환 (<!--app-html-->, <!--app-head-->)

서버 사이드 렌더링

• 서버에서 동작하는 Router 구현
• 서버 데이터 프리페칭 (상품 목록, 상품 상세)
• 서버 상태관리 초기화

클라이언트 Hydration

• window.__INITIAL_DATA__ 스크립트 주입
• 클라이언트 상태 복원
• 서버-클라이언트 데이터 일치

Static Site Generation

• 동적 라우트 SSG (상품 상세 페이지들)
• 빌드 타임 페이지 생성
• 파일 시스템 기반 배포

심화과제 (React SSR & SSG)

React SSR

• renderToString 서버 렌더링
• TypeScript SSR 모듈 빌드
• Universal React Router (서버/클라이언트 분기)
• React 상태관리 서버 초기화

React Hydration

• Hydration 불일치 방지
• 클라이언트 상태 복원

Static Site Generation

• 동적 라우트 SSG (상품 상세 페이지들)
• 빌드 타임 페이지 생성
• 파일 시스템 기반 배포

아하! 모먼트 (A-ha! Moment)

자유롭게 회고하기

리뷰 받고 싶은 내용

데일리회고(251216)

express가 뭔가요?

1. Express는 Node.js에서 서버를 만드는 프레임 워크이다.
2. 복잡한 설정없이 서버를 만들 수 있고 미들웨어가 편하다.
3. "서버를 만드는" 것이 뭔데? → 항상 켜져 있으면서 요청을 받아주는 컴퓨터. Express로 서버를 만드는 것은 마치 내 컴퓨터를 카카오의 서버처럼 동작하게 만드는 것이다.
4. 미들웨어가 뭔데? → 요청이 들어왔을 때 처리하는 과정을 단계별로 나누는 것. 미들웨어1이 모든 요청이 들어오면 먼저 실행, 미들웨어2는 그다음 실행, 미들웨어3은 마지막 단계를 처리하며 작동한다. 파이프라인처럼 요청이 흘러가면서 각 단계에서 필요한 작업을 하는것.

Express의 원리

1. Express 앱을 만든다
2. Express의 포트를 열어놓고 기다린다..
3. 요청이 들어오면 Express가 감지한다.
4. 미들웨어/라우트를 찾는다 → 이건 get 요청이니까 app.get() 블록을 실행하자!
5. 콜백 함수 실행
6. 응답을 보낸다
7. 클라이언트가 받는다 → 브라우저에 표시된다

데이터 프리패칭이 뭔가요?

1. 프리패칭이 없을 때(CSR)

브라우저에 빈 페이지 표시
   ↓
자바스크립트 실행
   ↓
"데이터를 달라!"고 서버에 요청
   ↓
서버에서 데이터 받음 (시간 걸림)
   ↓
화면에 데이터 표시

2. 프리패칭이 있을때 (SSR)

서버에서 데이터 먼저 가져오기
   ↓
데이터를 HTML에 넣기
   ↓
완성된 HTML을 브라우저에 보내기
   ↓
브라우저는 바로 데이터가 있는 페이지 표시