Update to only re-fetch data instead of reloading

vercel · Sep 2, 2020 · 9df55a0 · 9df55a0
1 parent deb40ea
commit 9df55a0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/packages/next/client/next-dev.js b/packages/next/client/next-dev.js
@@ -7,6 +7,7 @@ import initializeBuildWatcher from './dev/dev-build-watcher'
 import initializePrerenderIndicator from './dev/prerender-indicator'
 import { displayContent } from './dev/fouc'
 import { getEventSourceWrapper } from './dev/error-overlay/eventsource'
+import * as querystring from '../next-server/lib/router/utils/querystring'
 
 // Temporary workaround for the issue described here:
 // https://github.com/vercel/next.js/issues/3775#issuecomment-407438123
@@ -44,10 +45,22 @@ initNext({ webpackHMR })
           })
       } else if (event.data.indexOf('serverOnlyChanges') !== -1) {
         const { pages } = JSON.parse(event.data)
+        const router = window.next.router
 
-        if (pages.includes(window.next.router.pathname)) {
-          console.log('Reloading page due to server-side page change')
-          window.location.reload()
+        if (pages.includes(router.pathname)) {
+          console.log('Refreshing page data due to server-side change')
+
+          router.replace(
+            router.pathname +
+              '?' +
+              String(
+                querystring.assign(
+                  querystring.urlQueryToSearchParams(router.query),
+                  new URLSearchParams(location.search)
+                )
+              ),
+            router.asPath
+          )
         }
       }
     }

diff --git a/test/integration/gssp-ssr-change-reloading/test/index.test.js b/test/integration/gssp-ssr-change-reloading/test/index.test.js
@@ -37,7 +37,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
     await check(() => browser.elementByCss('#change').text(), 'change me')
   })
 
-  it('should reload page when getStaticProps is changed only', async () => {
+  it('should update page when getStaticProps is changed only', async () => {
     const browser = await webdriver(appPort, '/gsp-blog/first')
     await browser.eval(() => (window.beforeChange = 'hi'))
 
@@ -52,7 +52,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
         JSON.parse(await browser.elementByCss('#props').text()).count + '',
       '2'
     )
-    expect(await browser.eval(() => window.beforeChange)).toBe(null)
+    expect(await browser.eval(() => window.beforeChange)).toBe('hi')
     page.restore()
 
     await check(
@@ -62,7 +62,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
     )
   })
 
-  it('should reload page when getStaticPaths is changed only', async () => {
+  it('should update page when getStaticPaths is changed only', async () => {
     const browser = await webdriver(appPort, '/gsp-blog/first')
     await browser.eval(() => (window.beforeChange = 'hi'))
 
@@ -72,13 +72,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
     const page = new File(join(appDir, 'pages/gsp-blog/[post].js'))
     page.replace('paths = 1', 'paths = 2')
 
-    await check(
-      async () =>
-        (await browser.eval(() => window.beforeChange)) === null
-          ? 'pass'
-          : 'fail',
-      'pass'
-    )
+    expect(await browser.eval('window.beforeChange')).toBe('hi')
     page.restore()
   })
 
@@ -102,7 +96,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
     await check(() => browser.elementByCss('#change').text(), 'change me')
   })
 
-  it('should reload page when getServerSideProps is changed only', async () => {
+  it('should update page when getServerSideProps is changed only', async () => {
     const browser = await webdriver(appPort, '/gssp-blog/first')
     await browser.eval(() => (window.beforeChange = 'hi'))
 
@@ -117,7 +111,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
         JSON.parse(await browser.elementByCss('#props').text()).count + '',
       '2'
     )
-    expect(await browser.eval(() => window.beforeChange)).toBe(null)
+    expect(await browser.eval(() => window.beforeChange)).toBe('hi')
     page.restore()
 
     await check(