Server-side-render pages that use incremental static regeneration

Ideally, pages with incremental static regeneration (ISR) should be
statically pre-rendered and then re-rendered upon request at the
provided revalidation interval. This is currently not possible, because
we can only either have a static page or have a page that is server-side
rendered.

As a temporary workaround, we will be SSRing pages with ISR. This means
they will be less performant that regular static pages, but at least
their content will be fresh. We believe that a focus on the freshness of
the content matches the intention of the user more closely than a focus
on the page's performance.

Discussion: https://github.com/netlify/next-on-netlify/issues/35

Read more about ISR:
https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration

Author: FinnWoelm

tests/fixtures/pages/getStaticProps/dynamic.js renamed to cypress/fixtures/pages/getStaticProps/with-revalidate.js

@@ -139,6 +139,22 @@ const Index = ({ shows }) => (
           </a>
         </Link>
       </li>
+      <li>
+        <Link
+          href="/getStaticProps/withRevalidate/[id]"
+          as="/getStaticProps/withRevalidate/3"
+        >
+          <a>getStaticProps/withRevalidate/3 (dynamic route)</a>
+        </Link>
+      </li>
+      <li>
+        <Link
+          href="/getStaticProps/withRevalidate/[id]"
+          as="/getStaticProps/withRevalidate/4"
+        >
+          <a>getStaticProps/withRevalidate/4 (dynamic route)</a>
+        </Link>
+      </li>
       <li>
         <Link
           href="/getStaticProps/withFallback/[...slug]"

tests/fixtures/pages/getStaticProps/ssg/[id].js renamed to cypress/fixtures/pages/getStaticProps/withRevalidate/[id].js

@@ -269,6 +269,22 @@ describe("getStaticProps", () => {
       cy.get("p").should("contain", "Dancing with the Stars");
       cy.window().should("have.property", "noReload", true);
     });
+
+    context("with revalidate", () => {
+      it("loads TV show", () => {
+        cy.visit("/getStaticProps/with-revalidate");
+
+        cy.get("h1").should("contain", "Show #71");
+        cy.get("p").should("contain", "Dancing with the Stars");
+      });
+
+      it("loads TV shows when SSR-ing", () => {
+        cy.ssr("/getStaticProps/with-revalidate");
+
+        cy.get("h1").should("contain", "Show #71");
+        cy.get("p").should("contain", "Dancing with the Stars");
+      });
+    });
   });
 
   context("with dynamic route", () => {
@@ -367,6 +383,42 @@ describe("getStaticProps", () => {
         cy.window().should("have.property", "noReload", true);
       });
     });
+
+    context("with revalidate", () => {
+      it("loads TV show", () => {
+        cy.visit("/getStaticProps/withRevalidate/75");
+
+        cy.get("h1").should("contain", "Show #75");
+        cy.get("p").should("contain", "The Mindy Project");
+      });
+
+      it("loads TV shows when SSR-ing", () => {
+        cy.ssr("/getStaticProps/withRevalidate/75");
+
+        cy.get("h1").should("contain", "Show #75");
+        cy.get("p").should("contain", "The Mindy Project");
+      });
+
+      it("loads page props from data .json file when navigating to it", () => {
+        cy.visit("/");
+        cy.window().then((w) => (w.noReload = true));
+
+        // Navigate to page and test that no reload is performed
+        // See: https://glebbahmutov.com/blog/detect-page-reload/
+        cy.contains("getStaticProps/withRevalidate/3").click();
+
+        cy.get("h1").should("contain", "Show #3");
+        cy.get("p").should("contain", "Bitten");
+
+        cy.contains("Go back home").click();
+        cy.contains("getStaticProps/withRevalidate/4").click();
+
+        cy.get("h1").should("contain", "Show #4");
+        cy.get("p").should("contain", "Arrow");
+
+        cy.window().should("have.property", "noReload", true);
+      });
+    });
   });
 
   context("with catch-all route", () => {

cypress/fixtures/pages/index.js

@@ -55,32 +55,20 @@ const getAllPages = () => {
     // the JSON data to the Netlify Function.
     const dataRoute = dataRoutes.find(({ page }) => page === route);
     if (dataRoute)
-      alternativeRoutes.push(join("/_next/data", buildId, `${route === "/" ? "/index" : route}.json`));
+      alternativeRoutes.push(
+        join("/_next/data", buildId, `${route === "/" ? "/index" : route}.json`)
+      );
 
     pages.push(new Page({ route, type, filePath, alternativeRoutes }));
   });
 
-  const renderedDynamicSsgPages = {};
-
   // Parse SSG pages
-  Object.entries(staticSsgPages).forEach(([route, { srcRoute, dataRoute, initialRevalidateSeconds }]) => {
-    if (initialRevalidateSeconds && initialRevalidateSeconds != false) {
-      // Use SSR for SSG pages with revalidate
-      debugger;
-      if (renderedDynamicSsgPages[srcRoute])
-        return;
+  Object.entries(staticSsgPages).forEach(
+    ([route, { dataRoute, initialRevalidateSeconds }]) => {
+      // Ignore pages with revalidate, these will need to be SSRed and are
+      // handled a bit later
+      if (initialRevalidateSeconds) return;
 
-      if (srcRoute) {
-        const dynamicPage = dynamicSsgPages[srcRoute];
-        if (dynamicPage) {
-          dataRoute = dynamicPage.dataRoute;
-          route = srcRoute;
-          renderedDynamicSsgPages[route] = true;
-        }
-      }
-      const filePath = join("pages", `${route}.js`);
-      pages.push(new Page({ route, type: "ssr", filePath, alternativeRoutes: [dataRoute] }));
-    } else {
       pages.push(
         new Page({
           route,
@@ -90,28 +78,67 @@ const getAllPages = () => {
         })
       );
     }
-  });
+  );
   Object.entries(dynamicSsgPages).forEach(
     ([route, { dataRoute, fallback }]) => {
       // Ignore pages without fallback, these are already handled by the
       // static SSG page block above
-      if (fallback === false || renderedDynamicSsgPages[route]) return;
+      if (fallback === false) return;
 
-      const filePath = join("pages", `${route}.js`);
       pages.push(
         new Page({
           route,
-          filePath,
+          filePath: getFilePath(route, ".js"),
           type: "ssg-fallback",
           alternativeRoutes: [dataRoute],
         })
       );
     }
   );
+  Object.entries(staticSsgPages).forEach(
+    ([route, { dataRoute, srcRoute, initialRevalidateSeconds }]) => {
+      // Ignore pages without revalidate, these are already handled by the
+      // static SSG page block above
+      if (!initialRevalidateSeconds) return;
+
+      // If the page has a source route and that source file has already been
+      // initialized in the block above (dynamicSsgPages), do nothing.
+      // We do not need to add this route as an alternative route, because the
+      // dynamic SSG route already covers this static route.
+      if (srcRoute && pages.find((page) => page.route === srcRoute)) return;
+
+      // If the page has a source route and that source file has already been
+      // initialized in a previous iteration of this forEach loop, add the
+      // route and dataRoute as alternative routes
+      const filePath = getFilePath(srcRoute || route, ".js");
+      const existingPage = pages.find((page) => page.filePath == filePath);
+      if (existingPage) {
+        existingPage.alternativeRoutes.push(route);
+        existingPage.alternativeRoutes.push(dataRoute);
+        return;
+      }
+
+      // Otherwise, initialize the page
+      pages.push(
+        new Page({
+          route,
+          filePath,
+          type: "ssg-revalidate",
+          alternativeRoutes: [dataRoute],
+        })
+      );
+    }
+  );
 
   return pages;
 };
 
+// Get the file path for a given route with a specific extension:
+// /route -> pages/route.js
+// If the route is /, the file should be /index.js
+const getFilePath = (route, extension) =>
+  join("pages", route.replace(/^\/$/, "/index") + extension);
+
 // Represent a NextJS page
 class Page {
   constructor({ route, type, ...otherParams }) {
@@ -135,6 +162,10 @@ class Page {
     return this.type === "ssg-fallback";
   }
 
+  isSsgRevalidate() {
+    return this.type === "ssg-revalidate";
+  }
+
   routeFile(ext) {
     return `${this.route.replace(/^\/$/, "/index")}${ext}`;
   }

cypress/integration/default_spec.js

@@ -33,7 +33,11 @@ const setupRedirects = () => {
   // these static pages.
   // See: https://github.com/netlify/next-on-netlify/issues/26
   const pagesNeedingRedirect = allNextJsPages.filter(
-    (page) => isDynamicRoute(page.route) || page.isSsr() || page.isSsgFallback()
+    (page) =>
+      isDynamicRoute(page.route) ||
+      page.isSsr() ||
+      page.isSsgFallback() ||
+      page.isSsgRevalidate()
   );
 
   // Identify static and dynamically routed pages
@@ -65,18 +69,15 @@ const setupRedirects = () => {
       let to;
       const from = getNetlifyRoute(route);
 
-      // SSR pages
-      if (page.isSsr()) {
+      // SSR pages, SSG fallback pages (for non pre-rendered paths), and SSG
+      // pages with revalidate
+      if (page.isSsr() || page.isSsgFallback() || page.isSsgRevalidate()) {
         to = `/.netlify/functions/${getNetlifyFunctionName(page.filePath)}`;
       }
       // SSG pages
       else if (page.isSsg()) {
         to = page.htmlFile;
       }
-      // SSG fallback pages (for non pre-rendered paths)
-      else if (page.isSsgFallback()) {
-        to = `/.netlify/functions/${getNetlifyFunctionName(page.filePath)}`;
-      }
       // Pre-rendered HTML pages
       else if (page.isHtml()) {
         to = `/${path.relative("pages", page.filePath)}`;

lib/allNextJsPages.js

@@ -19,10 +19,10 @@ const setupSsrPages = () => {
     NETLIFY_FUNCTIONS_PATH
   );
 
-  // Get SSR pages and SSG fallback pages (which also need to be rendered
-  // server-side)
+  // Get SSR pages and SSG fallback pages and SSG revalidate pages (which also
+  // need to be rendered server-side)
   const ssrPages = allNextJsPages.filter(
-    (page) => page.isSsr() || page.isSsgFallback()
+    (page) => page.isSsr() || page.isSsgFallback() || page.isSsgRevalidate()
   );
 
   // Create Netlify Function for every page

lib/setupRedirects.js

@@ -6,6 +6,12 @@ exports[`Routing creates Netlify redirects 1`] = `
 /getServerSideProps/static  /.netlify/functions/next_getServerSideProps_static  200
 /_next/data/%BUILD_ID%/getServerSideProps/static.json  /.netlify/functions/next_getServerSideProps_static  200
 /  /.netlify/functions/next_index  200
+/getStaticProps/with-revalidate  /.netlify/functions/next_getStaticProps_withrevalidate  200
+/_next/data/%BUILD_ID%/getStaticProps/with-revalidate.json  /.netlify/functions/next_getStaticProps_withrevalidate  200
+/getStaticProps/withRevalidate/1  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
+/_next/data/%BUILD_ID%/getStaticProps/withRevalidate/1.json  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
+/getStaticProps/withRevalidate/2  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
+/_next/data/%BUILD_ID%/getStaticProps/withRevalidate/2.json  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
 /api/shows/:id  /.netlify/functions/next_api_shows_id  200
 /api/shows/:params/*  /.netlify/functions/next_api_shows_params  200
 /getServerSideProps/:id  /.netlify/functions/next_getServerSideProps_id  200
@@ -14,6 +20,8 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/getStaticProps/withFallback/:id.json  /.netlify/functions/next_getStaticProps_withFallback_id  200
 /getStaticProps/withFallback/:slug/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
 /_next/data/%BUILD_ID%/getStaticProps/withFallback/:slug/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
+/getStaticProps/withRevalidate/withFallback/:id  /.netlify/functions/next_getStaticProps_withRevalidate_withFallback_id  200
+/_next/data/%BUILD_ID%/getStaticProps/withRevalidate/withFallback/:id.json  /.netlify/functions/next_getStaticProps_withRevalidate_withFallback_id  200
 /shows/:id  /.netlify/functions/next_shows_id  200
 /shows/:params/*  /.netlify/functions/next_shows_params  200
 /static/:id  /static/[id].html  200"

lib/setupSsrPages.js

@@ -232,6 +232,40 @@ describe("SSG Pages with getStaticProps", () => {
   });
 });
 
+describe("SSG Pages with getStaticProps and revalidate", () => {
+  const functionsDir = join(PROJECT_PATH, "out_functions");
+
+  test("creates a Netlify Function for each page", () => {
+    expect(
+      existsSync(
+        join(
+          functionsDir,
+          "next_getStaticProps_withrevalidate",
+          "next_getStaticProps_withrevalidate.js"
+        )
+      )
+    ).toBe(true);
+    expect(
+      existsSync(
+        join(
+          functionsDir,
+          "next_getStaticProps_withRevalidate_id",
+          "next_getStaticProps_withRevalidate_id.js"
+        )
+      )
+    ).toBe(true);
+    expect(
+      existsSync(
+        join(
+          functionsDir,
+          "next_getStaticProps_withRevalidate_withFallback_id",
+          "next_getStaticProps_withRevalidate_withFallback_id.js"
+        )
+      )
+    ).toBe(true);
+  });
+});
+
 describe("Static Pages", () => {
   test("copies static pages to output directory", () => {
     const OUTPUT_PATH = join(PROJECT_PATH, "out_publish");

tests/__snapshots__/defaults.test.js.snap

@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+const Show = ({ show }) => (
+  <div>
+    <p>This page uses getStaticProps() to pre-fetch a TV show.</p>
+
+    <hr />
+
+    <h1>Show #{show.id}</h1>
+    <p>{show.name}</p>
+
+    <hr />
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+);
+
+export async function getStaticProps(context) {
+  const res = await fetch(`https://api.tvmaze.com/shows/71`);
+  const data = await res.json();
+
+  return {
+    props: {
+      show: data,
+    },
+    revalidate: 1,
+  };
+}
+
+export default Show;