Handling static data at build time together with server-side fetched data

[zensitively]

Summary

I have a getCourses call that could be available at build time.
I also have a userProgress call that is dependent on the user and needs to be fetched server-side

This data should be available for multiple pages.

Ideally, in my components I would have a combination of both available so that I can iterate over lessons and have the user progress inside of the data in the form of isActive, isCompleted etc.

edit: I am using the app router.

I don't understand how the ppr / ssr paradigm works and what the best pattern is for this.

How can I make course data available at build time and make it part of the initial html even if it isn't rendered yet in the initial html? Is there such a thing? Does nextjs store it in a JSON object or something similar as part of the initial, statically generated file?

Or do I just have to opt-in to SSR and utilize caching?

Even in that latter case, I ask myself what the best pattern is to make such data available for multiple pages without having to make more server-requests for it. Is the best pattern here to opt-in to client-side rendering/fetching?

Additional information

No response

Example

No response

[Raymond-Ly]

[zensitively]

To combine static course data (SSG) with dynamic user progress (SSR) efficiently across multiple pages, consider this pattern:

• Fetch Course Data at Build Time (SSG) using getStaticProps

• Fetch User-Specific Data Server-Side (Middleware or API Route)

• Fetch User Progress Client-Side with SWR (Caching)

I don't think getStaticProps is the correct pattern for app router.