How to Hydrate a Client-Side App Without Wrapping It in Server-Side Code #2395

snnsnn · 2025-01-03T13:34:51Z

snnsnn
Jan 3, 2025

Hi, is there a way to mount a client-side app on a div element and hydrate it without wrapping it in the server-side app?

My SSR setup as follows:

Server entry:

app.get('*', (req, res) => {
  const root = () => (
    <ServerApp>
      <ClientApp url={req.url} />
    </ServerApp>
  );
  res.set('Content-Type', 'text/html');
  res.send('<!DOCTYPE html>' + renderToString(root));
});

Client entry that works:

hydrate(() => <ServerApp ><ClientApp /></ServerApp>, document);

My goal is to hydrate ClientApp directly, without wrapping it in server-side code:

Client entry that does not work:

hydrate(() => <ClientApp />, document.querySelector('#app'));

I do not receive any hydration errors, but the reactivity is broken. Is there a way to hydrate the client.

You can try it on: https://stackblitz.com/edit/vitejs-vite-zvc3tzc3?file=src%2Fclient.entry.js,src%2Fserver.entry.js&terminal=dev

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to Hydrate a Client-Side App Without Wrapping It in Server-Side Code #2395

{{title}}

Replies: 0 comments

Select a reply

How to Hydrate a Client-Side App Without Wrapping It in Server-Side Code #2395

snnsnn Jan 3, 2025

Replies: 0 comments

snnsnn
Jan 3, 2025