Approach for several hydrations roots on one page

[aspirisen]

Hello, I am currently looking for a way to migrate existing rails application to react with ssr. I thought about using nextjs, but there are a lot of obstacles vercel/next.js#79082

My idea is the following - migrate existing erb templates to react piece by piece (component by component). I will have some ssr application where I send http request from erb template to render specific component that I have already migrated from rails to react. Then that ssr engine will return html and then I will insert that html to final html and then it will go to client.

Overall I will have several react components that are spread across the page in different places. The problem here is that I will need to be able hydrate that react components not from the document root.

My question is - is it possible to specify hydration root when hydrating server+client components?

[lazarv]

Hi @aspirisen, welcome here!

Although this framework does not exactly support what you are looking for, your description fits very well with Remote Components. Currently, @lazarv/react-server does not support a cross-framework or a cross-language way of constructing horizontal micro-frontends. Still, the plan is to provide a solution for any framework or language, without barriers. Remote Components is a solution for any technology, as it is based on combining an ancient technology with a modern twist, which means that you'll be able to implement what you want in the future.

With @lazarv/react-server, I plan to implement proper island architecture support, with multiple hydration points on a single page, but that's a bit out of scope for you. It will be more on par with Astro's approach, providing more granularity on the hydration rather than having a single hydration entry point, but in a framework-specific way.

At Vercel, we are working on a solution that supports vertical and horizontal micro-frontends. The goal is to provide a solution for as many frameworks and technologies as possible, with excellent additional features available only on the Vercel platform. Surely Next.js, as a first-party framework, is at the top of the list, but not the only one. Stay tuned for news regarding this, as it includes what you are trying to achieve. Just to let you know, the solution will not require any vendor locking.

Sorry for bringing just some vague news, but I hope you'll stick around and you'll watch the updates.

[aspirisen]

Got it, thank you for detailed explanation