feat: reused responses demo

cypress/integration/default/env.spec.ts

@@ -1,4 +1,4 @@
-describe('Environment Varialbes', () => {
+describe('Environment Variables', () => {
   beforeEach(() => {
     cy.visit('/env')
   })
@@ -7,4 +7,4 @@ describe('Environment Varialbes', () => {
     cy.findByText('Greetings Vi')
     cy.findByText('Everything worked')
   })
-})
+})

cypress/integration/default/script.spec.ts

@@ -1,4 +1,4 @@
-describe('Environment Varialbes', () => {
+describe('Environment Variables', () => {
   beforeEach(() => {
     cy.intercept('GET', 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX').as('test-gtm')
     cy.visit('https://61f2c7c9fad2c70ee2737a81--netlify-plugin-nextjs-demo.netlify.app/script/')
@@ -7,4 +7,4 @@ describe('Environment Varialbes', () => {
   it('should load a script after interactive', () => {
     cy.wait('@test-gtm')
   })
-})
+})

demos/default/.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 netlify/functions
 .netlify/functions
 .netlify/cache
+cachedResponses/*

demos/default/package.json

@@ -34,6 +34,7 @@
     "husky": "^7.0.4",
     "if-env": "^1.0.4",
     "npm-run-all": "^4.1.5",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "v8": "^0.1.0"
   }
 }

demos/default/pages/getStaticProps/cachedResponses/[id].js

@@ -0,0 +1,60 @@
+import Link from 'next/link'
+import { writeFile, readFile } from 'fs/promises'
+import path from 'path'
+import { serialize, deserialize } from 'v8'
+
+const Show = ({ show, time }) => (
+  <div>
+    <p>
+      This page bulk fetches all data and individually caches that data to the filesystem during path generation in
+      getStaticPaths(). Each entry is pulled from the filesystem and referenced indivually in getStaticProps().
+    </p>
+    <p>This is a common optimization pattern for large sites.</p>
+    <p>Ids 1 and 2 are prerendered and others should 404.</p>
+    <hr />
+
+    <h1>Show #{show.id}</h1>
+    <p>{show.name}</p>
+    <p>Rendered at {time} (slowly)</p>
+    <hr />
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+)
+
+export async function getStaticPaths() {
+  // Set the paths we want to pre-render
+  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }]
+
+  // Series could be faster in some cases
+  Promise.all(
+    // This is a somewhat convoluted example because it's typically pagination (less network overhead) that leads people to this pattern.
+    paths.map(async (entry) => {
+      const { id } = entry.params
+      const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
+
+      const props = {
+        show: await res.json(),
+        time: new Date().toLocaleTimeString(),
+      }
+
+      await writeFile(path.join(process.cwd(), `demos/default/cachedResponses/${id}.db`), serialize(props))
+    }),
+  )
+
+  // We'll pre-render only these paths at build time.
+  // { fallback: false } means other routes should 404.
+  return { paths, fallback: false }
+}
+
+export async function getStaticProps({ params: { id } }) {
+  const data = await readFile(path.join(process.cwd(), `demos/default/cachedResponses/${id}.db`))
+
+  return {
+    props: deserialize(data),
+  }
+}
+
+export default Show