Question

我正在构建一个React应用，并且我在bundle的客户端上进行了代码拆分。我使用SSR时，我的应用程序已正确显示在服务器上，我没有在服务器上进行代码拆分，但在客户端上进行了。我在hydrate客户端上收到以下警告。

Warning: Did not expect server HTML to contain a <div> in <div>.

我正在使用@loadable/component在客户端上进行代码拆分

我在客户端的App.js文件为：-

import React from "react" 
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'

const AsyncHome = loadable(() =>
  import('./components/Home/Home')  
)
const AsyncPost = loadable(() =>
  import('./components/Post/Post')
)

function App(){
   return(
       <div>
         <Switch>
             <Route path="/" component={AsyncHome}/>
             <Route path="post" component={AsyncPost}/>
           </Switch>
       </div>
    )
}

我在客户端上的index.js文件为：

import React from 'react'
import { hydrate } from 'react-dom'
import { BrowserRouter} from 'react-router-dom'
import App from './App'

hydrate(
    <BrowserRouter><App/></BrowserRouter>,
    document.getElementById('app')
)

如何仅在客户端上使用code-splitting来解决该警告。我也尝试过React.lazy和React.Suspense，但遇到同样的错误。

Answer 1

您需要确保要在客户端上进行水化处理的容器与服务器端上进行渲染的容器相同。请看看react documentation

话虽如此，代码拆分是为了实现较小的JS捆绑包，这意味着我们提前计划了如何计划根据用例拆分代码。我们不在客户端运行该运行时。不过，我可能会遗漏一些东西，因此如果您可以分享尝试这样做的原因，那将有所帮助。不过，在服务器端，您可以选择执行以下操作：

const AsyncHome = loadable(() =>
  import(
    /* webpackChunkName: "home" */
    /* webpackPrefetch: true */
    './components/Home'
  ),
);
const AsyncPost = loadable(() =>
  import(
    /* webpackChunkName: "post" */
    /* webpackPrefetch: true */
    './components/Post'
  ),
);

另一种更好的方法是使用ChunkExtractor中的@loadable/server插件，如果您不想明确地跟踪应用程序中的代码拆分块另外，为避免在服务器端进行渲染，您需要确保组件在安装时初始化，而这种初始化仅在客户端发生

let HomeComponent = () => <div/>
let PostComponent = () => <div/>

function App(){
   useEffect(() => {
    HomeComponent = loadable(() =>
      import(
        /* webpackChunkName: "home" */
        /* webpackPrefetch: true */
        './components/Home'
      ),
    );
    PostComponent = loadable(() =>
      import(
        /* webpackChunkName: "post" */
        /* webpackPrefetch: true */
        './components/Post'
      ),
    );
  }, []);
}

如何在客户端上通过代码拆分正确地对应用进行响应

1 个答案: