diff --git a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md index 7deaf3b757e37..a6d85ab05ce87 100644 --- a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md +++ b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md @@ -288,6 +288,55 @@ The `handleLanguageChange` function just wraps the `react-i18n` function passed in as a prop through `translate`. Pretty much everything is handled for us. Hooray! 🎉 +## SSR + +To let it render the content into html, you need to load i18n namespaces (using `i18n.loadNamespaces`) before render + +### With redux + +```js +// gatsby-ssr.js + +import React from 'react' +import { Provider } from 'react-redux' +import { renderToString } from 'react-dom/server' +import i18n from './src/i18n' + +import createStore from './src/state/createStore' + +exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { + i18n.loadNamespaces(['common'], () => { + const store = createStore() + const ConnectedBody = () => ( + {bodyComponent} + ) + replaceBodyHTMLString(renderToString()) + }) +} +``` + +### Without redux + +> Not yet tested + +```js +// gatsby-ssr.js + +import React from 'react' +import { renderToString } from 'react-dom/server' +import i18n from './src/i18n' + +import createStore from './src/state/createStore' + +exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { + i18n.loadNamespaces(['common'], () => { + replaceBodyHTMLString(bodyComponent) + }) +} +``` + +> `translate` hoc from react-i18next cause page / component not able to SSR. I make it works by import i18n & use i18n.t + ## Finishing up As you can see, i18n in Gatsby is actually pretty simple when you know how! We