From 50662c6a83392f7b964ab3f5b7a1cd802b80c1a9 Mon Sep 17 00:00:00 2001 From: Brian Beck Date: Wed, 12 Dec 2018 02:02:36 -0800 Subject: [PATCH] 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 ``. 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. --- examples/with-react-intl/pages/_app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js index 2e7cc5e1..90c354c4 100644 --- a/examples/with-react-intl/pages/_app.js +++ b/examples/with-react-intl/pages/_app.js @@ -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 ( - +