To support SSR, is it necessary to use @tanstack/react-start?

I followed the tutorial on the official documentation to use @tanstack/react-start, as shown below:
In server.entry.tsx

const router = createRouter();

    const memoryHistory = createMemoryHistory({
        initialEntries: [req.originalUrl]
    })

    router.update({
        history: memoryHistory
    })

    await router.load()

    const routerHtml = renderToString(
        <StartServer router={router} />
    )

const router = createRouter();

    const memoryHistory = createMemoryHistory({
        initialEntries: [req.originalUrl]
    })

    router.update({
        history: memoryHistory
    })

    await router.load()

    const routerHtml = renderToString(
        <StartServer router={router} />
    )

in client-entry.tsx

const router = createRouter();

    const root = document.getElementById("root") as HTMLElement;
    
    hydrateRoot(
        root,
        <StartClient router={router} />
    );

const router = createRouter();

    const root = document.getElementById("root") as HTMLElement;
    
    hydrateRoot(
        root,
        <StartClient router={router} />
    );

Then, when running it in the browser, I found it completely unusable, with the following error:
Invariant failed: Expected to find a dehydrated data on window.TSR_SSR.dehydrated... but we did not. Please file an issue!

The above error occurred in the <StartClient> component:

at StartClient (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-start.js?v=bdf3b61e:795:16)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I think this is very poor. First, the router should only handle routing tasks and shouldn't be forced to use @tanstack/react-start just for SSR. Second, following the official documentation step by step, the code doesn't run. Have you checked if the official documentation demo is functional?

Component – React

The library for web and native user interfaces

TanStack•12mo ago•

5 replies

abstract-purple

To support SSR, is it necessary to use @tanstack/react-start?

I followed the tutorial on the official documentation to use @tanstack/react-start, as shown below:
In server.entry.tsx

const router = createRouter();

    const memoryHistory = createMemoryHistory({
        initialEntries: [req.originalUrl]
    })

    router.update({
        history: memoryHistory
    })

    await router.load()

    const routerHtml = renderToString(
        <StartServer router={router} />
    )

const router = createRouter();

    const memoryHistory = createMemoryHistory({
        initialEntries: [req.originalUrl]
    })

    router.update({
        history: memoryHistory
    })

    await router.load()

    const routerHtml = renderToString(
        <StartServer router={router} />
    )

in client-entry.tsx

const router = createRouter();

    const root = document.getElementById("root") as HTMLElement;
    
    hydrateRoot(
        root,
        <StartClient router={router} />
    );

const router = createRouter();

    const root = document.getElementById("root") as HTMLElement;
    
    hydrateRoot(
        root,
        <StartClient router={router} />
    );

Component – React

The library for web and native user interfaces

To support SSR, is it necessary to use @tanstack/react-start?

Similar Threads

To support SSR, is it necessary to use @tanstack/react-start?

Similar Threads

Similar Threads

Similar Threads