test: Add initial page load test

Author: franky47

packages/e2e/cypress/e2e/repro-542.cy.js

@@ -5,6 +5,7 @@ it('Reproduction for issue #542', () => {
   cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
   cy.get('#q').should('have.text', 'foo')
   cy.get('#r').should('have.text', 'bar')
+  cy.get('#initial').should('have.text', '{"q":"foo","r":"bar"}')
   cy.get('a').click()
   cy.location('search').should('eq', '')
   cy.get('#q').should('have.text', '')

packages/e2e/src/app/app/repro-542/a/page.tsx

@@ -1,29 +1,12 @@
 'use client'
 
-import Link from 'next/link'
-import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
 import { Suspense } from 'react'
+import { Client } from '../client'
 
 export default function Page() {
   return (
     <Suspense>
-      <Client />
+      <Client page="a" linkTo="b" />
     </Suspense>
   )
 }
-
-function Client() {
-  console.log(
-    'rendering page a, url: %s',
-    typeof location !== 'undefined' ? location.href : 'ssr'
-  )
-  const [q] = useQueryState('q')
-  const [{ r }] = useQueryStates({ r: parseAsString })
-  return (
-    <>
-      <div id="q">{q}</div>
-      <div id="r">{r}</div>
-      <Link href="/app/repro-542/b">Go to page B</Link>
-    </>
-  )
-}

packages/e2e/src/app/app/repro-542/b/page.tsx

@@ -1,32 +1,12 @@
 'use client'
 
-import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
-import React, { Suspense } from 'react'
+import { Suspense } from 'react'
+import { Client } from '../client'
 
 export default function Page() {
   return (
     <Suspense>
-      <Client />
+      <Client page="b" linkTo="a" />
     </Suspense>
   )
 }
-
-function Client() {
-  console.log(
-    'rendering page b, url: %s',
-    typeof location !== 'undefined' ? location.href : 'ssr'
-  )
-  const ref = React.useRef<any>(null)
-  const [q] = useQueryState('q')
-  const [{ r }] = useQueryStates({ r: parseAsString })
-  if (ref.current === null) {
-    ref.current = { q, r }
-  }
-  return (
-    <>
-      <div id="q">{q}</div>
-      <div id="r">{r}</div>
-      <div id="initial">{JSON.stringify(ref.current)}</div>
-    </>
-  )
-}

packages/e2e/src/app/app/repro-542/client.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import Link from 'next/link'
+import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
+import React from 'react'
+
+type ClientProps = {
+  page: 'a' | 'b'
+  linkTo: 'a' | 'b'
+}
+
+type Ref = {
+  q: string | null
+  r: string | null
+}
+
+export function Client({ page, linkTo }: ClientProps) {
+  console.log(
+    'rendering page %s, url: %s',
+    page,
+    typeof location !== 'undefined' ? location.href : 'ssr'
+  )
+  const [q] = useQueryState('q')
+  const [{ r }] = useQueryStates({ r: parseAsString })
+  const initial = React.useRef<Ref | null>(null)
+  if (initial.current === null) {
+    initial.current = { q, r }
+  }
+  return (
+    <>
+      <div id="q">{q}</div>
+      <div id="r">{r}</div>
+      <div id="initial">{JSON.stringify(initial.current)}</div>
+      <Link href={`/app/repro-542/${linkTo}`}>
+        Go to page {page.toUpperCase()}
+      </Link>
+    </>
+  )
+}