Get truly static props for a dynamic page (getStaticProps without getStaticPaths)

[ghost]

From the docs about getStaticPaths:

If a page has dynamic routes and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time.

But what if the data I want to be embedded in the page does not depend on the path parameter ? I want only one page to be generated at build time (I do not want to generate a list of pages based on the result of getStaticPaths) and I do not want to opt-out of Automatic Static Generation.

Is it possible ? I do not think setting fallback: true in the return value of getStaticPaths is what I am looking for, since I still want the page to be generated at build time.

[leerob]

If you do have a dynamic path and only want one page generated at build time and the rest a request time, just hard code that option as the return value for paths. The single page you define will be generated at build time, and then if a request comes in for any of the other pages, that's where fallback: true will allow you to generate that page at request time.

[ghost]

Thank you @leerob, but It is not what I am asking. If my path is product/[id] I do not want next.js to generate the page product/abc at build time and the other at runtime. What I want is embedding in the generic page product/[id] some information retrieved from getStaticProps and which does not depend on the id.

Example: I want a navigation menu to be present in the html returned by the server for every product. The navigation menu does not depend on the product being seen, but Its content should be retrieved at build time from an API.

[tehvicke]

@jbrudant have you got a solution for this yet? I am in the exact same situation now, I redirect from /page to /page/[id] where the id is generated at runtime, but the page itself has 99% static content and it's critical that this content is rendered at build time rather than runtime.

[ghost]

@tehvicke no, I haven't.

[dpyzo0o]

@leerob Hi, is it possible to get the current page route inside getStaticProps? e.g I have some pages which use a shared getStaticProps function, thus I would like to know which page is invoking the getStaticProps function

[leerob]

Yes. params contains the route parameters for pages using dynamic routes. For example, if the page name is [id].js , then params will look like { id: ... }. You can use this to determine the current page route.

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

[MikeyZat]

I can see it being particularly useful for generating translation files (that do not depend on id) at build time for dynamic pages like [id]/about.tsx etc. Currently I see no option to integrate with next-i18next and not lose the SSG for dynamic routes in our project.

[sambP]

Same for us, we only want to do serverSideTranslations in the getStaticProps.

[Kethatril]

I have also run into this issue. In my case I have a dynamic route that requires authentication (e.g. /account/subscriptions/[id]) where the authentication is handled client side (similar to how the Vercel dashboard does so, and how the next docs recommend), but I need to use getStaticProps to retrieve the navigation/menu from the CMS. Nothing in getStaticProps depends on the id in the url so it should be possible to just generate the page once and serve it to all pages in the dynamic route

[icopp]

My suggestion here would be for Next to add handling for a function named something like getStaticSharedProps, which can return props that get merged with the props from getStaticProps (with the latter taking precedence if the same key is in both). getStaticSharedProps would be run once per locale, maybe with some kind of separate configuration parameter to tell it to run only once and have results shared across all locales.

[lluisd]

is there any solution now?

[ludalex]

Same use case as @MikeyZat!

[abishekdevendran]

Any solution now?

[VitaliyPotapov]

Some ideas from SO: https://stackoverflow.com/questions/71293075/how-to-use-dynamic-routes-without-getstaticpaths

[VitaliyPotapov]

I've found the following solution.
Imagine the project structure:

pages
  blog
    [id].tsx

I want blog/[id].tsx to be statically generated during build time (e.g. load i18n from cms), but actual data for provided id should be fetched on client.

export default function BlogItem() {
  const router = useRouter();
  const id = router.query.id;

  // fetch blog data by 'id' in useEffect()

  return <div>Blog item: {id}</div>;
}

I can achieve that with 3 steps:

1. rename blog/[id].tsx into blog/item.tsx
2. add getStaticProps and pass built-time props to component:

    export async function getStaticProps() {
      // fetch i18n for this page from cms  
    
      return {
        props: {
          i18n_title: 'Blog item'
        },
      };
    }    
   
    export default function BlogItem(props) {
      const router = useRouter();
      const id = router.query.id;
    
      // fetch blog data by 'id' in useEffect()
      
      // use passed props to pre-render component
      return <div>{props.i18n_title}: {id}</div>;
    }

3. Add rewrite rule in next.config.js:

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      async rewrites() {
        return [
          {
            source: '/blog/:id',
            destination: '/blog/item',
          },
        ];
      },
    };

[LeakedDave]

I'm noticing a slight bug, when you refresh the page, the router.query is undefined on the initial render... But I'm using React Query for caching so I need to code in a workaround to ensure that the Router query parameter isn't undefined. As of right now, it's sending 2 requests to load when I refresh the page, first with undefined user_id and then it properly sends the user_id on a re-render and loads correctly. This is a problem because it is sending an initial request to /api/user/undefined

import { useQuery } from '@tanstack/react-query'

export default function UserPage(props) {
    const router = useRouter()

    const { data: user, isLoading, isError, error } = useQuery({
        queryKey: ['user_' + router.query.user_id],
        queryFn: () => axios.get('/api/user/' + router.query.user_id).then(res => res.data.user),
    })
}

[LeakedDave]

This is my fix but I feel like it is hack-y and I'm not a huge fan, but it works. Open to suggestions. I guess one option would be to simply load the data on useEffect? Instead of using the useQuery hook. But I enjoy the simplicity of the useQuery hook...

import { useQuery } from '@tanstack/react-query'

export default function UserPage() {
    const router = useRouter()
    const { user_id } = router.query

    const { data: user, isLoading } = useQuery({
        queryKey: ['user_' + user_id],
        queryFn: () => user_id ? axios.get('/api/user/' + user_id).then(res => res.data.user) : null,
    })

    // Redirect to users page if not found:
    useEffect(() => {
        if (user_id && !isLoading && !user) {
            router.push('/users')
        }
    }, [isLoading, user])
}

[VitaliyPotapov]

I think this is the case for dependent queries, have a look on example in docs.

[LeakedDave]

Yea that was it, the enabled option checking for user_id did the trick.

[joaogabriels]

Thank you so much!