ISR as default

Official Nextjs documentation

We decided on having ISR by default due to it being a middle ground between Server Side Rendering and Static Site Generation.

With ISR, pages get their cache invalidated every x amount of time and marks it as stale. Once someone visits the site outside of that time window, Nextjs regenerates the page for the next visitor with the latest content.

ISR strategies

No revalidation time + revalidate on demand - highly recommended

By not setting a revalidate time but ensuring we have a revalidation endpoint that revalidates pages on demand when they are published in storyblok, we can ensure maximum performance.

Inside getStaticProps, you do not need to specify revalidate to use on-demand revalidation. If revalidate is omitted, Next.js will use the default value of false (no revalidation) and only revalidate the page on-demand when revalidate() is called.

ISR on demand docs

How to add revalidation endpoint to nextjs with Storyblok

import type { NextApiRequest, NextApiResponse } from 'next';
import * as crypto from 'crypto';
const Revalidate = async (req: NextApiRequest, res: NextApiResponse) => {
  // Check for secret to confirm this is a valid request
  try {
    verifySignature(req.body, req.headers['webhook-signature']);
  } catch {
    return res.status(401).json({ message: 'Invalid token' });
  }
  try {
    const { full_slug } = req.body;
    await res.revalidate(`/${full_slug}/`);
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
};
const verifySignature = (body, signature) => {
  // webhookSecret configured in Storyblok settings
  const webhookSecret = process.env.STORYBLOK_PREVIEW_SECRET;
  let bodyHmac = crypto
    .createHmac('sha1', webhookSecret)
    .update(JSON.stringify(body))
    .digest('hex');
  if (bodyHmac !== signature) {
    throw new Error('Signature mismatch!');
  }
};
export default Revalidate;

Go to webhooks in storyblok settings and make sure to create a webhook secret. Point it to your app /api/webhooks/revalidate and it should be working from then on.

Slow revalidation times - recommended

By having a slow revalidation time (1 day for example), we can ensure content still gets regenerated quickly and don’t lose any performance. There will be 1 person per day that will get the page server side rendered only.

Recommended value revalidate: 86400 .

Fast revalidation times - not recommended

With a fast revalidation time, you get the newest content quickly but sacrifice in performance. Once the cache is marked as stale, Nextjs has to render the page completely for the next visitor.

Imagine you have a visitor every second and a revalidate time of 10 seconds. After those 10 seconds, the 11th visitor comes to your page and cache gets marked as stale. The 12th visitor will come in and get an SSR version of the page which then gets cached for the next 10 seconds again.

We don’t like having fast revalidation time with marketing sites because the content is not time critical.

i18n Settings Page