feat: refresh hooks api implementation

cypress/integration/default/dynamic-routes.spec.ts

@@ -21,6 +21,12 @@ describe('Static Routing', () => {
       expect(res.body).to.contain('Dancing with the Stars')
     })
   })
+  it('revalidates page via refresh hooks on a static route', () => {
+    cy.request({ url: '/api/revalidate/' }).then((res) => {
+      expect(res.status).to.eq(200)
+      expect(res.body).to.equal({ revalidated: true })
+    })
+  })
 })
 
 describe('Dynamic Routing', () => {

demos/default/pages/api/revalidate.js

@@ -0,0 +1,10 @@
+export default async function handler(req, res) {
+  try {
+    const path = '/getStaticProps/with-revalidate/'
+    await res.revalidate(path)
+    console.log('Revalidated:', path)
+    return res.json({ code: 200, message: 'success' })
+  } catch (err) {
+    return res.status(500).send({ code: 500, message: err.message })
+  }
+}

demos/default/pages/getStaticProps/with-revalidate.js

@@ -1,8 +1,8 @@
 import Link from 'next/link'
 
-const Show = ({ show }) => (
+const Show = ({ show, time }) => (
   <div>
-    <p>This page uses getStaticProps() to pre-fetch a TV show.</p>
+    <p>This page uses getStaticProps() to pre-fetch a TV show at {time}</p>
 
     <hr />
 
@@ -22,9 +22,10 @@ export async function getStaticProps(context) {
   return {
     props: {
       show: data,
+      time: new Date().toISOString(),
     },
     // ODB handler will use the minimum TTL=60s
-    revalidate: 1,
+    revalidate: 300,
   }
 }
 

package.json

@@ -100,6 +100,7 @@
     "testMatch": [
       "**/test/**/*.spec.js",
       "**/test/**/*.spec.ts",
+      "**/*.test.ts",
       "!**/test/e2e/**",
       "!**/test/fixtures/**",
       "!**/test/sample/**",

packages/runtime/src/helpers/functions.ts

@@ -47,6 +47,10 @@ export const generateFunctions = async (
     await ensureDir(join(functionsDir, functionName))
     await writeFile(join(functionsDir, functionName, `${functionName}.js`), apiHandlerSource)
     await copyFile(bridgeFile, join(functionsDir, functionName, 'bridge.js'))
+    await copyFile(
+      join(__dirname, '..', '..', 'lib', 'templates', 'server.js'),
+      join(functionsDir, functionName, 'server.js'),
+    )
     await copyFile(
       join(__dirname, '..', '..', 'lib', 'templates', 'handlerUtils.js'),
       join(functionsDir, functionName, 'handlerUtils.js'),
@@ -67,6 +71,10 @@ export const generateFunctions = async (
     await ensureDir(join(functionsDir, functionName))
     await writeFile(join(functionsDir, functionName, `${functionName}.js`), handlerSource)
     await copyFile(bridgeFile, join(functionsDir, functionName, 'bridge.js'))
+    await copyFile(
+      join(__dirname, '..', '..', 'lib', 'templates', 'server.js'),
+      join(functionsDir, functionName, 'server.js'),
+    )
     await copyFile(
       join(__dirname, '..', '..', 'lib', 'templates', 'handlerUtils.js'),
       join(functionsDir, functionName, 'handlerUtils.js'),

packages/runtime/src/templates/getHandler.ts

@@ -5,10 +5,7 @@ import { outdent as javascript } from 'outdent'
 
 import type { NextConfig } from '../helpers/config'
 
-import type { NextServerType } from './handlerUtils'
-
 /* eslint-disable @typescript-eslint/no-var-requires */
-
 const { promises } = require('fs')
 const { Server } = require('http')
 const path = require('path')
@@ -22,9 +19,9 @@ const {
   getMaxAge,
   getMultiValueHeaders,
   getPrefetchResponse,
-  getNextServer,
   normalizePath,
 } = require('./handlerUtils')
+const { NetlifyNextServer } = require('./server')
 /* eslint-enable @typescript-eslint/no-var-requires */
 
 type Mutable<T> = {
@@ -68,21 +65,21 @@ const makeHandler = (conf: NextConfig, app, pageRoot, staticManifest: Array<[str
   // We memoize this because it can be shared between requests, but don't instantiate it until
   // the first request because we need the host and port.
   let bridge: NodeBridge
-  const getBridge = (event: HandlerEvent): NodeBridge => {
+  const getBridge = (event: HandlerEvent, context: HandlerContext): NodeBridge => {
     if (bridge) {
       return bridge
     }
     const url = new URL(event.rawUrl)
     const port = Number.parseInt(url.port) || 80
     base = url.origin
 
-    const NextServer: NextServerType = getNextServer()
-    const nextServer = new NextServer({
+    const nextServer = new NetlifyNextServer({
       conf,
       dir,
       customServer: false,
       hostname: url.hostname,
       port,
+      netlifyRevalidateToken: context.clientContext?.custom?.odb_refresh_hooks,
     })
     const requestHandler = nextServer.getRequestHandler()
     const server = new Server(async (req, res) => {
@@ -119,7 +116,7 @@ const makeHandler = (conf: NextConfig, app, pageRoot, staticManifest: Array<[str
       process.env._NETLIFY_GRAPH_TOKEN = graphToken
     }
 
-    const { headers, ...result } = await getBridge(event).launcher(event, context)
+    const { headers, ...result } = await getBridge(event, context).launcher(event, context)
 
     // Convert all headers to multiValueHeaders
 
@@ -180,6 +177,7 @@ export const getHandler = ({ isODB = false, publishDir = '../../../.next', appDi
   // We copy the file here rather than requiring from the node module
   const { Bridge } = require("./bridge");
   const { augmentFsModule, getMaxAge, getMultiValueHeaders, getPrefetchResponse, getNextServer, normalizePath } = require('./handlerUtils')
+  const { NetlifyNextServer } = require('./server')
 
   ${isODB ? `const { builder } = require("@netlify/functions")` : ''}
   const { config }  = require("${publishDir}/required-server-files.json")

packages/runtime/src/templates/handlerUtils.ts

@@ -1,4 +1,5 @@
 import fs, { createWriteStream, existsSync } from 'fs'
+import { ServerResponse } from 'http'
 import { tmpdir } from 'os'
 import path from 'path'
 import { pipeline } from 'stream'
@@ -222,3 +223,46 @@ export const normalizePath = (event: HandlerEvent) => {
   // Ensure that paths are encoded - but don't double-encode them
   return new URL(event.rawUrl).pathname
 }
+
+export const netlifyApiFetch = <T>({
+  endpoint,
+  payload,
+  token,
+  method = 'GET',
+}: {
+  endpoint: string
+  payload: unknown
+  token: string
+  method: 'GET' | 'POST'
+}): Promise<T> =>
+  new Promise((resolve, reject) => {
+    const body = JSON.stringify(payload)
+
+    const req = https.request(
+      {
+        hostname: 'api.netlify.com',
+        port: 443,
+        path: `/api/v1/${endpoint}`,
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          'Content-Length': body.length,
+          Authorization: `Bearer ${token}`,
+        },
+      },
+      (res: ServerResponse) => {
+        let data = ''
+        res.on('data', (chunk) => {
+          data += chunk
+        })
+        res.on('end', () => {
+          resolve(JSON.parse(data))
+        })
+      },
+    )
+
+    req.on('error', reject)
+
+    req.write(body)
+    req.end()
+  })

packages/runtime/src/templates/server.test.ts

@@ -0,0 +1,63 @@
+import { mockRequest } from 'next/dist/server/lib/mock-request'
+
+import { netlifyApiFetch, getNextServer, NextServerType } from './handlerUtils'
+import { NetlifyNextServer } from './server'
+
+const NextServer: NextServerType = getNextServer()
+
+jest.mock('./handlerUtils', () => {
+  const originalModule = jest.requireActual('./handlerUtils')
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    netlifyApiFetch: jest.fn(({ payload }) => {
+      switch (payload.paths[0]) {
+        case '/getStaticProps/with-revalidate/':
+          return Promise.resolve({ code: 200, message: 'Revalidated' })
+        case '/not-a-path/':
+          return Promise.resolve({ code: 404, message: '404' })
+        default:
+          return Promise.reject(new Error('Error'))
+      }
+    }),
+  }
+})
+
+jest.spyOn(NextServer.prototype, 'getRequestHandler').mockImplementation(() => () => Promise.resolve())
+
+Object.setPrototypeOf(NetlifyNextServer, jest.fn())
+
+const nextServer = new NetlifyNextServer({ conf: {}, dev: false })
+const requestHandler = nextServer.getRequestHandler()
+
+describe('the netlify next server', () => {
+  it('intercepts a request containing an x-prerender-revalidate header', async () => {
+    const { req: mockReq, res: mockRes } = mockRequest(
+      '/getStaticProps/with-revalidate/',
+      { 'x-prerender-revalidate': 'test' },
+      'GET',
+    )
+    await requestHandler(mockReq, mockRes)
+    expect(netlifyApiFetch).toHaveBeenCalled()
+  })
+
+  it('silently revalidates and returns the original handler response', async () => {
+    const { req: mockReq, res: mockRes } = mockRequest(
+      '/getStaticProps/with-revalidate/',
+      { 'x-prerender-revalidate': 'test' },
+      'GET',
+    )
+    await expect(requestHandler(mockReq, mockRes)).resolves.toBe(undefined)
+  })
+
+  it('throws an error when the revalidate API returns a 404 response', async () => {
+    const { req: mockReq, res: mockRes } = mockRequest('/not-a-path/', { 'x-prerender-revalidate': 'test' }, 'GET')
+    await expect(requestHandler(mockReq, mockRes)).rejects.toThrow('Unsuccessful revalidate - 404')
+  })
+
+  it('throws an error when the revalidate API is unreachable', async () => {
+    const { req: mockReq, res: mockRes } = mockRequest('', { 'x-prerender-revalidate': 'test' }, 'GET')
+    await expect(requestHandler(mockReq, mockRes)).rejects.toThrow('Unsuccessful revalidate - Error')
+  })
+})

packages/runtime/src/templates/server.ts

@@ -0,0 +1,62 @@
+import { NodeRequestHandler, Options } from 'next/dist/server/next-server'
+
+// import { netlifyRoutesForNextRoute } from '../helpers/utils'
+
+import { netlifyApiFetch, getNextServer, NextServerType } from './handlerUtils'
+
+const NextServer: NextServerType = getNextServer()
+
+interface NetlifyNextServerOptions extends Options {
+  netlifyRevalidateToken?: string
+}
+
+class NetlifyNextServer extends NextServer {
+  private netlifyRevalidateToken?: string
+
+  public constructor(options: NetlifyNextServerOptions) {
+    super(options)
+    this.netlifyRevalidateToken = options.netlifyRevalidateToken
+  }
+
+  public getRequestHandler(): NodeRequestHandler {
+    const handler = super.getRequestHandler()
+    return async (req, res, parsedUrl) => {
+      // on-demand revalidation request
+      if (req.headers['x-prerender-revalidate']) {
+        await this.netlifyRevalidate(req.url)
+      }
+      return handler(req, res, parsedUrl)
+    }
+  }
+
+  private async netlifyRevalidate(url: string) {
+    try {
+      // call netlify API to revalidate the path, including its data routes
+      const result = await netlifyApiFetch<{ ok: boolean; code: number; message: string }>({
+        endpoint: `sites/${process.env.SITE_ID}/refresh_on_demand_builders`,
+        payload: {
+          paths: [
+            url,
+            // ...netlifyRoutesForNextRoute({
+            //   route: url,
+            //   buildId: this.buildId,
+            //   i18n: this.nextConfig.i18n,
+            // }),
+            // url.endsWith('/') ? `${url.slice(0, -1)}.rsc/` : `${url}.rsc`,
+          ],
+          domain: this.hostname,
+        },
+        token: this.netlifyRevalidateToken,
+        method: 'POST',
+      })
+      if (result.ok !== true) {
+        throw new Error(result.message)
+      }
+    } catch (error) {
+      console.log('Error revalidating', error.message)
+      throw error
+    }
+  }
+}
+
+export { NetlifyNextServer }