Issue with incremental static generation in version 13 not functioning as expected

Is ISR working for anyone in the NextJS 13 Beta version?

I have set revalidate to 15 as follows.

export const revalidate = 15;

However, even after running `npm run build`, the page still remains a statically generated site (SSG).

The symbol is showing up as an empty white space.

What am I doing wrong? I expected the page to utilize ISR.

P.S: I also attempted using fetch api with { next: { revalidate: 15 } }, but the result was the same.

After running npm run build, this is the output in the terminal.

https://i.sstatic.net/vozwV.png

This page is not a dynamic route.

The file location is app/page.jsx so it should open at localhost:3000

import axios from "axios";
import Card from "@/components/Card";

export const revalidate = 15; // doesn't seem to be having any effect

const AllCards = async () => {
  const url = 'http://localhost:3001/cards';
  const fetchCards = await axios.get(url);
  const cards = fetchCards.data.data;
  return (
    <main>
      <div className='text-3xl font-bold underline text-center mb-4 mt-4'>
        All Cards
      </div>
      <div className='flex flex-wrap justify-center gap-2'>
        {cards.map(c => <Card vanity={c.vanity} art={c.art} id={c.id} />)}
      </div>
    </main>
  );
}

export default AllCards;

Answer №1

In my opinion, it would be beneficial to include:

export const generateStaticParams = []

Personally, I always provide an empty array even when there are no parameters specified. –

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on effectively utilizing a function within middleware in Node.js

I've successfully used the checkAuth function with this format: router.get('/login', checkAuth, function(){ }) Now I'm wondering how to utilize the checkAuth function with this format: routes file router.get('/login', con ...

Changing a callback function into a promise in Node.js for OpenTok integration

MY FUNCTIONAL CODE (SUCCESSFULLY WORKING!) I have developed a function with callback to generate tokens and create sessions for OpenTok. This function is then exported to the application. The function //Dependencies var opentok = require('./ot&ap ...

Can you eliminate data errors within a Vue component?

In my Vue instance, I will be making a multitude of API calls to modify various variables. The initial value of these variables is not crucial. I had hoped there might be a way to avoid defining them upon the creation of the vm, but this approach doesn&ap ...

Tips for aligning the text of a typography element in Material-UI when its parent is fixed

Introduction to Home Component const HomeComponent = ({ mode, setMode }) => { return ( <Box m={-1} sx={{overflowX:'hidden'}}> <Navber/> <Stack direction="row" spacing={2} justifyContent="space-be ...

The issue of WooCommerce GraphQL API not returning a comprehensive list of product variations is causing frustration among users

I'm currently working on a project that involves WooCommerce integration with WordPress and utilizing GraphQL to retrieve product variations. One issue I've encountered is that the GraphQL API is only returning 10 out of 12 variations for a speci ...

How can I log an object definition and text in the same console.log statement?

Looking for a way to correctly display "obj" in the same string as "note." Here's my JavaScript code: console.log(obj);// [query: "wordOfTheDay"] console.log(note + " : " + obj ); // obj does not show up I want to ensure that "obj" displays properly ...

Disabling hover effects in Chart.js: A step-by-step guide

Is there a way to disable hover effects, hover options, and hover links on a chart using chart.js? Here is the code I have for setting up a pie chart: HTML.. <div id="canvas-holder" style="width:90%;"> <canvas id="chart-area" /> </div ...

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome. My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a ...

Encountering the error message "Attempting to access properties of undefined (specifically 'map')". Despite having the array properly declared and imported

I am facing an issue while trying to iterate through an array and display names for each person. Despite declaring the array properly, it is returning as undefined which is causing the .map function to fail. Can you help me figure out where I am making a m ...

Is there anybody who can assist me with ${}?

Having an issue with using ${'variable'+i} in a loop function. The goal is to call each function from a loop. Explored template literals but couldn't find a solution for this specific problem. Desired format: ${'variable'+i} // (w ...

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

What is the best method for sending the styled and checked option via email?

Just finished customizing the checkboxes on my contact form at cleaners.se/home. Here's my question: If I select "telefon," how can I ensure that this option is sent to my email? In Contact Form 7, I used to simply type a shortcode. Is there a simila ...

Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

I am currently learning JavaScript and have been following a course on Domestika that requires me to install the Tweakpane package. I usually use Git Bash for installing packages, and I have successfully installed others this way before. Here is the proces ...

Indicate the highest value on Amcharts by drawing a line

I am currently working on plotting a graph that involves a significant amount of data. I have around 96 plots per day, and users can fetch data for up to a maximum range of 62 days. To implement this, I am utilizing Amcharts, but I have encountered an issu ...

When the page is refreshed, the ContextProvider fails to mount

For the complete code, you can view it on codesandbox. Within my countries API application, I have implemented two Route components - <> <Header/> <Router> <Switch> <CountriesDataProvider> ...

An issue arises when data from the parent ajax call is being referenced

I am encountering a situation where I have nested ajax functions within each other. $.ajax({ url: '../...', type: 'POST', dataType: 'JSON', ...

Replace or update the current array of objects that align with the incoming array

I've been struggling to figure out how to find and replace an array that matches the existing one. The issue lies with using the some method. Here is the current array: let existingData = [{ id: 1, product: 'Soap', price: ' ...

How to keep your vue-router up-to-date

As a newcomer to vuejs, I am using vue cli 3 for my project which consists of various components. One of the components is a menu component where I retrieve all the menu items from an API (code provided below). I have integrated vue-router for routing purp ...

Dealing With HttpClient and Asynchronous Functionality in Angular

I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...

Turn off all animations for a specific div or HTML page

Whenever I add an item to a div, there's this strange flashing animation happening. It's like a blink or flash that updates the div with new data. I'm not entirely sure if it's a jQuery animation or not. Is there any way to disable all ...