Simplify <Link> Prefetch Deduping

vercel · Jan 7, 2020 · 0d2f98a · 0d2f98a
1 parent 8686fca
commit 0d2f98a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
@@ -56,6 +56,7 @@ let observer: IntersectionObserver
 const listeners = new Map()
 const IntersectionObserver =
   typeof window !== 'undefined' ? (window as any).IntersectionObserver : null
+const prefetched: { [href: string]: boolean } = {}
 
 function getObserver() {
   // Return shared instance of IntersectionObserver if already created
@@ -133,10 +134,7 @@ class Link extends Component<LinkProps> {
   }
 
   handleRef(ref: Element) {
-    const isPrefetched = (Router.router as any).pageLoader.prefetched[
-      this.getHref()
-    ]
-
+    const isPrefetched = prefetched[this.getHref()]
     if (this.p && IntersectionObserver && ref && ref.tagName) {
       this.cleanUpListeners()
 

diff --git a/packages/next/client/page-loader.js b/packages/next/client/page-loader.js
@@ -49,7 +49,6 @@ export default class PageLoader {
     this.assetPrefix = assetPrefix
 
     this.pageCache = {}
-    this.prefetched = {}
     this.pageRegisterEvents = mitt()
     this.loadingRoutes = {}
     if (process.env.__NEXT_GRANULAR_CHUNKS) {
@@ -221,7 +220,6 @@ export default class PageLoader {
       url = route
     } else {
       route = normalizeRoute(route)
-      this.prefetched[route] = true
 
       let scriptRoute = `${route === '/' ? '/index' : route}.js`
       if (process.env.__NEXT_MODERN_BUILD && hasNoModule) {

diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
@@ -608,15 +608,14 @@ export default class Router implements BaseRouter {
         }
         return
       }
-      // @ts-ignore pathname is always defined
-      const route = toRoute(pathname)
 
       // Prefetch is not supported in development mode because it would trigger on-demand-entries
       if (process.env.NODE_ENV !== 'production') {
-        // mark it as prefetched for debugging in dev
-        this.pageLoader.prefetched[route] = true
         return
       }
+
+      // @ts-ignore pathname is always defined
+      const route = toRoute(pathname)
       this.pageLoader.prefetch(route).then(resolve, reject)
     })
   }

diff --git a/test/integration/preload-viewport/test/index.test.js b/test/integration/preload-viewport/test/index.test.js
@@ -160,6 +160,8 @@ describe('Prefetching Links in viewport', () => {
   })
 
   it('should not add an another observer for a prefetched page', async () => {
+    // info: both `/` and `/de-duped` ref the `/first` page, which we don't
+    // want to be re-fetched.
     const browser = await webdriver(appPort, '/')
     await waitFor(2 * 1000)
     await browser.eval(`(function() {