I'm trying to work on a site that uses a backend of templates to generate web pages.

For example, a user goes to the site at /apps/abc123, using a dynamic route server component, I query the backend for details about that URL, which returns me a prerendered template:
page.tsx Server Component

return (
        <>
            <AppBody body={appPage.template}></AppBody>
        </>
    )

In that AppBody, I simply use the provided data directly to a fragment.
AppBody.tsx Client Component

"use client"
export default function AppBody({body}: AppBodyProps) {
    return (
        <>
            <div dangerouslySetInnerHTML={{ __html: body }}>
            </div>
        </>
    )
}

The problem I'm running into is the JS provided by the template(s) is being executed before the page fully hydrates, so things like event subscription don't work. I'm relatively new to next/react, so if my overall design is off that's fine and it can be adjusted.