[3팀 김준모] Chapter 4-1 성능최적화: SSR, SSG, Infra

[jumoooo]

과제 체크포인트

배포 링크

https://jumoooo.github.io/front_7th_chapter4-1/

기본과제 (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)

처음 window is not defined 에러를 만났을 때는 단순히 "서버에서 window를 쓰면 안 되는구나" 정도로만 이해했습니다. 하지만 실제로 문제를 해결하면서 깨달은 것은 클라이언트와 서버는 완전히 다른 환경이라는 점이었습니다.

SSG를 구현하면서 처음에는 "그냥 SSR을 빌드할 때 미리 실행하는 거 아니야?"라고 생각했습니다. 하지만 실제로 구현해보니 SSG는 빌드 시점의 데이터를 고정시키는 것이라는 점이 중요했습니다.
**"언제 데이터를 가져오는가?"**가 SSR과 SSG의 핵심 차이라는 것을 깨달았습니다. SSG는 빌드 타임에 모든 가능한 페이지를 미리 만들어두는 "스냅샷" 방식이라는 것이 명확해졌습니다.
사실 박혀있는 거라 데이터라고 하기에는 좀 이상하긴 힙니다.

자유롭게 회고하기

프로젝트를 시작할 때는 SSR과 SSG의 개념 자체가 추상적으로 느껴졌습니다. "서버에서 HTML을 만든다"는 것은 이해했지만, 실제로 어떻게 구현해야 하는지 감이 오지 않았습니다. 특히 클라이언트와 서버의 경계가 모호했습니다. "이 코드는 어디서 실행되는가?"를 매번 고민해야 했고, window 에러가 발생할 때마다 당황했습니다... 하지만 "서버에는 브라우저 API가 없다", "서버와 클라이언트는 다른 환경이다", "데이터는 명시적으로 전달해야 한다" 같은 원칙들이 명확해졌습니다.
특히 Vanilla JavaScript 버전을 먼저 구현한 것이 React 코드 작성에 큰 도움이 되었습니다.

마지막에 git 배포부분에서 해맸는데 어쩌다 보니 Agent 가 각 Vanilla, React 로 나눠서 들어 갈수 있게 나눠줘서 일단 그대로 제출합니다...

리뷰 받고 싶은 내용

• 질문 예시에도 나왔던 내용인데 현업에서 SSG 는 어느부분에서 사용하나요? 사용해보신 상황이 궁금합니다....