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`

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 (
     <div>
       This is a SSR RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a SSR page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a {type} RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a {type} RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a static RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a {type} page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a {type} page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a static page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 (
     <div>
       This is a static page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }

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 <span id="__runtime">{runtime}</span>
 }

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 <span id="__time">{time}</span>
 }