I’m working on a complex Next.js project that serves as a basecode to generate a lot of distinct sites. The project retrieves assets (pages, etc.) from an CMS and uses SSR (Server-Side Rendering) to generate the pages.
I have a problem where I need to update a component deep within the component tree without changing the URL. Specifically, there’s a deeply nested client component that, upon a successful form submission, needs to replace the current content with a “thank you” page without navigating to a different URL.
Here’s the structure:
- The deeply nested client component contains a button, which, when clicked, triggers the “thank you” page content to appear. However, it’s so far down the component tree that passing callbacks.
- The parent component, where I’d like to make the content change, is server-side and doesn’t allow direct DOM manipulation or reactive updates like in a typical React component.
Given these constraints, what are some viable solutions to achieve the following:
- Insert the “thank you” page content into the (very far) parent server component without changing the URL. The thank you page (React Node) it’s already obtained on that deep client component.
I’ve considered various approaches, such as:
- Using callbacks to pass information up the component tree, but this seems too cumbersome due to the depth of the components. (More than 10 levels and a lot of different branches of possibilities from the main page)
- Utilising the Context API to share state, but this doesn’t work with server components as they don’t support reactivity.
- Trying an EventEmitter or Pub/Sub system for communication, but this might not integrate well with server components.
Given these limitations and requirements, what are some practical approaches or design patterns to achieve the desired behavior in a Next.js project with both client and server components?
Any help or suggestions would be greatly appreciated.