fix(ssr): csr 和 dynamicImport 一起使用导致组件 2 次 mount

packages/renderer-react/src/renderRoutes/renderRoutes.test.tsx

@@ -9,6 +9,7 @@ function TestInitialProps({ foo }: { foo: string }) {
 }
 
 let mountCount = 0;
+let renderCount = 0;
 function TestInitialPropsWithoutUnmount({ foo }: { foo: string }) {
   React.useEffect(() => {
     return () => {
@@ -25,6 +26,14 @@ function TestInitialPropsWithoutUnmount({ foo }: { foo: string }) {
   );
 }
 
+function TestInitialPropsWithMount({ foo }: { foo: string }) {
+  React.useEffect(() => {
+    mountCount++;
+  }, []);
+  renderCount++;
+  return <h1 data-testid="test">{foo}</h1>;
+}
+
 const getInitialProps = async () => {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -37,6 +46,7 @@ const getInitialProps = async () => {
 
 TestInitialProps.getInitialProps = getInitialProps;
 TestInitialPropsWithoutUnmount.getInitialProps = getInitialProps;
+TestInitialPropsWithMount.getInitialProps = getInitialProps;
 
 function TestInitialPropsParent({
   foo,
@@ -128,6 +138,10 @@ const routerConfig = {
       path: '/get-initial-props-without-unmount',
       component: TestInitialPropsWithoutUnmount as any,
     },
+    {
+      path: '/get-initial-props-with-mount',
+      component: TestInitialPropsWithMount as any,
+    },
     {
       path: '/get-initial-props-embed',
       component: TestInitialPropsParent as any,
@@ -188,6 +202,8 @@ let routes = renderRoutes(routerConfig);
 beforeEach(() => {
   window.g_useSSR = true;
   window.g_initialProps = null;
+  mountCount = 0;
+  renderCount = 0;
 });
 
 afterEach(() => {
@@ -306,6 +322,24 @@ test('/get-initial-props-without-unmount', async () => {
   expect((await screen.findByTestId('test')).innerHTML).toEqual('bar');
 });
 
+test('/get-initial-props-with-mount', async () => {
+  const newRoutes = renderRoutes(routerConfig);
+
+  expect(mountCount).toEqual(0);
+  expect(renderCount).toEqual(0);
+
+  const { container } = render(
+    <MemoryRouter initialEntries={['/get-initial-props-with-mount']}>
+      {newRoutes}
+    </MemoryRouter>,
+  );
+
+  await waitFor(() => getByText(container, 'bar'));
+
+  expect(mountCount).toEqual(1);
+  expect(renderCount).toEqual(2);
+});
+
 test('/get-initial-props-embed', async () => {
   const newRoutes = renderRoutes(routerConfig);
   const { container } = render(

packages/renderer-react/src/renderRoutes/renderRoutes.tsx

@@ -38,10 +38,11 @@ function wrapInitialPropsFetch(route: IRoute, opts: IOpts): IComponent {
        */
       const handleGetInitialProps = async () => {
         // preload when enalbe dynamicImport
+        let preloadComponent: any = Component;
         if (Component.preload) {
-          const preloadComponent = await Component.preload();
+          preloadComponent = await Component.preload();
           // for test case, really use .default
-          Component = preloadComponent.default || preloadComponent;
+          preloadComponent = preloadComponent.default || preloadComponent;
         }
         const defaultCtx = {
           isServer: false,
@@ -51,15 +52,15 @@ function wrapInitialPropsFetch(route: IRoute, opts: IOpts): IComponent {
           ...(opts.getInitialPropsCtx || {}),
           ...restRouteParams,
         };
-        if (Component?.getInitialProps) {
+        if (preloadComponent?.getInitialProps) {
           const ctx = await opts.plugin.applyPlugins({
             key: 'ssr.modifyGetInitialPropsCtx',
             type: ApplyPluginsType.modify,
             initialValue: defaultCtx,
             async: true,
           });
 
-          const initialProps = await Component!.getInitialProps!(
+          const initialProps = await preloadComponent!.getInitialProps!(
             ctx || defaultCtx,
           );
           setInitialProps(initialProps);