The issue with Next.js Incremental Static Regeneration causing changes to not appear on the page until manually reloading

Currently working on incorporating Incremental Static Regeneration into a Next.js project.

The index page displays a list of posts with the revalidate: 1 parameter in the getStaticProps() function.

Another page contains a form for editing post titles. Upon submission, an AJAX call is made to update the record in the database.

However, after editing a post title and returning to the post list page using next/link, the data appears outdated. Reloading the page still shows old information, but upon clicking the link again, the data is finally updated.

Wondering if I might be overlooking something or if this behavior is to be expected?

For reference, there is a repository that replicates this issue (using "product" instead of "post"):

Answer №1

It seems that the behavior you are experiencing is intentional (https://youtu.be/abc123?t=456). When a new request is made (such as reloading), Next.js initially serves the old page while simultaneously generating the new page to ensure that subsequent requests will reflect the updated information.

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

Struggling with handling various active states in ReactJS?

Good day to all my fellow stackOverflowers! I'm looking for advice on how to maintain the independence of active states when clicked. I'm struggling to prevent them from affecting each other. Each button starts with an active status of false by d ...

The Angular JavaScript page successfully compiles, yet displays only a blank screen

I am facing an issue with my Angular app where it compiles successfully, but the HTML page appears blank and my application is not displaying properly. I have encountered similar problems in the past which were often related to Imports, but this time I&apo ...

The randomly generated data retrieved through AJAX in the form of JSON is stored haphazardly within

I am currently working on retrieving details of various Twitch channel names stored in an array called user_arr. The goal is to fetch their information from twitch.tv. Below you can find the code, along with some insights: $(document).ready(function(){ v ...

Error: Fancyapps/ui and Next.js encounter a runtime issue with an unexpected token 'export'

Currently utilizing NextJs and presenting my package file details in the block below: "scripts": { "dev": "next dev", "build": "next build", "start": "next start", " ...

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

Loop through a JSON object to dynamically update the value of a specific key

I have a JSON object with keys and values, where some of the values are empty strings. I want to replace those empty values with the corresponding key name. However, when trying to get the value of a key within the loop, it returns undefined. JSON: "Forg ...

Having issues with my script in Node.js where I am getting a TypeError when trying to make a https request. How can I properly

I am attempting to execute a curl request using node.js curl \ -H 'Authorization: ABC XYZ' \ 'https://api.wit.ai/message?q=Test' (Authorization has been replaced) This is the node.js code I tried: var https = require(" ...

Convert the data into a format that is compatible with JavaScript

Having trouble extracting a value from json and placing it into my controller. I want to assign the membership value of 8 to $scope.value = data.membership; Service call in JS: .service('getMembership', function ($http, SERVER_URL) { r ...

Saving a JavaScript array as a Redis list: A step-by-step guide

I'm trying to figure out how to save array values individually in a Redis list instead of saving the whole array as a single value. Any suggestions on how to achieve this? P.S. Please excuse my poor English. var redis = require('redis'), ...

Run the .map() method at regular intervals of 'x' seconds

I have a certain function in mind: function fetchDesign (items) { items.map(item => item.classList.add('selected')) // additional code here } Is there a way to trigger item.classList.add('selected') every 2 seconds, while ensu ...

How to Align Bootstrap 4 Navbar Brand Logo Separate from Navbar Toggler Button

Can anyone help me with center aligning navbar-brand? When I right align navbar-toggler for mobile devices, it causes the logo to be off-center. Is there a way to independently align these two classes, and if so, how can I achieve this? <nav class="n ...

How can I eliminate the apostrophe from the hidden field's value using JavaScript?

Currently, I am using JavaScript to read a hidden field value. However, the value I am obtaining is wrapped within single quotes ('78963'). How can I eliminate this single quote and retrieve the value without it (78963)? Any assistance in resolvi ...

The compatibility between Laravel's @vite('resources/js/app.js') and the froala editor plugin seems to be causing issues

I have incorporated a Vue.js based commenting system and inbox messages system in my Laravel website. Additionally, I am utilizing a wysiwyg editor (Froala Editor) in my forms for uploading projects. The issue I am facing is that the Froala Editor does no ...

Starting service upon startup in Angularjs

I am looking to retrieve configuration data from the server and store it in the global scope within my AngularJS application. My app operates in multiple modes such as development and production, with different external services being used depending on the ...

Transform each array into individual objects

I am a beginner in javascript and I find arrays and objects to be a bit challenging. Currently, I am facing a hurdle with them. Here is the array I'm working with: [ '5', '13', '16', '22', '24' ] 1st ...

The error message "ch.match is not a function" appeared in the Javascript code

Here are two functions that I need help with: //Function A var ltrToNato = function(ch) { var x = ch; var nato = ('{"A": "Alpha", "B": "Bravo", "C": "Charlie", "D": "Delta", "E": "Echo", "F": "Foxtrot", "G": "Golf", "H": "Hotel", "I": "India" ...

Error message: Cannot bring in JavaScript category. TypeError: "class" does not work as a constructor

I'm encountering a strange problem when trying to import my class into another module. Everything works fine when I import the worker module in my start.js file and run the script smoothly. But, the issue arises when the socket module attempts to impo ...

The type "Props" is considered invalid in Next.js version 13

When attempting to execute yarn build for my next project, I encountered an error during the build process. Type error: The layout "app/dashboard/tpp/components/layout.tsx" has an invalid "default" export: Type "Props" is not valid. Does anyone have any i ...

Understanding JSON Arrays using jQuery

I've been attempting to display JSON objects in the console, but unfortunately, I'm facing some issues. The JSON data is obtained from a small API that I crafted using PHP. Here's a snippet of my JSON: { TotalResults: 2, Results: [ ...

Having issues with array.push functionality in JavaScript

let chatConversations = new Array(); jQuery('.CChatWindow').each(function(){ if (jQuery(this).is(":visible") && jQuery(this).attr("data-conversationid") != 0) { alert(jQuery(this).attr("data-conversationid")); // returns 1 and ...