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

Learn how to handle internationalization routing in Next.js by utilizing a slash instead of a dash

Tips on slowing down the Jquery UIBlock Plugin

TypeORM ensures that sensitive information, such as passwords, is never returned from the database when retrieving a user

How should a successful post request be properly redirected in React?

Transform uploaded image file into a blob format and store it in a VueJS database

Discover the power of Vue.js 3 by seamlessly integrating anonymous functions within event handlers

Automate table column width adjustments in HTML using Selenium WebDriver

In Vue.js2, you can easily compare two arrays of objects that have the same values and then make changes or add properties from one array to the other

What is the correct way to properly enter a Svelte component instance variable?

Automatically unselect the "initially selected item" once two items have been selected in Material UI

Trouble with Component Lifecycle (ComponentDidMount) activation while switching tabs in TabBar?

Utilizing TypeScript Variables within a Jquery Each Iteration

Tips for refreshing HTML multiple file upload without reloading the page

Choosing the fourth cell in every row of a table and converting the information

Using NodeJS to convert a Base64 string into a JPEG image with the help of either NodeJS or

What could be the reason for Sequelize's findAll() method returning only a single object?

"Performing a series of getJSON requests with a delay between each call, iterating through an array

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

A specific image is loading after being clicked in a new page

Size three canvas, woven with triple strands of fiber