TanStackT
TanStack•9mo ago
clean-aquamarine

SSR streaming rendering broken with HTML greater than a certain size

Here's the situation: I've got a loader that returns a lot of data which is put into a shadcn/ui table for display. The rendered HTML is from SSR streaming is broken when I return either too many rows OR have too much markup. This then creates a hydration error.

  1. I can render 151 rows worth of data. However, as soon as I take 152 rows or more, I get a hydration error and the HTML that's SSRed is broken.
  2. I can render 152+ rows without error if I remove the shadcn/ui table elements (which produce quite verbose html) and use plain tables instead.
  3. I can resolve the issue by using 
    defaultRenderHandler
     instead of 
    defaultStreamHandler
     in 
    ssr.tsx
  4. Two example of broken HTML shipped to the browser by SSR are attached. One is from rendering 152 rows, the other is from rendering all 435 rows in the db.
image.png
image.png
image.png
Was this page helpful?