T
TanStack6mo ago
sensitive-blue

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
5 Replies
foreign-sapphire
foreign-sapphire6mo ago
Yes the main purpose of react-start is to give you SSR. That plus server functions
foreign-sapphire
foreign-sapphire6mo ago
The docs might be a bit outdated (not 100% sure). Looking at the tanstack examples is a good idea too https://github.com/TanStack/router/tree/main/examples/react/start-bare
GitHub
router/examples/react/start-bare at main · TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
sensitive-blue
sensitive-blueOP6mo ago
I still want to integrate it myself, without using start, what should I do?
fascinating-indigo
fascinating-indigo6mo ago
right now we are focussing on making start stable. after that, we will fix SSR for router without start
sensitive-blue
sensitive-blueOP6mo ago
ok,tks

Did you find this page helpful?