[Dev Dive_ Frontend Day] 스트리밍 SSR 딥 다이브

학습의 기초가 된 영상

풍물 커뮤니티 프로젝트에 tanstack/react-query를 적용하여 컴포넌트의 훅을 구성하던 도중 useSuspenseQuery를 통해서 suspend상태를 만들 수 있지만, mutate일때는 불가능 하다는 사실을 알았고, 홈화면에서 근처의 번개정보를 불러올 때, 서버에 나의 위치 정보가 있다면 정상적으로 불러올 수 있지만, 그렇지 않으면 에러가 나는 API구성이었기에 무조건 적으로 server에 mutate후 useEffect를 통해서 처리 해주어야 하는 굉장히 복잡한 구성의 컴포넌트 훅으로 처리를 하고 있었다.

조금 더 명확한 스타일의 해결방법을 찾아 여러 컨퍼런스 자료들을 찾아보던 중 해당 컨퍼런스 영상을 통해 스트리밍 SSR구축은 아니지만, 클라이언트 사이드에서도 조금 더 유연하게 suspend를 반환해서 Suspense 컴포넌트를 fallback 처리하는 동작을 구현할 수 있겠다는 생각을 하였다.

use훅에 대한 학습

공식문서

use – React

use(resource)

컴포넌트에서 Promise나 Context와 같은 데이터를 참조하려면 use를 사용하세요.

다른 React Hook과 달리 use는 if와 같은 조건문과 반복문 내부에서 호출할 수 있습니다. 다만, 다른 React Hook과 같이 use는 컴포넌트 또는 Hook에서만 호출해야 합니다.

• use API는 컴포넌트나 Hook 내부에서 호출되어야 합니다.
• 서버 컴포넌트에서 데이터를 가져올 때는 use보다 async 및 await을 사용합니다. async 및 await은 await이 호출된 시점부터 렌더링을 시작하는 반면, use는 데이터가 리졸브된 후 컴포넌트를 리렌더링합니다.
• 클라이언트 컴포넌트에서 Promise를 생성하는 것보다 서버 컴포넌트에서 Promise를 생성하여 클라이언트 컴포넌트에 전달하는 것이 좋습니다. 클라이언트 컴포넌트에서 생성된 Promise는 렌더링할 때마다 다시 생성됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 Promise는 리렌더링 전반에 걸쳐 안정적입니다.

실제 구현: 조건부 Suspense를 통한 위치 정보 최적화