you can opt in to PPR (partitial pre rendering). Like that most of your page will be generated static and the dynamic parts of your app (need to be in suspense boundary) will be served dynamically (streamed in)

Install: https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering#using-partial-prerendering

Keep in mind, that this is currently experimental and there might be unsolveable issues with it.

this doesn't seem to be a solution for nextjs 14 as I stated

whoops sorry. I don't think it's possible in next14

method 1:
put the static part in a layout and the dynamic part in a page file. a layout can have only one page inside it just fine

method 2:
client side fetching for that dynamic section

method 3:
unstable_cache to cache the static parts

For method 1. If my page is [...id].tsx, can I also assume that generateStaticParams() and generateMetadata() will be static since my layout is static?
So in the layout I'll add

export const dynamic = 'force-static'
export const dynamicParams = false

Do I also need to add something similar to the [...id].tsx page?

not too sure actually, and now that i think about it, method 1 may not even work. but yeah you need to try, i'm not sure how a force-static layout would behave with a force-dynamic page under it

Can you elaborate #2?

Are you referring to dynamic import?

no, i was referring to tanstack query, swr and the like

Yes you can convert your dynamic routes in to static routes by using ssg generation. This creates every routes and data in each route static and faster the page performance

I don't think that's what I'm trying to do. Basically I want what PPR. I heard they were being introduced in nextjs14, but so far I can't seem to find a way to do it. What you're recommending is not PPR

Yeah... that's fetching on the client side.. and not really PPR. Seems like I have to update to Nextjs15 for using the experimental feature of PPR. It's a bit odd since PPR was being introduced to nextjs14 (https://nextjs.org/docs/14/app/api-reference/next-config-js/partial-prerendering), but I can't find a way to apply for a specific group of routes, it looks like having it in the nextjs config applies to all the routes in the project.

PPR is experimental so i wouldn't recommend using it and i haven't used myself. but yeah you can try, PPR was already a thing in v14 and upgrading to v15 may not be necessary.

i found my unstable_cache (method 3) to serve me well enough for complex caching problems.