Ant Design SSR 不匹配问题，服务器呈现中文但客户端 EN

Question

我将 Ant Design 添加到我的 react/redux SSR 就绪应用程序中。正如他们在文档中所说，我使用了 Ant Design 的 Locale Provider 组件。但是有两个主要问题。

在网络控制台中，它说；组件在服务器端呈现中文，但在客户端呈现英文。所以SSR不兼容。我尝试了一些网络配置，但没有解决问题。
它说；您正在使用整个 antd 包，请使用 https://www.npmjs.com/package/babel-plugin-import 来减小应用程序包的大小。我使用了 babel-plugin-import 插件但没有改变任何东西。

如有任何建议，我将不胜感激。

Answer 1

首先，您必须按照文档中的说明使用 ant design "LocaleProvider" 组件。

import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';

return <LocaleProvider locale={enUS}><App /></LocaleProvider>;

然后要支持服务器端呈现，您必须对 server.js 文件使用相同的模式

const { LocaleProvider } = require('antd')
const enUS = require('antd/lib/locale-provider/en_US')

const body = ReactDOMServer.renderToString(
React.createElement(
  LocaleProvider,
  { locale: enUS },
  React.createElement(
    Provider,
    { store },
    React.createElement(
      StaticRouter,
      { location: req.url, context: context },
        React.createElement(Layout, null, React.createElement(Routes))
      )
    )
  )
)

Ant Design SSR 不匹配问题，服务器呈现中文但客户端 EN

Ant Design SSR mismatch issue, Server renders Chinese but client EN

javascript

reactjs

antd