Data fetching with nextjs 'catch all' routes

Question

With nextjs 10, you can have a catch all route, which looks something like this [...id].tsx. The idea is that this will allow for dynamic pages. So it should match /example, /example/new, /example/new/latest etc.

The issue im facing is that a specific matched routes (for example /example/new) may need extra data in order to correctly render. Seeing as i only really have one file in my pages folder, i only have access to one getStaticProps call. Fetching all possible data for all possible routes seems quite wasteful.

Server side data fetching at the component level would solve his issue but this doesn't seem to be a supported feature in nextjs

Is there a recommended way around this? Conditional data fetching based on context inside getStaticProps ?

Answer 1

Where you should fetch data depends on the nature of your data. Also, when a user needs the data. You can use getStaticProps, getServerSideProps or fetch data on the client-side. See documentation to learn differences between the methods.