Support on-demand purge nextjs cache released in 12.1

[davidh99720]

Is your feature request related to a problem? Please describe.
Without the mechanism to purge the nextjs cache, it is a pitfall in production use and causing a lot of problems.

Describe the solution you'd like
Support the res.unstable_revalidate in api which can be controlled by backend to purge the cache and regenerate the page requested. It is supported in Nextjs 12.1, and it will be great if we can support it as well:
https://nextjs.org/blog/next-12-1

Describe alternatives you've considered
Disable the next.js cache totally. To be tested. Using CDN Cache instead with a purge api call.

Additional context
An example is in this video:
https://www.youtube.com/watch?v=BGexHR1tuOA&t=16s

[m0rph3u5-zip]

I am trying this function on my website (using next 12.1, sls-nextjs-component) and it return error 500. Can you confirm that it is not currently supported? ...and that I am not the problem?
Hope this feature will be implemented soon. It would be very useful and I could remove the revalidate timer.

[jlaramie]

This is the error I get when I tried to call res.unstable_revalidate

Error: Failed to revalidate /: Invariant: required internal revalidate method not passed to api-utils

[m0rph3u5-zip]

same response here!

[kigorw]

would be nice to have it? what other ways to consider? maybe calling revalidation lambda manually?

[mtwalsh]

Very new to Serverless Next.js but it seems like a lot of the groundwork for this has been completed in #1028. So perhaps all that's required is another Lambda function that can be called with a secret token along with a path, which would then trigger a message in the SQS queue for the Next.js Regeneration Lambda to handle. (No doubt easier said than done!)

Or seeing as our use-case for this would be on-demand from a CMS, we could manufacturer a SQS message from that CMS, although it seems like the Regenerate Lambda is expecting a CloudFront request object, which is not ideal to have to manufacture!

[kigorw]

I was able to trigger regeneration. Feel free to adapt this code to your needs until we get some better official approach.

import { triggerStaticRegeneration } from '@sls-next/lambda-at-edge/dist/lib/triggerStaticRegeneration'
import { defaultRegion, siteSQS, websiteBucket } from '../../config'
import * as s3 from './s3'

export async function getBuildId(): Promise<string> {
  const x = await s3.get('BUILD_ID', websiteBucket)

  return (x || '').toString()
}

export function getPageKey(buildId: string, key: string) {
  return `${getStaticPagesPath(buildId)}/${key}.html`
}
export function getStaticPagesPath(buildId: string) {
  return `static-pages/${buildId}`
}

export function getRegenerationOptions({
  queueName,
  buildId,
  page,
  lang,
  bucket,
  region,
  counter
}: {
  queueName: string
  buildId: string
  page: string
  lang: 'en' | 'ka'
  bucket: string
  region: string
  counter: number
}) {
  return {
    basePath: '',
    pagePath: 'pages/' + (page || 'index') + '.js',

    pageS3Path: '/' + lang + (page ? '/' + page : '') + '.html',
    storeName: bucket,
    storeRegion: region,
    request: {
      uri: '/' + lang + (page ? '/' + page : ''),
      origin: {
        s3: {
          region,
          domainName: `${bucket}.s3.${region}.amazonaws.com`,
          path: '/' + getStaticPagesPath(buildId)
        }
      }
    } as AWSLambda.CloudFrontRequest,
    eTag: Date.now() - 1000 + counter,
    lastModified: Date.now() - 1000 + counter,
    queueName
  }
}

export async function regeneratePage(lang: 'en' | 'ka', page: string, counter = 0) {
  const buildId = await getBuildId()
  console.log('queue', siteSQS)

  const options = getRegenerationOptions({
    queueName: siteSQS,
    buildId,
    lang,
    page,
    bucket: websiteBucket,
    region: defaultRegion,
    counter
  })

  console.log(options)

  const x = await triggerStaticRegeneration(options as any)

  console.log('event', x)
}

[mtwalsh]

Wow, thanks for the quick response @kigorw.

[m0rph3u5-zip]

I was able to trigger regeneration. Feel free to adapt this code to your needs until we get some better official approach.

import { triggerStaticRegeneration } from '@sls-next/lambda-at-edge/dist/lib/triggerStaticRegeneration'
import { defaultRegion, siteSQS, websiteBucket } from '../../config'
import * as s3 from './s3'

export async function getBuildId(): Promise<string> {
  const x = await s3.get('BUILD_ID', websiteBucket)

  return (x || '').toString()
}

export function getPageKey(buildId: string, key: string) {
  return `${getStaticPagesPath(buildId)}/${key}.html`
}
export function getStaticPagesPath(buildId: string) {
  return `static-pages/${buildId}`
}

export function getRegenerationOptions({
  queueName,
  buildId,
  page,
  lang,
  bucket,
  region,
  counter
}: {
  queueName: string
  buildId: string
  page: string
  lang: 'en' | 'ka'
  bucket: string
  region: string
  counter: number
}) {
  return {
    basePath: '',
    pagePath: 'pages/' + (page || 'index') + '.js',

    pageS3Path: '/' + lang + (page ? '/' + page : '') + '.html',
    storeName: bucket,
    storeRegion: region,
    request: {
      uri: '/' + lang + (page ? '/' + page : ''),
      origin: {
        s3: {
          region,
          domainName: `${bucket}.s3.${region}.amazonaws.com`,
          path: '/' + getStaticPagesPath(buildId)
        }
      }
    } as AWSLambda.CloudFrontRequest,
    eTag: Date.now() - 1000 + counter,
    lastModified: Date.now() - 1000 + counter,
    queueName
  }
}

export async function regeneratePage(lang: 'en' | 'ka', page: string, counter = 0) {
  const buildId = await getBuildId()
  console.log('queue', siteSQS)

  const options = getRegenerationOptions({
    queueName: siteSQS,
    buildId,
    lang,
    page,
    bucket: websiteBucket,
    region: defaultRegion,
    counter
  })

  console.log(options)

  const x = await triggerStaticRegeneration(options as any)

  console.log('event', x)
}

Hi, thank you so much for having
shared this code. I wanted to try to understand your approach. For example, I have a cms to manage data. Stack: Angular, Apigw lambda in nodejs. Is your approach frontend in nextjs api or is it a call you make in your backend?
It would be useful to see an example of parameters for this object:
{
queueName: siteSQS,
buildId,
lang,
page,
bucket: websiteBucket,
region: defaultRegion,
counter
}

This is my prototype: https://d2flbk08lhbnjs.cloudfront.net
I apologize for the question and if you can it seems so banal.
Thanks!

[RodrigoTomeES]

@kigorw hi, could you explain more about the implementation of your code? Thanks!

[kigorw]

@m0rph3u5-zip I make a call from my separate serverless lambda function.

@RodrigoTomeES I reused triggerStaticRegeneration function that sends SQS message. The main challenge was to configure it with right parameters.

[RodrigoTomeES]

@kigorw Hi thanks, and how I can deploy the lambda to work with serverless-next? I mean, once it's deployed, I'll have to call it every time, for example, a product is saved in Wordpress, right? But how I can deploy the lambda in AWS to work with the serverless-next bucket?

[rafaelone]

Hello guys, I'm going through this deployment problem on aws
My project has ISR but whenever I deploy to AWS it returns this error
"Error: Failed to revalidate /: Invariant: required internal revalidate method not passed to api-utils"
Do I have to configure something on the AWS side? Because I deployed to Versel and it worked

[sitezen]

Still getting the same error: "Invariant: required internal revalidate method not passed to api-utils" when trying to call
await res.revalidate(...)
from next.js api (output from API Lambda@Edge). Going to try to run the code above in new lambda function

[AlejandroJAguilarP]

@sitezen any luck? I'm facing the same issue and have not found any solution.