react ssr html streaming

[seonghyeonkimm]

• ssr html streaming
• suspense
• in the future, suspense for data fetching

[seonghyeonkimm]

• memo
• next.js의 edge runtime에 대한 학습..?
• streaming html 에서는 html이 suspense에 감싸져 있지 않으면 바로 html이 생성되어서 내려오고, suspense에 감싸져 있는 기준으로 추후에 완료가 되는 시점에 chunk별로 따로 같은 stream 안에서 download가 된다. react-query의 현재 useQuery suspense 모드를 사용하게 되면 서버에서는 fallback으로 시작해서 결국 완결된 결과가 내려올 텐데, 현재 react-query가 streaming html을 지원하지 않기 때문에 client는 따로 suspense fallback이 render되고 완전한 html을 로드하는 과정이 따로 진행된다. 그렇기 때문에 streaming html과 react-query의 client suspense가 따로 놀기 떄문에 hydration이 실패할 수 밖에 없다. nextjs 12.1.0에서는 문제없이 되었던 이유는 nextjs가 streaming html을 12.1.1에 도입했고, 그전에는 server에서 처음 만들었던 html이 client의 html과 일치했기 때문이다. 현재 hawk를 최신 버전의 react, next로 업데이트하기 위해서는 ssr suspense for data fetching이 정리가 되어야 한다. 혹은 suspense datafetching을 모두 걷어내야한다…

[seonghyeonkimm]

[streaming ssr keynote video] https://ko.reactjs.org/blog/2021/12/17/react-conf-2021-recap.html#streaming-server-rendering-with-suspense

[seonghyeonkimm]

[how to understand html streaming] https://www.patterns.dev/posts/ssr/ https://github.com/GoogleChromeLabs/progressive-rendering-frameworks-samples

[seonghyeonkimm]

[react-query suspense for data fetching with html streaming] https://github.com/tannerlinsley/react-query/discussions/3173 https://github.com/tannerlinsley/react-query/discussions/2942 https://github.com/reactwg/react-18/discussions/121#discussioncomment-2207678

[seonghyeonkimm]

ssr suspense는 공식적으로는 아직 React.lazy(nextjs dynamic), react server component에서만 작동한다. nextjs에서 runtime 옵션을 추가했는데, nodejs, edge runtime이 있다. 이 두개의 동작 차이가 있다. https://github.com/vercel/next.js/discussions/34179 nodejs runtime은 streaming + selective hydration이 잘 작동 안하는 느낌이고, edge runtime은 잘 작동하는 느낌..?