[7팀 이현지] Chapter 4-1 성능최적화: SSR, SSG, Infra

[Leehyunji0715]

과제 체크포인트

배포 링크

(없습니당..!ㅠㅠ)

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

• 라우팅이라는것도 서버에도 필요하다는 것? 처음 알았습니다! 생각해보니 맨 처음 URL을 입력해서 서버에게 요청할때 그 경로를 읽고 적절한 페이지/데이터를 리턴해줘야 했네요..! 이번 발제를 통해 SSR 개념이 좀 더 명확하게 잡힌것 같습니다.
• Hydration에 대해서도 좀더 명확히 잡혔습니다. 개념상 Client의 동작을 하기위해 Hydration 과정이 필요하다. 정도로 이해했는데 <script src='main.js'> 를 통해 클라이언트 소스를 가져온 다는 것. 그리고, Client에서 이벤트 등록이라던지, window.__INITIAL_DATA__로 서버상 데이터를 넘겨주는 작업이라던지 직접 해보면서 Hydration에 대한 개념이 더 잡힌 것 같아요 (물론 더 공부해야겠지만!)
• 서버 컴포넌트와 클라이언트 컴포넌트 차이. 그리고 서버와 클라이언트 모두에게 동작할 수 있는 공통 컴포넌트? MVVM의 명확한 분리의 중요성. (컴포넌트 재사용을 위해서 props로 적절히 모델 데이터를 받아 뿌리는 것. 이로 인해 FSD구조 때 배운것처럼 비즈니스로직을 처리하거나, 혹은 데이터를 UI상 보여주는 등 역할 따라 컴포넌트를 명확히 분리하는것이 참 중요하겠다 생각했습니다!!)

자유롭게 회고하기

이번주는 개인 사정으로 인해 과제에 시간을 많이 투자하지 못했는데요ㅠㅠ, 정말 심도있고 많은 것을 공부할 수 있는 과제였다고 생각합니다!
시간 내어서 제가 하지 못했던 부분들을 보충해나가면 좋겠다고 생각했어요!!

리뷰 받고 싶은 내용