From bb6ea6399dd0835b0a0f4601934e6fde2ece1e3e Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Sun, 27 Mar 2022 03:02:17 +0200 Subject: [PATCH] Fix hydration issue in the switchable runtime tests (#35616) In this test we are mainly focusing on the SSR'd result so hydration is't critical, but it will definitely help to get rid of these hydration errors. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` --- .../switchable-runtime/pages/edge-rsc.server.js | 8 ++++---- .../switchable-runtime/pages/edge.js | 8 ++++---- .../pages/node-rsc-ssg.server.js | 8 ++++---- .../pages/node-rsc-ssr.server.js | 8 ++++---- .../switchable-runtime/pages/node-rsc.server.js | 8 ++++---- .../switchable-runtime/pages/node-ssg.js | 8 ++++---- .../switchable-runtime/pages/node-ssr.js | 8 ++++---- .../switchable-runtime/pages/node.js | 8 ++++---- .../switchable-runtime/pages/static.js | 8 ++++---- .../switchable-runtime/utils/runtime.js | 15 +++++++++++++-- .../switchable-runtime/utils/time.js | 13 +++++++++++-- 11 files changed, 60 insertions(+), 40 deletions(-) diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js index 83dc8c219e84..0c05e6023b4d 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page() { return (
This is a SSR RSC page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js index c3425c7e64af..9f99eaecaa15 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page() { return (
This is a SSR page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js index 362e634644eb..7f9804f683e8 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page({ type }) { return (
This is a {type} RSC page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js index 1b8b01526a3c..d064a5cbbfd5 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page({ type }) { return (
This is a {type} RSC page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js index f3563039b63b..4c373d397b58 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page() { return (
This is a static RSC page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js index d555009acfcd..ccd6832cf2e3 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page({ type }) { return (
This is a {type} page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js index e58276b47a76..1f7ee2e0b14c 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page({ type }) { return (
This is a {type} page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js index bf065da478ba..b2186ca7ceb6 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page() { return (
This is a static page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js index e44edfd79523..ea410104fb5d 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js @@ -1,14 +1,14 @@ -import getRuntime from '../utils/runtime' -import getTime from '../utils/time' +import Runtime from '../utils/runtime' +import Time from '../utils/time' export default function Page() { return (
This is a static page.
- {'Runtime: ' + getRuntime()} +
- {'Time: ' + getTime()} +
) } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js index 444f1ee8b498..bea2a3fe18ad 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js @@ -1,3 +1,14 @@ -export default function getRuntime() { - return process.version ? `Node.js ${process.version}` : 'Edge/Browser' +export default function Runtime() { + let runtime + + if (typeof window !== 'undefined') { + // We have to make sure it matches the existing markup when hydrating. + runtime = document.getElementById('__runtime').textContent + } else { + runtime = + 'Runtime: ' + + (process.version ? `Node.js ${process.version}` : 'Edge/Browser') + } + + return {runtime} } diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js index cf78549b9a7c..c0894628bb99 100644 --- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js @@ -1,3 +1,12 @@ -export default function getTime() { - return Date.now() +export default function Time() { + let time + + if (typeof window !== 'undefined') { + // We have to make sure it matches the existing markup when hydrating. + time = document.getElementById('__time').textContent + } else { + time = 'Time: ' + Date.now() + } + + return {time} }