Correct page path for GS(S)P data refreshing (#16939)

This makes sure to the page path is the expected version to trigger refreshing on the client and adds additional tests to make sure it is working properly with these page variants. 

Closes: #16938

packages/next/server/hot-reloader.ts

@@ -417,7 +417,9 @@ export default class HotReloader {
         if (serverOnlyChanges.length > 0) {
           this.send({
             event: 'serverOnlyChanges',
-            pages: serverOnlyChanges.map((pg) => pg.substr('pages'.length)),
+            pages: serverOnlyChanges.map((pg) =>
+              denormalizePagePath(pg.substr('pages'.length))
+            ),
           })
         }
 

test/integration/gssp-ssr-change-reloading/pages/another/index.js

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+
+export default function Gsp(props) {
+  if (useRouter().isFallback) {
+    return 'Loading...'
+  }
+
+  return (
+    <>
+      <p id="change">change me</p>
+      <p id="props">{JSON.stringify(props)}</p>
+    </>
+  )
+}
+
+export const getStaticProps = async () => {
+  const count = 1
+
+  return {
+    props: {
+      count,
+      random: Math.random(),
+    },
+  }
+}

test/integration/gssp-ssr-change-reloading/pages/index.js

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+
+export default function Gsp(props) {
+  if (useRouter().isFallback) {
+    return 'Loading...'
+  }
+
+  return (
+    <>
+      <p id="change">change me</p>
+      <p id="props">{JSON.stringify(props)}</p>
+    </>
+  )
+}
+
+export const getStaticProps = async () => {
+  const count = 1
+
+  return {
+    props: {
+      count,
+      random: Math.random(),
+    },
+  }
+}

test/integration/gssp-ssr-change-reloading/test/index.test.js

@@ -116,6 +116,34 @@ describe('GS(S)P Server-Side Change Reloading', () => {
     page.restore()
   })
 
+  it('should update page when getStaticProps is changed only for /index', async () => {
+    const browser = await webdriver(appPort, '/')
+    await browser.eval(() => (window.beforeChange = 'hi'))
+
+    const props = JSON.parse(await browser.elementByCss('#props').text())
+    expect(props.count).toBe(1)
+
+    const page = new File(join(appDir, 'pages/index.js'))
+    page.replace('count = 1', 'count = 2')
+
+    expect(await browser.eval('window.beforeChange')).toBe('hi')
+    page.restore()
+  })
+
+  it('should update page when getStaticProps is changed only for /another/index', async () => {
+    const browser = await webdriver(appPort, '/another')
+    await browser.eval(() => (window.beforeChange = 'hi'))
+
+    const props = JSON.parse(await browser.elementByCss('#props').text())
+    expect(props.count).toBe(1)
+
+    const page = new File(join(appDir, 'pages/another/index.js'))
+    page.replace('count = 1', 'count = 2')
+
+    expect(await browser.eval('window.beforeChange')).toBe('hi')
+    page.restore()
+  })
+
   it('should not reload page when client-side is changed too GSSP', async () => {
     const browser = await webdriver(appPort, '/gssp-blog/first')
     await browser.eval(() => (window.beforeChange = 'hi'))