mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Fix initialNow in react-intl example (#5867)
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:
parent
4345343d88
commit
50662c6a83
|
@ -23,17 +23,17 @@ export default class MyApp extends App {
|
|||
// In the browser, use the same values that the server serialized.
|
||||
const { req } = ctx
|
||||
const { locale, messages } = req || window.__NEXT_DATA__.props
|
||||
const initialNow = Date.now()
|
||||
|
||||
return { pageProps, locale, messages }
|
||||
return { pageProps, locale, messages, initialNow }
|
||||
}
|
||||
|
||||
render () {
|
||||
const { Component, pageProps, locale, messages } = this.props
|
||||
const now = Date.now()
|
||||
const { Component, pageProps, locale, messages, initialNow } = this.props
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<IntlProvider locale={locale} messages={messages} initialNow={now}>
|
||||
<IntlProvider locale={locale} messages={messages} initialNow={initialNow}>
|
||||
<Component {...pageProps} />
|
||||
</IntlProvider>
|
||||
</Container>
|
||||
|
|
Loading…
Reference in a new issue