rendering server가 fetch를 하는 기존 방식의 문제점
- top-level component of the tree에서만 가능하여 props drilling이 발생한다 => 코드 퀄리티가 떨어진다.
- 표준화된 방식이 없었다.
- 모든 HTML이 hydrated 되어야만했다(쓸데없는 컴포넌트들도 bundle에 포함되어 bundle size가 올라갔다.)
요구사항
- rendering server에서 직접 fetch를 할 수 있어야 한다. (WEB CORE VITALS: LCP ISSUE)
- top level 컴포넌트가 아닌 하위 컴포넌트에서도 fetch를 할 수 있어야 한다. (DX ISSUE)
- 번들에 hydration이 필요 없는 부분을 보내지 않는다. (TTI Issue)
해결책 서버에서 fetch를 할 수 있는 Server Component를 만들자!
질문 어떻게 Server Component 결과를 클라이언트에 전달할 수 있는가? 그냥 줘버리면, transpiling, bundling, minifing을 해버린다 => RSC Payload와 Server Component가 나왔다 => 그런데
NO Hydration => No states, NO event handlers just rednered result Cannget get the client rendered results anyway => client components shouldn't be the parent of Server Components, but render client components by using childrun is fine
Streamlining data => RSC Payload
서버 > 클라이언트 => OK 클라이언트 > 서버 => NOT OK 서버 > 서버 => OK
따라서 render 되는
- rendering route에서 동일한 get method fetch에 대하여 memoization
- fetch response를 cache
- build time/revalidation시에 RSC Payload와 HTML을 cache
개삽질을 통해 얻은 결과
expect()를 해서 페이지가 로드된 뒤에 iframe element가 렌더링될 때까지 기다려줄 수 있다.(30s) iframe을 통해서 생성되는 새로운 frame의 document를 expect를 통하여 한번 더 기다려줘야 한다.