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

Question

I added Ant Design to my react/redux SSR ready application. I used Ant Design's Locale Provider component as they said in documentation. But there is two major problems.

1. In web console, it says; component rendered Chinese at server but at client it rendered English. So SSR is not compatible. I tried some web configs but didn't resolve the issue.
2. It says; You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. I used babel-plugin-import plugin but didn't change any thing.

I will be grateful to any suggestion.

Answer 1

First you must use ant design "LocaleProvider" component as described in documentation.

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

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

Then to support Server Side Rendering you must use same pattern for server.js file

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))
      )
    )
  )
)