add support for preview mode of pre-rendered pages using getStaticProps

Author: lindsaylevine

.gitignore

@@ -39,3 +39,9 @@ jspm_packages
 
 # OS
 .DS_Store
+
+# Local Netlify folder
+.netlify
+
+# Cypress Netlify Site ID
+cypress/fixtures/.netlify/state.json

cypress/fixtures/pages/api/enterPreviewStatic.js

@@ -0,0 +1,12 @@
+export default async function preview(req, res) {
+  const { query } = req;
+  const { id } = query;
+
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({});
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  res.writeHead(307, { Location: `/previewTest/static` });
+  res.end();
+}

cypress/fixtures/pages/index.js

@@ -230,6 +230,11 @@ const Index = ({ shows }) => (
           <a>previewTest/222</a>
         </Link>
       </li>
+      <li>
+        <Link href="/previewTest/static">
+          <a>previewTest/static</a>
+        </Link>
+      </li>
     </ul>
 
     <h1>6. Static Pages Stay Static</h1>

cypress/fixtures/pages/previewTest/static.js

@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+const StaticTest = ({ number }) => {
+  return (
+    <div>
+      <p>
+        This page uses getStaticProps() and is SSRed when in preview mode.
+        <br />
+        <br />
+        By default, it shows the TV show by ID (as static HTML).
+        <br />
+        But when in preview mode, it shows person by ID instead (SSRed).
+      </p>
+
+      <hr />
+
+      <h1>Number: {number}</h1>
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  );
+};
+
+export const getStaticProps = async ({ preview }) => {
+  let number;
+
+  // In preview mode, use odd number
+  if (preview) {
+    number = 3;
+  }
+  // In normal mode, use even number
+  else {
+    number = 4;
+  }
+
+  return {
+    props: {
+      number,
+    },
+  };
+};
+
+export default StaticTest;

cypress/integration/default_spec.js

@@ -529,12 +529,18 @@ describe("API endpoint", () => {
 });
 
 describe("Preview Mode", () => {
-  it("redirects to preview test page", () => {
+  it("redirects to preview test page with dynamic route", () => {
     cy.visit("/api/enterPreview?id=999");
 
     cy.url().should("include", "/previewTest/999");
   });
 
+  it("redirects to static preview test page", () => {
+    cy.visit("/api/enterPreviewStatic");
+
+    cy.url().should("include", "/previewTest/static");
+  });
+
   it("sets cookies on client", () => {
     Cypress.Cookies.debug(true);
     cy.getCookie("__prerender_bypass").should("not.exist");
@@ -546,7 +552,18 @@ describe("Preview Mode", () => {
     cy.getCookie("__next_preview_data").should("not.be", null);
   });
 
-  it("renders page in preview mode", () => {
+  it("sets cookies on client with static redirect", () => {
+    Cypress.Cookies.debug(true);
+    cy.getCookie("__prerender_bypass").should("not.exist");
+    cy.getCookie("__next_preview_data").should("not.exist");
+
+    cy.visit("/api/enterPreviewStatic");
+
+    cy.getCookie("__prerender_bypass").should("not.be", null);
+    cy.getCookie("__next_preview_data").should("not.be", null);
+  });
+
+  it("renders serverSideProps page in preview mode", () => {
     cy.visit("/api/enterPreview?id=999");
 
     if (Cypress.env("DEPLOY") === "local") {
@@ -557,7 +574,15 @@ describe("Preview Mode", () => {
     cy.get("p").should("contain", "Sebastian Lacause");
   });
 
-  it("can move in and out of preview mode", () => {
+  it("renders staticProps page in preview mode", () => {
+    // cypress local (aka netlify dev) doesn't support cookie-based redirects
+    if (Cypress.env("DEPLOY") !== "local") {
+      cy.visit("/api/enterPreviewStatic");
+      cy.get("h1").should("contain", "Number: 3");
+    }
+  });
+
+  it("can move in and out of preview mode for SSRed page", () => {
     cy.visit("/api/enterPreview?id=999");
 
     if (Cypress.env("DEPLOY") === "local") {
@@ -582,6 +607,45 @@ describe("Preview Mode", () => {
     cy.get("h1").should("contain", "Show #222");
     cy.get("p").should("contain", "Happyland");
   });
+
+  it("can move in and out of preview mode for static page", () => {
+    if (Cypress.env("DEPLOY") !== "local") {
+      cy.visit("/api/enterPreviewStatic");
+      cy.window().then((w) => (w.noReload = true));
+
+      cy.get("h1").should("contain", "Number: 3");
+
+      cy.contains("Go back home").click();
+
+      // Verify that we're still in preview mode
+      cy.contains("previewTest/static").click();
+      cy.get("h1").should("contain", "Number: 3");
+
+      cy.window().should("have.property", "noReload", true);
+
+      // Exit preview mode
+      cy.visit("/api/exitPreview");
+
+      // TO-DO: test if this is the static html?
+      // Verify that we're no longer in preview mode
+      cy.contains("previewTest/static").click();
+      cy.get("h1").should("contain", "Number: 4");
+    }
+  });
+
+  it("hits the prerendered html out of preview mode and netlify function in preview mode", () => {
+    if (Cypress.env("DEPLOY") !== "local") {
+      cy.request("/previewTest/static").then((response) => {
+        expect(response.headers["cache-control"]).to.include("public");
+      });
+
+      cy.visit("/api/enterPreviewStatic");
+
+      cy.request("/previewTest/static").then((response) => {
+        expect(response.headers["cache-control"]).to.include("private");
+      });
+    }
+  });
 });
 
 describe("pre-rendered HTML pages", () => {

lib/helpers/isSourceRouteWithFallback.js

@@ -0,0 +1,11 @@
+const getPrerenderManifest = require("./getPrerenderManifest");
+
+const { dynamicRoutes } = getPrerenderManifest();
+
+const isSourceRouteWithFallback = (srcRoute) => {
+  return Object.entries(dynamicRoutes).some(
+    ([route, { fallback }]) => route === srcRoute && fallback !== false
+  );
+};
+
+module.exports = isSourceRouteWithFallback;

lib/helpers/setupNetlifyFunctionForPage.js

@@ -1,4 +1,4 @@
-const { copySync } = require("fs-extra");
+const { copySync, existsSync } = require("fs-extra");
 const { join } = require("path");
 const {
   NEXT_DIST_DIR,
@@ -14,24 +14,21 @@ const setupNetlifyFunctionForPage = (filePath) => {
   const functionDirectory = join(NETLIFY_FUNCTIONS_PATH, functionName);
 
   // Copy function template
-  copySync(
-    FUNCTION_TEMPLATE_PATH,
-    join(functionDirectory, `${functionName}.js`),
-    {
-      overwrite: false,
-      errorOnExist: true,
-    }
+  const functionTemplateCopyPath = join(
+    functionDirectory,
+    `${functionName}.js`
   );
+  copySync(FUNCTION_TEMPLATE_PATH, functionTemplateCopyPath, {
+    overwrite: false,
+    errorOnExist: true,
+  });
 
   // Copy page
-  copySync(
-    join(NEXT_DIST_DIR, "serverless", filePath),
-    join(functionDirectory, "nextJsPage.js"),
-    {
-      overwrite: false,
-      errorOnExist: true,
-    }
-  );
+  const nextPageCopyPath = join(functionDirectory, "nextJsPage.js");
+  copySync(join(NEXT_DIST_DIR, "serverless", filePath), nextPageCopyPath, {
+    overwrite: false,
+    errorOnExist: true,
+  });
 };
 
 module.exports = setupNetlifyFunctionForPage;

lib/pages/getStaticProps/pages.js

@@ -6,15 +6,16 @@ const pages = [];
 // Get pages using getStaticProps
 const { routes } = getPrerenderManifest();
 
-// Parse pages
+// Parse static pages
 Object.entries(routes).forEach(
-  ([route, { dataRoute, initialRevalidateSeconds }]) => {
+  ([route, { dataRoute, initialRevalidateSeconds, srcRoute }]) => {
     // Ignore pages with revalidate, these will need to be SSRed
     if (initialRevalidateSeconds) return;
 
     pages.push({
       route,
       dataRoute,
+      srcRoute,
     });
   }
 );

lib/pages/getStaticProps/redirects.js

@@ -1,7 +1,36 @@
+const { join } = require("path");
+const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
+const getNetlifyFunctionName = require("../../helpers/getNetlifyFunctionName");
 const pages = require("./pages");
 
-// Pages with getStaticProps do not need redirects, unless they are using
-// fallback: true or a revalidation interval. Both are handled by other files.
+// Pages with getStaticProps (without fallback or revalidation) only need
+// redirects for handling preview mode.
 const redirects = [];
 
+pages.forEach(({ route, dataRoute, srcRoute }) => {
+  const relativePath = getFilePathForRoute(srcRoute || route, "js");
+  const filePath = join("pages", relativePath);
+  const functionName = getNetlifyFunctionName(filePath);
+
+  const conditions = ["Cookie=__prerender_bypass,__next_preview_data"];
+  const target = `/.netlify/functions/${functionName}`;
+
+  // Add one redirect for the page, but only when the NextJS
+  // preview mode cookies are present
+  redirects.push({
+    route,
+    target,
+    force: true,
+    conditions,
+  });
+
+  // Add one redirect for the data route, same conditions
+  redirects.push({
+    route: dataRoute,
+    target,
+    force: true,
+    conditions,
+  });
+});
+
 module.exports = redirects;

lib/pages/getStaticProps/setup.js

@@ -1,7 +1,10 @@
+const { join } = require("path");
 const { logTitle, logItem } = require("../../helpers/logger");
 const { NETLIFY_PUBLISH_PATH } = require("../../config");
 const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
+const isSourceRouteWithFallback = require("../../helpers/isSourceRouteWithFallback");
 const setupStaticFileForPage = require("../../helpers/setupStaticFileForPage");
+const setupNetlifyFunctionForPage = require("../../helpers/setupNetlifyFunctionForPage");
 const pages = require("./pages");
 
 // Copy pre-rendered SSG pages
@@ -11,7 +14,11 @@ const setup = () => {
     NETLIFY_PUBLISH_PATH
   );
 
-  pages.forEach(({ route, dataRoute }) => {
+  // Keep track of the functions that have been set up, so that we do not set up
+  // a function for the same file path twice
+  const filePathsDone = [];
+
+  pages.forEach(({ route, dataRoute, srcRoute }) => {
     logItem(route);
 
     // Copy pre-rendered HTML page
@@ -21,6 +28,19 @@ const setup = () => {
     // Copy page's JSON data
     const jsonPath = getFilePathForRoute(route, "json");
     setupStaticFileForPage(jsonPath, dataRoute);
+
+    // // Set up the Netlify function (this is ONLY for preview mode)
+    const relativePath = getFilePathForRoute(srcRoute || route, "js");
+    const filePath = join("pages", relativePath);
+
+    // Skip if we have already set up a function for this file
+    // or if the source route has fallback: true
+    if (filePathsDone.includes(filePath) || isSourceRouteWithFallback(srcRoute))
+      return;
+
+    logItem(filePath);
+    setupNetlifyFunctionForPage(filePath);
+    filePathsDone.push(filePath);
   });
 };