getStaticProps only runs on IIS after the entire page is refreshed

Using the nextjs getStaticProps feature in my project has been smooth sailing so far. However, after uploading the Static files to IIS, the feature seemed to stop working until I configured a urlRewrite module on it.

I noticed that when initially visiting a page, getStaticProps is not fired until the entire page is refreshed. Below are the codes I used for the urlRewrite module:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="ReactRouter Routess" stopProcessing="true">
                <match url="product\/(\d+)\/.*" />
                    <action type="Redirect" url="/product/{R:1}.html" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration> 

If anyone knows why this is happening and how I can fix it, please let me know.

Answer №1

When it comes to getStaticProps, keep in mind that it runs during the build process rather than during the request itself. This is why you may not see it executed right away on your initial request. To ensure that your page always stays "fresh," consider swapping out getStaticProps with getServerSideProps. More information on this can be found here.

getStaticProps is typically only triggered post-build when a page undergoes revalidation, which occurs either after the specified revalidate period has passed or if revalidation is manually triggered. This likely explains why the function was executed in your case. Further details on this process can be explored here.

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

Having trouble with the page redirection issue? Here's how you can troubleshoot and resolve

My goal is to restrict access to both the user home and admin dashboard, allowing access only when logged in. Otherwise, I want to redirect users to the login or admin login page. import { NextResponse } from 'next/server' import { NextRequest } ...

How to achieve a successful response with Ajax and jQuery?

I'm currently working on practicing data retrieval through an API using jQuery. After watching a few YouTube tutorials, I still can't seem to get a successful response... it's quite frustrating. Aside from YouTube, I'm also a subscribe ...

Finding mongoose in an array of objects nested within another object

Here is the MongoDB JSON document I am working with: { categoryId: '1', categoryName: 'Outdoors Equipments', items: [ { itemId: '1', itemName: 'Camping T ...

A Guide to Sorting Nested Lists with SortableJS and jQuery

I have been experimenting with SortableJS and jQuery SortableJS Binding in order to create a nested list, capture the new order of the list and its children (resembling a hierarchical structure) using console.log(). I attempted the solution provided in th ...

Reversing text in mongodb

https://i.sstatic.net/Y61ML.png In my node.js and MongoDB 5 project, I am attempting to retrieve data where the field "TOTAL DUE" has a value other than '$0.00'. I have successfully selected records where "TOTAL DUE" equals '$0.00' usi ...

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

I'm trying to implement Bootstraps Affix feature in a sticky subnav. <div class="container" data-spy="affix" data-offset-top="417" id="subnav"> I've adjusted the offset to ensure there's no "skip" or "jump" when the subnav sticks. Ho ...

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

What are the reasons for validation failure when it is moved into a method?

I am currently in the process of developing a validation function in JavaScript. However, when I extracted the logic into a private method, my validation started failing and I can't seem to figure out why. Here is my HTML definition: <input type= ...

NavigateToTop/BackToTheBeginning

I'm facing a challenge with a page layout that involves two vertical div's - one for the menu on the left and another for loading content on the right. My goal is to utilize the .scrollintoview() function on the menu div so that when a link is cl ...

What is the best way to set jade as a global variable in a node.js Express application?

Currently, the routing function shown below is operational: exports.summary = function(req, res, next) { var jade = require('jade'); res.render('myView', { main: jade.renderFile('./views/summary.jade') }); }; The ...

Sequential JavaScript Operations

What is the most efficient approach for executing sequential operations in JavaScript (specifically with Node.js)? For example, creating a folder - copying a file - editing a file, and so on. Since this is a stand-alone application, it is acceptable to u ...

Waiting for all API queries in VueJS is important to ensure that all data has been

Hey there, I currently have an API set up using Django Rest Framework and the front end is built with VueJS. I have a form view that can either be used to Add New or Modify existing data. The structure of the form remains the same, but it checks if an ID ...

Creating animated reactions in discord.js is a goal of mine, however, I am encountering an issue that needs to

Last year, I asked this question and received helpful answers. However, there is still a problem that I couldn't figure out. Since I am unable to comment on the previous answers, I have decided to add a new question client.on('message', mess ...

Issue occurred: The error "Undefined offset 1" was encountered while trying to upload a file via

Every time I try to pass data into my file upload controller, I keep encountering an error message that says undefined offset: 1. function TestFileUpload() { $i=0; if(!isset($_FILES[$i]) ) { echo "No file is being uploaded"; } el ...

Tips for passing navigator reference to React Native's <Drawer/> component?

Utilizing react-native-drawer ( https://github.com/root-two/react-native-drawer ) in my index.ios.js file, I have the following setup where I am attempting to pass the 'navigator' reference into the <DrawerPanel /> of <Drawer /> compo ...

Issue with localFont not being rendered/applied to the font-sans class in Next.js 13 when using Tailwind CSS

As I embark on a new project with Nextjs and TailwindCSS, I've encountered an issue with getting the fonts to work using variables. In my layout.js: import localFont from "next/font/local"; // Font files can be colocated inside ...

Resolving issues with jQuery input values

I have been working on a form that allows users to choose an amount or specify another amount. When the user clicks on "other amount," it changes the displayed amount to $5. My goal is to make it so that when the user specifies an amount other than 5, it u ...

The functionality of the d3 Bar chart with a tool tip seems to be malfunctioning

Working on a D3 svg chart with built-in tooltips using the d3-tip library. Check out the original code here. Utilizing Django as the back end to populate log count per year from datetime. Successfully populated axis and labels except for the bars. Here i ...

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

Is there a way to create a self-contained installation package for my Vue application?

Is it possible for my application to be downloaded and installed without requiring internet access after the download is complete? I am looking to create a standalone installer for this purpose. Are there any suggestions on how to go about implementing t ...