Search code examples
next.jsserver-side-renderingnextjs14static-site-generation

Dynamic meta deta is not updating as expected due to production static site generation

Guys i am fetching meta setting (set from admin panel) from mongodb then i pass it to generateMetadata function

this add dynamic meta data in localhlost as page is always server side rendered but in production nextjs treat my home page or about page as Static site generation due to which my dynamic tags becomes undefined how can i opt out of static site generation

make sure you understand that i am doing this for

https://example.com/

i know about dynamic routes or params but that not the usecase here

i want to update meta setting from admin panel for static pages

Solution

  • Problem :

    in production nextjs treat my home page or about page as Static site generation due to which my dynamic tags becomes undefined how can i opt out of static site generation

    Cause :

    The default behavior of Next.js is to cache the rendered result (React Server Component Payload and HTML) of a route on the server. This applies to statically rendered routes at build time, or during revalidation. [1]

    Solutions :

    Use Route Segment Config [3] :

    Add this line at top of Home & About Page, 'force-dynamic' [2] will result in routes being rendered for each user at request time. This will disable caching for these pages.

    export const dynamic = 'force-dynamic'

    Further if you want more control, you may also use timespan after which page should refresh/re-fetch data/cache, by using revalidate. Set the default revalidation time for a layout or page. [4]

    If you add this below line then, page will be refresh/re-fetch data/cache only after 60 seconds.

    export const revalidate = 60

    By Setting revalidate value to zero means, avoid being cached and make the route dynamically rendered (just like force-dynamic).

    export const revalidate = 0

    Please Read :