Multi-page form data loading - how would YOU do it?

[Jejuni]

Summary

Only been using next/react for a short time, so I'm not quite sure what the best pattern for my problem is.

Let's say I have a single big object that I want the user to edit, but I want a page/tab to save related data individually.
Imagine a form like the following (taken from shadcn's examples):

Let's also say each page deals with ~10 inputs and the form only needs to deal with editing existing data.

What would be the best approach to load that existing data?

What I thought of:

• making all components client components and loading the single big object in the parent
  • the menu links would be buttons that have the parent conditionally render the individual forms
  • the individual forms would get the slice of data they edit passed from the parent
• making all components server components and loading the data closest to where its needed
  • the menu links would now be actual links to individual pages
  • the individual pages with their forms would load the slice of data they need
• making all components server components and loading the single big object in the layout
  • the menu links would be actual links again
  • the layout for all the pages would load the big object and put it in context
  • the individual pages would read the slice of data they need from the context

All of these approaches have pros and cons. Some of them let me model the forms as individual pages to get automatic deep-linking working. Some are also more complex than others. Others will send lots of requests if the user navigates around, but let me individually query for the data instead of loading one big object.

Which of these approaches should I/would you prefer? Is there an even better method than the ones I mentioned?

Additional information

No response

Example

No response