Ant Design SSR不匹配问题，服务器渲染中文但客户端EN答案

【问题标题】：Ant Design SSR mismatch issue, Server renders Chinese but client ENAnt Design SSR不匹配问题，服务器渲染中文但客户端EN
【发布时间】：2017-08-27 17:09:18
【问题描述】：

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

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

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

【问题讨论】：

解决了第二个问题；通过添加 .babelrc 以下行 "plugins": [ ... ["import", { "libraryName": "antd" }] ... ]，其他选项样式 css 或 true 会导致错误。我不知道为什么，但这暂时解决了我的问题。所有的js组件都是模块化加载的

标签： javascript reactjs antd

【解决方案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))
      )
    )
  )
)

【讨论】：