Confused by lazy route in SSR mode
To get SSR to work with a "lazy" route, I need to have both
createLazyFileRoute and createFileRoute setup with a component to get both page reload and client side routing to work.
The docs says the following:
post.tsx (no component specified) ->
export const Route = createFileRoute('/posts')({
loader: fetchPosts,
})
post.lazy.tsx ->
export const Route = createLazyFileRoute('/posts')({
component: Posts,
})
If I have it according to above, the page SSR renders OK, but I get hydration error in browser which then resorts to client rendering which results in nothing. However, if a go to the page using client side routing, it works.
However, if I have component specified in both createFileRoute and createLazyFileRoute it works fine. But this is not good from a code split point of view.3 Replies
wise-whiteOP•2y ago
I also tried this in https://tanstack.com/router/v1/docs/framework/react/examples/basic-ssr-file-based example and got the same result.
React TanStack Router Basic Ssr File Based Example | TanStack Route...
An example showing how to implement Basic Ssr File Based in React using TanStack Router.
conscious-sapphire•2y ago
Is this the same in the streaming example as well?
wise-whiteOP•2y ago
Yes