From 004b1472e46ea2256efe0808ff19de2441695e9c Mon Sep 17 00:00:00 2001 From: SangBeom Park Date: Tue, 3 Dec 2024 00:50:28 +0900 Subject: [PATCH] =?UTF-8?q?Create=20=EC=83=81=EB=B2=94.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\203\201\353\262\224.md" | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 "\354\261\225\355\204\260_13/\354\203\201\353\262\224.md" diff --git "a/\354\261\225\355\204\260_13/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_13/\354\203\201\353\262\224.md" new file mode 100644 index 0000000..118fda8 --- /dev/null +++ "b/\354\261\225\355\204\260_13/\354\203\201\353\262\224.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 등 하이브리드 렌더링이 가능 + +