Fix prefetching in IE11

packages/next/client/route-loader.ts

@@ -72,16 +72,21 @@ export interface RouteLoader {
   prefetch(route: string): Promise<void>
 }
 
-function hasPrefetch(link?: HTMLLinkElement): boolean {
+function hasRel(rel: string, link?: HTMLLinkElement) {
   try {
     link = document.createElement('link')
-    return link.relList.supports('prefetch')
-  } catch {
-    return false
-  }
+    return link.relList.supports(rel)
+  } catch {}
 }
 
-const canPrefetch: boolean = hasPrefetch()
+const relPrefetch =
+  hasRel('preload') && !hasRel('prefetch')
+    ? // https://caniuse.com/#feat=link-rel-preload
+      // macOS and iOS (Safari does not support prefetch)
+      'preload'
+    : // https://caniuse.com/#feat=link-rel-prefetch
+      // IE 11, Edge 12+, nearly all evergreen
+      'prefetch'
 
 function prefetchViaDom(
   href: string,
@@ -97,7 +102,7 @@ function prefetchViaDom(
 
     // The order of property assignment here is intentional:
     if (as) link!.as = as
-    link!.rel = `prefetch`
+    link!.rel = relPrefetch
     link!.crossOrigin = process.env.__NEXT_CROSS_ORIGIN!
     link!.onload = res
     link!.onerror = rej
@@ -321,9 +326,7 @@ function createRouteLoader(assetPrefix: string): RouteLoader {
       return getFilesForRoute(assetPrefix, route)
         .then((output) =>
           Promise.all(
-            canPrefetch
-              ? output.scripts.map((script) => prefetchViaDom(script, 'script'))
-              : []
+            output.scripts.map((script) => prefetchViaDom(script, 'script'))
           )
         )
         .then(() => {

test/integration/not-found-revalidate/test/index.test.js

@@ -63,7 +63,20 @@ const runTests = () => {
     expect(props2.found).toBe(true)
     expect(props2.params).toEqual({ slug: 'hello' })
     expect(isNaN(props2.random)).toBe(false)
-    expect(props2.random).not.toBe(props.random)
+
+    await waitFor(1000)
+    res = await fetchViaHTTP(appPort, '/fallback-blocking/hello')
+    $ = cheerio.load(await res.text())
+
+    const props3 = JSON.parse($('#props').text())
+    expect(res.headers.get('cache-control')).toBe(
+      's-maxage=1, stale-while-revalidate'
+    )
+    expect(res.status).toBe(200)
+    expect(props3.found).toBe(true)
+    expect(props3.params).toEqual({ slug: 'hello' })
+    expect(isNaN(props3.random)).toBe(false)
+    expect(props3.random).not.toBe(props.random)
   })
 
   it('should revalidate after notFound is returned for fallback: true', async () => {
@@ -106,7 +119,20 @@ const runTests = () => {
     expect(props2.found).toBe(true)
     expect(props2.params).toEqual({ slug: 'world' })
     expect(isNaN(props2.random)).toBe(false)
-    expect(props2.random).not.toBe(props.random)
+
+    await waitFor(1000)
+    res = await fetchViaHTTP(appPort, '/fallback-true/world')
+    $ = cheerio.load(await res.text())
+
+    const props3 = JSON.parse($('#props').text())
+    expect(res.headers.get('cache-control')).toBe(
+      's-maxage=1, stale-while-revalidate'
+    )
+    expect(res.status).toBe(200)
+    expect(props3.found).toBe(true)
+    expect(props3.params).toEqual({ slug: 'world' })
+    expect(isNaN(props3.random)).toBe(false)
+    expect(props3.random).not.toBe(props.random)
   })
 }