Is it achievable to dynamically generate new pages on initial load in NextJS?

Question

Is it achievable to dynamically generate new pages on initial load in NextJS?

Right now, I am utilizing getStaticProps and getStaticPaths to pre-render a specific number of articles before my website goes live. This method works effectively, but if a new article is created and displayed on the front page while the site is still active, the new article ends up displaying a 404 error page.

What I really want is for non-existent pages to pass their id (such as mysite.com/posts/id in the /posts/[id].js file) to a function that would allow the page to be dynamically pre-rendered on the server during runtime. I do not wish to resort to using getServerSideProps, since that would mean rendering the page with each request. Instead, I am seeking a way to permanently render the page and save it as an SEO-friendly file similar to how getStaticProps operates, but within the runtime environment.

In simpler terms, I am searching for a behavior similar to getStaticPaths/getStaticProps but applicable during runtime in NextJS.

If this is not achievable, I am wondering how I can ensure that newly created articles are readily accessible without needing to intermittently bring down the server, rebuild it, and restart it - a process that appears quite unmanageable.

javascript next.js

Answer 1

Answer №1

TL:DR Is it possible to achieve getStaticPaths/getStaticProps behavior during runtime in NextJS?

It's a bit of a yes and no situation. There is a revalidate option available, but currently, it requires a client-side request to invalidate outdated data and then fetch updated data. This may result in User A seeing old data while User B sees the updated data. Unfortunately, there isn't a way to automatically trigger a revalidation upon CRUD events.

One workaround, although not recommended, is to manually initiate a client-side request after a CRUD event to ensure both users see the most recent data. However, this approach can lead to longer response times for CRUD operations.

At present, using getServerSideProps is the only reliable method to ensure 100% up-to-date data for SEO purposes. If SEO indexing is not a concern, client-side requests should suffice.

Answer 2

TL:DR Is it possible to achieve getStaticPaths/getStaticProps behavior during runtime in NextJS?

It's a bit of a yes and no situation. There is a revalidate option available, but currently, it requires a client-side request to invalidate outdated data and then fetch updated data. This may result in User A seeing old data while User B sees the updated data. Unfortunately, there isn't a way to automatically trigger a revalidation upon CRUD events.

One workaround, although not recommended, is to manually initiate a client-side request after a CRUD event to ensure both users see the most recent data. However, this approach can lead to longer response times for CRUD operations.

At present, using getServerSideProps is the only reliable method to ensure 100% up-to-date data for SEO purposes. If SEO indexing is not a concern, client-side requests should suffice.

Answer 3

Answer №2

After some exploration, I discovered a simple solution that had eluded me. In the getStaticPaths function, all you need to do is set fallback: true. Then, within the function component, add some temporary fallback content for viewers to see while the server renders the new page and sends it back. For example, in [id].js:

export default function Post({ postProps}) {
    const router = useRouter()
    
    if (router.isFallback) {
        return <div>Loading...</div>
    }

    return (
        ...
    )
}

By following this approach, the server can utilize getStaticProps on the new ID to render the fresh page, while the client sees "Loading..." temporarily. Once the rendering process is complete, the client is presented with the updated page. This rendering only needs to occur once for new pages and will be easily accessible for subsequent views or SEO crawlers.

reference

Answer 4

After some exploration, I discovered a simple solution that had eluded me. In the getStaticPaths function, all you need to do is set fallback: true. Then, within the function component, add some temporary fallback content for viewers to see while the server renders the new page and sends it back. For example, in [id].js:

export default function Post({ postProps}) {
    const router = useRouter()
    
    if (router.isFallback) {
        return <div>Loading...</div>
    }

    return (
        ...
    )
}

By following this approach, the server can utilize getStaticProps on the new ID to render the fresh page, while the client sees "Loading..." temporarily. Once the rendering process is complete, the client is presented with the updated page. This rendering only needs to occur once for new pages and will be easily accessible for subsequent views or SEO crawlers.

reference

Is it achievable to dynamically generate new pages on initial load in NextJS?

Answer №1

Answer №2

Similar questions

Rotate image in Vue3 using @click

Enhance Material UI with custom properties

Remix is throwing a Hydration Error while trying to process data mapping

ReactJS import duplication problem arising from utilizing npm link for component testing prior to npm package release

Exploring the wonders of Jasmine coding with jQuery

Using jQuery, you can easily insert a <span> tag around selected text and then save this modification permanently in a local HTML file

AJAX allows developers to declare variables within their code to

Oops! Looks like there's a hiccup with the express-validator plugin as the validation fails due to req.checkBody not being recognized as

Is it possible to transfer data from javascript to php through ajax?

What's causing my struggle to override the bootstrap nav-link class in next.js?

There is no Api.js file in the Cordova iOS platform

Increment and decrement the like count on fa-heart multiple times

Calculate the number of parent nodes and their respective child nodes

Seeking help with executing JQuery Ajax functions within a foreach loop

Unable to add or publish text in CKEditor

Enhancing Typography in Material UI with Custom Breakpoints in React CustomThemes

Node.js and Express facing challenge with Stripe checkout functionality

Entry Points for Logging In

Issue with ng-checked not detecting boolean values retrieved from local storage

React JS tutorial: deleting an entry from the browser's localStorage