From 668460289915d50a3893c66663b328d7f41c233f Mon Sep 17 00:00:00 2001 From: Jiyeon Baek <58380158+100Gyeon@users.noreply.github.com> Date: Mon, 2 Dec 2024 00:29:35 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20=EB=82=B4=EC=9A=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\261\354\247\200\354\227\260.md" | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git "a/\354\261\225\355\204\260_13/\353\260\261\354\247\200\354\227\260.md" "b/\354\261\225\355\204\260_13/\353\260\261\354\247\200\354\227\260.md" index 02c86cc..7ad9d9b 100644 --- "a/\354\261\225\355\204\260_13/\353\260\261\354\247\200\354\227\260.md" +++ "b/\354\261\225\355\204\260_13/\353\260\261\354\247\200\354\227\260.md" @@ -50,7 +50,7 @@ HTML을 서버에서 렌더링하고 클라이언트에서 다시 하이드레 웹사이트의 UI를 Skeleton 컴포넌트와 함께 정적으로 렌더링 동적 목록 데이터를 배치할 위치를 미리 지정 -페이지가 로드된 후 SWR`/`Tanstack Query를 사용해 데이터를 가져옴 +페이지가 로드된 후 SWR/Tanstack Query를 사용해 데이터를 가져옴 ### 점진적 정적 생성(ISR) @@ -81,6 +81,9 @@ SSR이나 정적 렌더링을 사용하는 것보다 **TTI, FCP 단축 가능** 리액트에 내장된 `renderToNodeStream` 함수를 사용하면 애플리케이션을 작은 조각으로 나눠서 전송 가능 클라이언트는 **데이터를 받는 동시에 UI를 그리기 시작**할 수 있어 **매우 빠른 초기 로딩 경험 제공** 이렇게 수신된 DOM 노드에 `hydrate` 메서드를 호출하면, 이벤트 핸들러가 연결되어 상호작용 가능 + +> 당근 테크 밋업에서 스트리밍 SSR을 다룬 [세션](https://youtu.be/4UD4EB00AME?si=Z4GeG2fkOuv0obqB&t=905)이 있었어요👍 +> 제가 정리한 [글](https://blog.100jiyeon.xyz/posts/daangn-tech-meetup-2024#%EC%A7%81%EC%A0%91-%EA%B5%AC%EC%B6%95%ED%95%9C-ssr-webapp)과 같이 공유해 봅니다 ## 엣지 SSR