Best practice for hydrating a large react tree / moving most rendering to the server

[rrrnld]

Hi,

I'm working on an application that is taking in some XML and essentially generating a large tree of React components from this. The input XML can be several megabytes large, but the output is mostly static, except for some small parts like popover elements that need to run on the client.

The transformation happens in a react component:

<XMLTransformer input={str} />

If I want to accept the XML via post and generate a server-rendered page from it, what's the best approach to take? How do I hydrate the resulting tree exactly? At the moment I have this:

export async function action({
  request,
}: Route.ActionArgs) {
  const formData = await request.formData();
  return { input: formData.get("input") };
}

export default function Home({
  actionData
}: Route.ComponentProps) {
  return (
    <main>
      <Form method="post">
        <textarea name="input" rows={10} placeholder="Enter your XML here" defaultValue={input}></textarea>
        <button type="submit">Submit</button>
      </Form>
      <XMLTransformer input={input} />
    </main>
  );
}

How would I move most of the rendering to the server and reduce load on the clients? At the moment all the action does is return the string that was posted in the first, and if I understand it correctly most rendering still happens on the client.