javascript - Is it possible to render new pages on first view in NextJS during runtime? - Stack Overflow

admin管理员组

文章数量:1418380

Currently I'm using getStaticProps and getStaticPaths to prerender the latest X number of articles before my site goes live. This works great, but if a new article is created and shown on the front page while the site is still running, the new article returns a 404 page.

What I'd like is if a page doesn't exist, the id (like mysite/posts/id in the /posts/[id].js file) is passed to a function so that the page can be prerendered on the server during runtime. I don't want to default to getServerSideProps, since that would render the page on every request, what I'm looking for is to permanently render the page, and save it as a crawlable file just like getStaticProps does, only during runtime.

TL:DR I'm looking for a getStaticPaths/getStaticProps behavior during runtime. Is this possible in NextJS?

If not, how could I have new articles readily available without having to take down the server, build it again, and start it up again every so often, which seems horribly unmanageable.

Currently I'm using getStaticProps and getStaticPaths to prerender the latest X number of articles before my site goes live. This works great, but if a new article is created and shown on the front page while the site is still running, the new article returns a 404 page.

What I'd like is if a page doesn't exist, the id (like mysite./posts/id in the /posts/[id].js file) is passed to a function so that the page can be prerendered on the server during runtime. I don't want to default to getServerSideProps, since that would render the page on every request, what I'm looking for is to permanently render the page, and save it as a crawlable file just like getStaticProps does, only during runtime.

TL:DR I'm looking for a getStaticPaths/getStaticProps behavior during runtime. Is this possible in NextJS?

If not, how could I have new articles readily available without having to take down the server, build it again, and start it up again every so often, which seems horribly unmanageable.

• javascript
• next.js

Share Improve this question Follow asked Sep 30, 2020 at 22:38 VagrantCVagrantC 84733 gold badges1616 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

TL:DR I'm looking for a getStaticPaths/getStaticProps behavior during runtime. Is this possible in NextJS?

Yes and no. There's a revalidate option which, as of now, requires a client-side request to invalidate stale data. Then another client-side request must be made to retrieve the updated data. This has the unavoidable consequence of User A seeing stale data (triggering the revalidation) and User B seeing the up-to-date data. As of yet, there's no way to programmatically trigger a revalidation upon a CRUD (CREATE, READ, UPDATE, DELETE) event.

A (not remended) workaround is to manually trigger a client-side request immediately after a CRUD event. This way, in theory, User A and User B should always see up-to-date data. Unfortunately, this means longer response times for CRUD operations.

In short, right now getServerSideProps is the only available option to guarantee 100% up-to-date data for SEO indexing. Otherwise, if you don't care for SEO indexing, then client-side requests should suffice.

It seems the answer was simpler than I thought. Within getStaticPaths, you just need to set fallback: true, then within the function ponent add some fallback content that viewer will see temporarily while the server renders the new page and sends it back. Example [id].js:

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

    return (
        ...
    )
}

This will allow the server to use getStaticProps on the new ID and render the new page, while the client sees Loading... then once rendering is plete, the client is given the new page. This render only needs to happen once for new pages and will be readily available for any subsequent views or SEO crawlers.

reference

本文标签： javascriptIs it possible to render new pages on first view in NextJS during runtimeStack Overflow