[react] ssr 프로젝트 만들기 (6) - stream으로 html 그리기, 추가 설명

https://github.com/insidedw/react-webpack5-ssr/commit/5319188111c0611aa64d04625ead88353616cf20

 

https://github.com/insidedw/react-webpack5-ssr/commit/27eb3afff0f9779fc5eccff4989aae8570a0c25d

---

 

stream으로 렌더링 하면 2가지 큰 이점이 있는데,

하나는 prefetch 응답을 기다리지 않고 fallback ui로 렌더링이 되어 유저에게 빠르게 페이지를 보여줄 수 있고

나머지 하나는 selective hydration이 되어 보여지는 영역에 대해 hydration이 되어 User Interaction이 가능하다.

 

첫번째,  구현하는 방법은 위의 커밋과 5번째 포스트를 확인 하면 된다.

ssr prefetch를 await 걸지 않아서 잘 동작하는 줄 알았는데 없어도 잘 동작 한다.그래서 삭제했다.

 

두번째, selective hydration을 적용하려면 `renderToPipeableStream` 에서 bootstrapScripts에 script 를 명시해주어야 한다. 이렇게 하면 prefetch가 적용되지 않아 csr에서도 api를 호출 한다. 그래서 prefetch를 챙기려면 selective hydration은 포기해야하는 상황이다.

 

react-query에서 가능한 방법을 알려주면 좋을거 같다. 너무 next.js 위주로 가이드가 제공되고 있어 가슴 아프다.

 

음... 상황을 다시 정리하자면,

prefetch가 되는 이유는

1. ssr 시 react node 읽을 때 useSuspenseQuery를 확인 후 API 호출. 

2. API 호출 하는 도중에 suspense fallback UI 노출

3. API 응답이 끝나면 query client에 API 응답값이 저장됨

4. query client를 dehydrate한 후 `window.__REACT_QUERY_STATE__` 에 데이터를 넣는다.

5. `__REACT_QUERY_STATE__ `값과 hydration에 필요한 script를 마지막 stream으로 보낸다.

6. 마지막에 script가 읽히니까 client-side query client가 서버에서 미리 API 호출 한 값을 읽어들여 API 중복호출을 하지 않는다.

7. 단 User Interaction은 최후에 가능하다.

 

selective hydration이 될 경우 prefetch가 의미가 없는 이유는

1. ssr 시 react node 읽을 때 useSuspenseQuery를 확인 후 API 호출.

2. API 호출 하는 도중에 suspense fallback UI 노출

3. script가 호출되어 client-side query client가 `__REACT_QUERY_STATE__ ` 를 읽는다. 

4. API 응답이 들어오기 전이기에 dehydrate 값은 빈 값이기에 CSR에서 API 를 호출한다.

5. prefetch API 응답이 끝나면 query client에 API 응답값이 저장됨

6. `__REACT_QUERY_STATE__ `값이 서버로부터 stream으로 읽혀서 업데이트 되었지만, 이미 client-side query client는 본임 임무를 마친 상태.