The Challenge of Refreshing Static Site Generation in NextJS Version 13

Question

The Challenge of Refreshing Static Site Generation in NextJS Version 13

I've encountered a problem with updating data on a basic data page. The situation is simple: there's a page that shows category data and another page that allows editing of the same data. After making edits and returning to the list page, I expect the list to reflect the changes. However, since it's a Static Site Generation (SSG) page, it generates static data at build time.

import prismadb from "@/lib/prismadb";
import CategoriesClient from "./components/client";

export const dynamic = "force-dynamic";

export default async function Categories(res) {
  let categories;
  categories = await prismadb.category.findMany({
    orderBy: {
      createdAt: "desc",
    },
  });

  const formattedCategories = categories.map((category) => ({
    id: category.id,
    name: category.name,
    isActive: category.isActive,
  }));

  return (
    <>
      <CategoriesClient data={formattedCategories} />
    </>
  );
}

  async function onSubmit(data) {
    try {
      setLoading(true);
      if (initialData) {
        await axios.patch(`/api/categories/${params.categoryId}`, data);
      } else {
        await axios.post(`/api/categories`, data);
      }
      router.refresh();
      router.push(`/categories`);
      toast.success(successMessage);
    } catch (err) {
      toast.error(`An error as occurred: ${err.response.data}`);
    } finally {
      setLoading(false);
    }
  }

I have attempted using the revalidate property on the list page, but it only works with a hard refresh, not with the router which I am currently using.

export const revalidate = 1;

At present, I'm utilizing force-dynamic to make the page dynamic. However, when I navigate to the page through the router or Next.js Link, everything functions correctly. Yet, when I manually refresh the page with F5 or input the link directly, I encounter a 500 error (only in the production environment on Netlify, local machine works fine).

Is there a solution to ensure that the page updates accurately in all scenarios, including manual refreshes?

I would greatly appreciate any assistance with this issue as I have been struggling with it for days.

javascript next.js netlify next.js13

Answer 1

Answer №1

One key advantage of Static site generation is its speed, as it provides a pre-built page for immediate display to the client upon request. Additionally, next/router avoids hard reloads to maintain the properties of a single-page application.

To address this issue, there are two potential solutions: 1- Stick with static site generation but update the client-side code to trigger a revalidation for the page using a revalidation API instead of the revalidate key. An example implementation:

export default async function handler(req, res) {
  // Verify the secret token for authentication
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
 
  try {
    await res.revalidate('/path-to-revalidate') // Update with actual path
    return res.json({ revalidated: true })
  } catch (err) {
    return res.status(500).send('Error revalidating')
  }
}

Invoke this API whenever changes impact the page and refer to the full documentation here. In the client-side, utilize the useEffect hook to call the data API within an empty dependency array for router refresh.

2- If modifications occur frequently, consider utilizing server-side rendering over static generation.

Answer 2

One key advantage of Static site generation is its speed, as it provides a pre-built page for immediate display to the client upon request. Additionally, next/router avoids hard reloads to maintain the properties of a single-page application.

To address this issue, there are two potential solutions: 1- Stick with static site generation but update the client-side code to trigger a revalidation for the page using a revalidation API instead of the revalidate key. An example implementation:

export default async function handler(req, res) {
  // Verify the secret token for authentication
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
 
  try {
    await res.revalidate('/path-to-revalidate') // Update with actual path
    return res.json({ revalidated: true })
  } catch (err) {
    return res.status(500).send('Error revalidating')
  }
}

Invoke this API whenever changes impact the page and refer to the full documentation here. In the client-side, utilize the useEffect hook to call the data API within an empty dependency array for router refresh.

2- If modifications occur frequently, consider utilizing server-side rendering over static generation.

The Challenge of Refreshing Static Site Generation in NextJS Version 13

Answer №1

Similar questions

There seems to be an issue with AppModule in your code. The error message states that it is not recognized as an NgModule and the problem

Error in setting cookies using Javascript document.cookie on iOS with cordova-plugin-ionic-webview

Utilizing styled-components or personalized components alongside cypress

What could be causing my function to not register with my EventListener?

Does a document.onmodification event exist, or something similar?

Building module dependencies in the Dojo dojo

You cannot convert a function to a string while utilizing axios get in nuxtServerInit

Authentication through Auth0 login

Mix up table data cells using Javascript/jQuery

react state change not triggering re-render of paragraph

Enhancing functionality by updating a function to accept an object as input instead of individual key:value pairs in TypeScript

There was a Runtime Error that occurred, stating a TypeError: It is not possible to access properties of an undefined value (specifically

Scraping JavaScript Content Webpages with VBA

Using this functionality on a ReactJS Functional Component

Challenge with Merging Bootstrap Clean Blog Template with React Application

Ways to verify whether an array contains any of the specified objects and then store all those objects in Supabase

Retrieve a string value in Next.JS without using quotation marks

Issue with displaying dates correctly when retrieving data from an external CSV using Highcharts (Highstock)

how to name a collection variable in MongoDB shell using JavaScript

NavLinkButton - add style when active or selected