terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Fix initialNow in react-intl example (#5867)

Browse source 
The `initialNow` prop is used to avoid content mismatches when Universal/SSR apps render date values using components like `<FormattedRelative>`.

If this value is created in `render()`, then the server will generate it and then the client will also generate it during hydration / initial render, resulting in two different values and content mismatches like:

> Warning: Text content did not match. Server: "in 1,741,545 seconds" Client: "in 1,741,543 seconds"

If the value is instead generated in `getInitialProps`, then the client's initial rendering will match because it will use the same value sent down by the server.
This commit is contained in:
Brian Beck 2018-12-12 02:02:36 -08:00 committed by Tim Neutkens
parent 4345343d88
commit 50662c6a83
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/with-react-intl/pages/_app.js
View file

@ -23,17 +23,17 @@ export default class MyApp extends App {
// In the browser, use the same values that the server serialized. // In the browser, use the same values that the server serialized.
const { req } = ctx const { req } = ctx
const { locale, messages } = req || window.__NEXT_DATA__.props const { locale, messages } = req || window.__NEXT_DATA__.props
const initialNow = Date.now()
return { pageProps, locale, messages } return { pageProps, locale, messages, initialNow }
} }
render () { render () {
const { Component, pageProps, locale, messages } = this.props const { Component, pageProps, locale, messages, initialNow } = this.props
const now = Date.now()
return ( return (
<Container> <Container>
<IntlProvider locale={locale} messages={messages} initialNow={now}> <IntlProvider locale={locale} messages={messages} initialNow={initialNow}>
<Component {...pageProps} /> <Component {...pageProps} />
</IntlProvider> </IntlProvider>
</Container> </Container>