Create 상범.md

챕터_13/상범.md

@@ -0,0 +1,58 @@
+# 챕터 13 렌더링 패턴
+
+## 핵심 웹 지표
+- TTFB: 클라이언트가 페이지 콘텐츠의 첫번째 바이트를 받는데 걸리는 시간
+- FCP: 페이지 이동 후 브라우저가 콘텐츠의 첫 부분을 렌더링하는데 걸리는 시간
+- LCP: 페이지의 주요 콘텐츠를 로드하고 렌더링하는데 걸리는 시간
+- TTI: 페이지 로드 시작부터 사용자 입력에 빠르게 응답할 수 있을 때 까지 걸리는 시간
+- CLS: 레이아웃 변경 방지 위한 시각적 안정성 측정
+- FID: 사용자가 페이지와 상호작용한 시점부터 이벤트 핸들러가 실행될 수 있는 시점까지의 시간
+
+## 클라이언트 사이드 렌더링(CSR)
+- 모든 UI가 클라이언트에서 생성됨, 전체 웹 어플리케이션이 처음 요청 시에 모두 로드 됨
+- SPA 구축할 수 있게 함
+
+### 단점
+- 초기 큰 자바스크립트 번들을 만들도록 해서 페이지의 FCP, TTI 증가 시킴
+
+## 서버 사이드 렌더링(SSR)
+- HTML을 서버에서 렌더링하고 클라이언트에서 다시 하이드레이션 함
+
+## 정적 렌더링(Static Rendering)
+- 전체 페이지의 HTML을 빌드 시점에 미리 생성함
+
+## 점진적 정적 생성(ISR)
+- 정적 렌더링 + stale-while-revalidate 전략을 사용한 캐시 재검증
+
+## 스트리밍 SSR
+
+> SSR 할 때 데이터 패칭 때문에 TTFB가 오래 걸림   
+> => 리액트는 서버에서 renderToString 메서드 사용하는데 동기 메서드라 메인 스레드 점유 하니까 데이터 패칭할때까지는 화면에 아무것도 보여줄 수가 없네;   
+> => 이를 위해 비동기 처리 메서드 등장 (renderToPipableStream)
+> 
+> next.js app router 사용하면 streaming ssr이 기본 적용!  
+> 
+> 데이터 패칭하는 컴포넌트를 Suspense로 감싸면 그 영역 바깥이 먼저 pre-rendering 되고 데이터 패칭과 렌더링을 번갈아가면서 청크 단위로 html에 내려보내줌
+
+streaming ssr 공부할 때 좋았던 레퍼런스
+> [SSR의 기쁨과 슬픔: 렌더링의 변화의 흐름을 통해 알아보는 SSR과 Streaming SSR | 인프콘2023](https://www.youtube.com/watch?v=hPyyFu3lrEg&t=2080s)   
+> [[Dev Dive_ Frontend Day] 스트리밍 SSR 딥 다이브](https://www.youtube.com/watch?v=9xl9X2pfHeI&t=1835s)
+
+## 엣지 렌더링
+
+> edge function은 최소한의 런타임 환경에서 동작하기 때문에 라이브러리 거의 못씀. e.g) axios, 라이브러리 내에서 사용한 web api가 edge function에서 지원하지않는 api라면 사용 불가   
+> 왜? serverless function(e.g lambda)의 한계점인 콜드 스타트를 해결하기 위해 아예 지원하는 api를 줄여버림    
+> 여담으로 콜드 스타트를 완화하기 위한 방법들이 많긴 함. 하지만 여전히 엣지 렌더링은 좋음
+
+### 내가 생각하는 장점
+- 사용자와 가까운 곳에서 코드 실행
+- 실 서버까지 왕복 안함
+- 일정하고 짧은 반응 시간 가능
+
+### 내가 생각하는 단점
+- 공짜겠음? ㅋㅋ 
+
+## 하이브리드 렌더링
+- next.js app router 환경에서 페이지마다 ISR, SSR, CSR 등 하이브리드 렌더링이 가능
+
+