SSG with dynamic path segment in Next12
Unanswered
Kerry Beagle posted this in #help-forum
Kerry BeagleOP
I have a dynamic route defined that I would like to statically generate a template for, you can think of this as a shell (includes some request to headless CMS). The React components inside the shell would render on the client/do some requests to render the rest of the page. Is there a way to generate 1 template that is shared across all the dynamic paths? the issue is that i don't know how to do "getStaticPaths" since all the routes are truly dynamic/i dont want to generate templates for all of these routes as they would be the same.
11 Replies
Morgan
If using getStaticProps on a dynamic route, it’s a prerequisite that you have to use getStaticPaths.
You can create a react component that is a “template†and import it on each page in a route. Do you know how to create components?
You can create a react component that is a “template†and import it on each page in a route. Do you know how to create components?
joulev
I think you can just use a react component without any data fetching functions (getstatic* and getserversideprops), then it will be SSG. Use useRouter() to access the dynamic param on the client side then you can use it for client side data fetching
Kerry BeagleOP
Whats going on is this - I have a header and footer that has a dependency on Headless CMS data to render. I'd like to not make that call every time the page gets rendered based on a specific dynamic path segment
so what i was thinking was that could just happen at build time once, then the React code inside the page that doesn't know how to SSR will render normally/do CSR inside the Header/Footer shell
Is this a specific NextJS concept or are you just talking about React generally
joulev
So this data only needs to be fetched at build time? Then I think I have an example for you
Kerry BeagleOP
yes!
ðŸ™
Morgan
Yes it is Nextjs specific. With pages directory.
Example: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths
Example: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths
Morgan
Sounds logical. You’ll need to fetch the data in getStaticProps on each page, then pass the data via props into the template.