Module Federation with SSR 은 어떻게 동작할까?

내가 사용중엔 module-federation/nextjs 플러그인에는 SSR 을 지원해주는 기능이 있다.
그렇다면 대체 브라우저에서 동적 로딩 되는 MF 가 SSR을 지원해준다는건 어떤 뜻인걸까?
- 케이스1 : 리모트앱은 서버사이드 렌더링을 하지 않지만, 호스트앱에 SSR 을 하고있고, 따라서 호스트앱에서 SSR 할 HTML 에 리모트앱의 HTML 도 포함시키고 싶은 경우
- 케이스2: 리모트앱도 서버사이드 렌더링을 하고 있는 경우
- 케이스3 : 리모트앱만 SSR을 하고 호스트앱은 SSR 을 안하는 경우 (흔치않을듯)

케이스1의 경우 리모트앱에서 필요한 데이터가 SEO를 향상시킬 수 있고, 또한 리모트앱의 초기 로딩시간을 줄일 수 있다는게 장점일 것 같은데,
이렇게 되면 대체 호스트앱의 서버에서 브라우저 런타임에 '동적으로 로드'되는 리모트앱을 알 수 있는걸까?

아래 설정에서 client 가 클라이언트사이드에서 MF 리모트앱 설정을 해주는거고,
server 가 서버사이드에서 MF 리모트앱 설정을 해주는거다.

대부분 동일한데 차이점은library설정과, StreamingTargetPlugin설정이 추가되었다는 것이다.
library: { type: 'commonjs-module' }은 Node.js 환경에서 사용가능한 CommonJS 모듈로 번들링해주는 필드이고
StreamingTargetPlugin 은 스트리밍 SSR 을 지원하기 위한 플러그인이다.
- 즉 이를 통해서, 서버에서 렌더링된 컨텐츠를 점진적으로 클라이언트에 스트리밍가능하다.
- 하나의 호스트앱이 있고, 호스트앱 내에서 여러개의 리모트앱을 서버사이드에서 로드해야한다고 할 때 가장 큰 단점은 아마도 초기 서버 구동시간이 오래걸릴 수 있어서, 초기 로딩시간이 늘어난다는 것일 텐데, 스트리밍 SSR (+Suspense) 을 추가해놓음으로써, 해당 문제를 어느정도 해소할 수 있을것 같다. (다만 그래도 서버측에 부담이 커지는건 동일하긴하다.)
그럼 서버사이드 렌더링 로직에 추가적인 설정같은게 필요할까?
- 당연! 서버측 코드에서 리모트앱을 로드하고, 뿌려줄 html 코드에 리모트앱을 전달해줘야한다.

code 1.png

케이스 2를 구현한다고하면..

즉 리모트앱이 자체적으로 SSR 을 수행하고,
호스트앱은 리모트앱에서 이미 렌더링된 HTML 을 가져와 사용하는 것임
즉, 리모트앱은 자체 서버를 가지고 있고 /ssr-component라는 엔드포인트로 SSR 된 html 을 호스트앱에 제공함.
리모트앱은 여기서 독립적으로 SSR 을 수행하고 SSR 수행결과를 호스트앱에 넘기는 것임
즉 리모트앱에서 ssr 된 컴포넌트를 가져오려면 호스트앱의 서버측 설정도 필요함 (정적인 결과물이 아니므로 서버에서 요청하는 수 밖에 없음)
- 그럼 remoteEntry.js와 같은 정적파일 빌드 필요없겠네? NO
- 하이드레이션 하려면 필요함
- 즉 일반 SSR -> 하이드레이션 처럼 서버에서 말아진 html 받은 후에 remoteEntry.js 로드해서 하이드레이션 하는 것임

code 3.png