Update to add preload for fallback pages data

vercel · Feb 7, 2020 · e5db1bb · e5db1bb
1 parent 66e7e51
commit e5db1bb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 41 deletions.
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -47,8 +47,6 @@ const {
  isFallback,
 } = data
 
-let fallbackDataPromise = Promise.resolve()
-
 const prefix = assetPrefix || ''
 
 // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
@@ -99,38 +97,34 @@ class Container extends React.Component {
  })
  }
 
- // wait for fallbackDataPromise so we don't kick off an extra
- // request if one is pending
- fallbackDataPromise.then(() => {
- // If page was exported and has a querystring
- // If it's a dynamic route or has a querystring
- // if it's a fallback page
- if (
- router.isSsr &&
- (isFallback ||
- (data.nextExport &&
- (isDynamicRoute(router.pathname) || location.search)) ||
- (Component && Component.__N_SSG && location.search))
- ) {
- // update query on mount for exported pages
- router.replace(
- router.pathname +
- '?' +
- stringifyQs({
- ...router.query,
- ...parseQs(location.search.substr(1)),
- }),
- asPath,
- {
- // WARNING: `_h` is an internal option for handing Next.js
- // client-side hydration. Your app should _never_ use this property.
- // It may change at any time without notice.
- _h: 1,
- shallow: !isFallback,
- }
- )
- }
- })
+ // If page was exported and has a querystring
+ // If it's a dynamic route or has a querystring
+ // if it's a fallback page
+ if (
+ router.isSsr &&
+ (isFallback ||
+ (data.nextExport &&
+ (isDynamicRoute(router.pathname) || location.search)) ||
+ (Component && Component.__N_SSG && location.search))
+ ) {
+ // update query on mount for exported pages
+ router.replace(
+ router.pathname +
+ '?' +
+ stringifyQs({
+ ...router.query,
+ ...parseQs(location.search.substr(1)),
+ }),
+ asPath,
+ {
+ // WARNING: `_h` is an internal option for handing Next.js
+ // client-side hydration. Your app should _never_ use this property.
+ // It may change at any time without notice.
+ _h: 1,
+ shallow: !isFallback,
+ }
+ )
+ }
 
  if (process.env.__NEXT_TEST_MODE) {
  window.__NEXT_HYDRATED = true
@@ -227,12 +221,6 @@ export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
  const renderCtx = { App, Component, props, err: initialErr }
 
  if (process.env.NODE_ENV === 'production') {
- // kick off static data request now so it's in the cache
- // when we re-render post-hydration
- if (data.isFallback) {
- fallbackDataPromise = router._getStaticData(asPath).catch(() => {})
- }
-
  render(renderCtx)
  return emitter
  }

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -296,7 +296,7 @@ export class Head extends Component<
  headTags,
  } = this.context._documentProps
  const { _devOnlyInvalidateCacheQueryString } = this.context
- const { page, buildId } = __NEXT_DATA__
+ const { page, buildId, isFallback } = __NEXT_DATA__
 
  let { head } = this.context._documentProps
  let children = this.props.children
@@ -479,6 +479,17 @@ export class Head extends Component<
  href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
  />
  )}
+ {isFallback && (
+ <link
+ rel="preload"
+ href={
+ assetPrefix + `/_next/data/${buildId}${dangerousAsPath}.json`
+ }
+ as="fetch"
+ nonce={this.props.nonce}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
+ />
+ )}
  {this.getCssLinks()}
  {page !== '/_error' && (
  <link