2

私は反応アプリを構築しており、クライアントでコード分割を行いました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たが、同じエラーが発生しています。

4

1 に答える 1

0

サーバー側でレンダリングされたものと同じように、クライアント側でハイドレートしようとしているコンテナーを確認する必要があります。反応のドキュメントを見てください

そうは言っても、コード分割はより小さな 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'
      ),
    );
  }, []);
}
于 2020-07-19T13:50:06.473 に答える