Add initial SSG fallback handling

packages/next/build/index.ts

@@ -88,7 +88,7 @@ export type SsgRoute = {
 
 export type DynamicSsgRoute = {
   routeRegex: string
-
+  fallback: string
   dataRoute: string
   dataRouteRegex: string
 }
@@ -639,15 +639,16 @@ export default async function build(dir: string, conf = null): Promise<void> {
       // n.b. we cannot handle this above in combinedPages because the dynamic
       // page must be in the `pages` array, but not in the mapping.
       exportPathMap: (defaultMap: any) => {
-        // Remove dynamically routed pages from the default path map. These
-        // pages cannot be prerendered because we don't have enough information
-        // to do so.
+        // Generate fallback for dynamically routed pages to use as
+        // the loading state for pages while the data is being populated
         //
         // Note: prerendering disables automatic static optimization.
         ssgPages.forEach(page => {
           if (isDynamicRoute(page)) {
             tbdPrerenderRoutes.push(page)
-            delete defaultMap[page]
+            // set __nextFallback query so render doesn't call
+            // getStaticProps/getServerProps
+            defaultMap[page] = { page, query: { __nextFallback: true } }
           }
         })
         // Append the "well-known" routes we should prerender for, e.g. blog
@@ -711,13 +712,12 @@ export default async function build(dir: string, conf = null): Promise<void> {
     for (const page of combinedPages) {
       const isSsg = ssgPages.has(page)
       const isDynamic = isDynamicRoute(page)
-      const file = normalizePagePath(page)
-      // The dynamic version of SSG pages are not prerendered. Below, we handle
-      // the specific prerenders of these.
-      if (!(isSsg && isDynamic)) {
-        await moveExportedPage(page, file, isSsg, 'html')
-      }
       const hasAmp = hybridAmpPages.has(page)
+      let file = normalizePagePath(page)
+
+      // We should always have an HTML file to move for each page
+      await moveExportedPage(page, file, isSsg, 'html')
+
       if (hasAmp) {
         await moveExportedPage(`${page}.amp`, `${file}.amp`, isSsg, 'html')
       }
@@ -734,8 +734,9 @@ export default async function build(dir: string, conf = null): Promise<void> {
             dataRoute: path.posix.join('/_next/data', buildId, `${file}.json`),
           }
         } else {
-          // For a dynamic SSG page, we did not copy its html nor data exports.
-          // Instead, we must copy specific versions of this page as defined by
+          // For a dynamic SSG page, we did not copy its data exports and only
+          // copy the fallback HTML file.
+          // We must also copy specific versions of this page as defined by
           // `unstable_getStaticPaths` (additionalSsgPaths).
           const extraRoutes = additionalSsgPaths.get(page) || []
           for (const route of extraRoutes) {
@@ -778,15 +779,17 @@ export default async function build(dir: string, conf = null): Promise<void> {
   if (ssgPages.size > 0) {
     const finalDynamicRoutes: PrerenderManifest['dynamicRoutes'] = {}
     tbdPrerenderRoutes.forEach(tbdRoute => {
+      const normalizedRoute = normalizePagePath(tbdRoute)
       const dataRoute = path.posix.join(
         '/_next/data',
         buildId,
-        `${normalizePagePath(tbdRoute)}.json`
+        `${normalizedRoute}.json`
       )
 
       finalDynamicRoutes[tbdRoute] = {
         routeRegex: getRouteRegex(tbdRoute).re.source,
         dataRoute,
+        fallback: `${normalizedRoute}.html`,
         dataRouteRegex: getRouteRegex(
           dataRoute.replace(/\.json$/, '')
         ).re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.json$'),

packages/next/client/index.js

@@ -96,9 +96,28 @@ class Container extends React.Component {
         })
     }
 
+    // call router.replace to trigger data fetching while
+    // the fallback is shown
+
+    if (data.isFallback) {
+      router.replace(
+        {
+          pathname: page,
+          query: {
+            ...router.query,
+            ...parseQs(location.search.substr(1)),
+          },
+        },
+        asPath,
+        { _h: 1 }
+      )
+    }
+
     // If page was exported and has a querystring
     // If it's a dynamic route or has a querystring
+
     if (
+      !data.isFallback &&
       router.isSsr &&
       ((data.nextExport &&
         (isDynamicRoute(router.pathname) || location.search)) ||
@@ -218,6 +237,12 @@ 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) {
+      router._getStaticData(asPath).catch(() => {})
+    }
+
     render(renderCtx)
     return emitter
   }

packages/next/next-server/lib/router/router.ts

@@ -393,31 +393,60 @@ export default class Router implements BaseRouter {
 
       // If shallow is true and the route exists in the router cache we reuse the previous result
       this.getRouteInfo(route, pathname, query, as, shallow).then(routeInfo => {
-        const { error } = routeInfo
+        const doRouteChange = (routeInfo: RouteInfo, emit: boolean) => {
+          const { error } = routeInfo
 
-        if (error && error.cancelled) {
-          return resolve(false)
-        }
+          if (error && error.cancelled) {
+            return resolve(false)
+          }
 
-        Router.events.emit('beforeHistoryChange', as)
-        this.changeState(method, url, addBasePath(as), options)
+          Router.events.emit('beforeHistoryChange', as)
+          this.changeState(method, url, addBasePath(as), options)
 
-        if (process.env.NODE_ENV !== 'production') {
-          const appComp: any = this.components['/_app'].Component
-          ;(window as any).next.isPrerendered =
-            appComp.getInitialProps === appComp.origGetInitialProps &&
-            !(routeInfo.Component as any).getInitialProps
-        }
+          if (process.env.NODE_ENV !== 'production') {
+            const appComp: any = this.components['/_app'].Component
+            ;(window as any).next.isPrerendered =
+              appComp.getInitialProps === appComp.origGetInitialProps &&
+              !(routeInfo.Component as any).getInitialProps
+          }
 
-        this.set(route, pathname, query, as, routeInfo)
+          this.set(route, pathname, query, as, routeInfo)
 
-        if (error) {
-          Router.events.emit('routeChangeError', error, as)
-          throw error
+          if (emit) {
+            if (error) {
+              Router.events.emit('routeChangeError', error, as)
+              throw error
+            }
+
+            Router.events.emit('routeChangeComplete', as)
+            resolve(true)
+          }
         }
 
-        Router.events.emit('routeChangeComplete', as)
-        return resolve(true)
+        if ((routeInfo as any).dataRes) {
+          const dataRes = (routeInfo as any).dataRes as Promise<RouteInfo>
+
+          // to prevent a flash of the fallback page we delay showing it for
+          // 110ms and race the timeout with the data response. If the data
+          // beats the timeout we skip showing the fallback
+          Promise.race([
+            new Promise(resolve => setTimeout(() => resolve(false), 110)),
+            dataRes,
+          ])
+            .then((data: any) => {
+              if (!data) {
+                // data didn't win the race, show fallback
+                doRouteChange(routeInfo, false)
+              }
+              return dataRes
+            })
+            .then(finalData => {
+              // render with the data and complete route change
+              doRouteChange(finalData as RouteInfo, true)
+            }, reject)
+        } else {
+          doRouteChange(routeInfo, true)
+        }
       }, reject)
     })
   }
@@ -486,25 +515,40 @@ export default class Router implements BaseRouter {
           }
         }
 
-        return this._getData<RouteInfo>(() =>
-          (Component as any).__N_SSG
-            ? this._getStaticData(as)
-            : (Component as any).__N_SSP
-            ? this._getServerData(as)
-            : this.getInitialProps(
-                Component,
-                // we provide AppTree later so this needs to be `any`
-                {
-                  pathname,
-                  query,
-                  asPath: as,
-                } as any
-              )
-        ).then(props => {
+        const isSSG = (Component as any).__N_SSG
+        const isSSP = (Component as any).__N_SSP
+
+        const handleData = (props: any) => {
           routeInfo.props = props
           this.components[route] = routeInfo
           return routeInfo
-        })
+        }
+
+        // resolve with fallback routeInfo and promise for data
+        if (isSSG || isSSP) {
+          return Promise.resolve({
+            ...routeInfo,
+            props: {},
+            dataRes: this._getData(() =>
+              (isSSG
+                ? this._getStaticData(as)
+                : this._getServerData(as)
+              ).then((props: any) => handleData(props))
+            ),
+          })
+        }
+
+        return this._getData<RouteInfo>(() =>
+          this.getInitialProps(
+            Component,
+            // we provide AppTree later so this needs to be `any`
+            {
+              pathname,
+              query,
+              asPath: as,
+            } as any
+          )
+        ).then(props => handleData(props))
       })
       .catch(err => {
         return new Promise(resolve => {

packages/next/next-server/lib/utils.ts

@@ -76,6 +76,7 @@ export type NEXT_DATA = {
   runtimeConfig?: { [key: string]: any }
   nextExport?: boolean
   autoExport?: boolean
+  isFallback?: boolean
   dynamicIds?: string[]
   err?: Error & { statusCode?: number }
 }

packages/next/next-server/server/next-server.ts

@@ -1010,6 +1010,23 @@ export default class Server {
       return { html, pageData, sprRevalidate }
     })
 
+    // render fallback if cached data wasn't available
+    if (!isResSent(res) && !isDataReq && isDynamicRoute(pathname)) {
+      query.__nextFallback = 'true'
+      let html = ''
+      if (isLikeServerless) {
+        this.prepareServerlessUrl(req, query)
+        html = await (result.Component as any).renderReqToHTML(req, res)
+      } else {
+        html = (await renderToHTML(req, res, pathname, query, {
+          ...result,
+          ...opts,
+        })) as string
+      }
+
+      this.__sendPayload(res, html, 'text/html; charset=utf-8')
+    }
+
     return doRender(ssgCacheKey, []).then(
       async ({ isOrigin, value: { html, pageData, sprRevalidate } }) => {
         // Respond to the request if a payload wasn't sent above (from cache)

packages/next/next-server/server/render.tsx

@@ -152,6 +152,7 @@ function renderDocument(
     runtimeConfig,
     nextExport,
     autoExport,
+    isFallback,
     dynamicImportsIds,
     dangerousAsPath,
     hasCssMode,
@@ -187,6 +188,7 @@ function renderDocument(
     htmlProps: any
     bodyTags: any
     headTags: any
+    isFallback?: boolean
   }
 ): string {
   return (
@@ -203,6 +205,7 @@ function renderDocument(
             runtimeConfig, // runtimeConfig if provided, otherwise don't sent in the resulting HTML
             nextExport, // If this is a page exported by `next export`
             autoExport, // If this is an auto exported page
+            isFallback,
             dynamicIds:
               dynamicImportsIds.length === 0 ? undefined : dynamicImportsIds,
             err: err ? serializeError(dev, err) : undefined, // Error if one happened, otherwise don't sent in the resulting HTML
@@ -294,6 +297,9 @@ export async function renderToHTML(
   const bodyTags = (...args: any) => callMiddleware('bodyTags', args)
   const htmlProps = (...args: any) => callMiddleware('htmlProps', args, true)
 
+  const isFallback = !!query.__nextFallback
+  delete query.__nextFallback
+
   const isSpr = !!unstable_getStaticProps
   const defaultAppGetInitialProps =
     App.getInitialProps === (App as any).origGetInitialProps
@@ -428,7 +434,7 @@ export async function renderToHTML(
       ctx,
     })
 
-    if (isSpr) {
+    if (isSpr && !isFallback) {
       const data = await unstable_getStaticProps!({
         params: isDynamicRoute(pathname) ? (query as any) : undefined,
       })
@@ -483,7 +489,7 @@ export async function renderToHTML(
     renderOpts.err = err
   }
 
-  if (unstable_getServerProps) {
+  if (unstable_getServerProps && !isFallback) {
     const data = await unstable_getServerProps({
       params,
       query,
@@ -504,6 +510,12 @@ export async function renderToHTML(
   // _app's getInitialProps for getServerProps if not this can be removed
   if (isDataReq) return props
 
+  // We don't call getStaticProps or getServerProps while generating
+  // the fallback so make sure to set pageProps to an empty object
+  if (isFallback) {
+    props.pageProps = {}
+  }
+
   // the response might be finished on the getInitialProps call
   if (isResSent(res) && !isSpr) return null
 
@@ -600,6 +612,7 @@ export async function renderToHTML(
     headTags: await headTags(documentCtx),
     bodyTags: await bodyTags(documentCtx),
     htmlProps: await htmlProps(documentCtx),
+    isFallback,
     docProps,
     pathname,
     ampPath,