TanStack / TanStack/router

Seroval draws performance down on large payloads

Open
#7,719 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

We've found that using default seroval serialization for our @tanstack/react-router-ssr-query backed SSR app leads to pretty significant performance penalties on large payloads.

We have big (8mb uncompressed JSON) catalog of items that is:

  • cached in SSR workers, used to reduce it to a pretty small HTML output on initial request
  • streams catalog of items in JSON when HTML/CSS is already being processed

This way we get best of both worlds: no extra request client side and pretty fast LCP as JSON to hydrate is streamed.

But we've found that using default transport gives us around 50% performance penalty. In a real world production app with this 8mb streamed catalog we get ~24rps and ~180ms avg latency (4 node workers, autocannon it locally, all API data is cached). With a hacked transport (where we've replaced seroval with JSON.stringify) — ~36rps and ~120ms avg latency.

To confirm the point I've created a repo (https://github.com/kompot/seroval-vs-jsonstringify) that has a benchmark of seroval vs JSON.stringify and gives kind of the same numbers. 10mb serialization on a fast machine takes 70ms in seroval and 7ms with JSON.stringify

Complete minimal reproducer

https://github.com/kompot/seroval-vs-jsonstringify

Steps to Reproduce the Bug

Run a test, confirm a point that seroval leads to performance penalties even on small payloads.

Expected behavior

I would suggest an option to opt out of seroval in @tanstack/react-router-ssr-query at least for payload body. I guess that 99+% of payloads in real worlds apps are plain JSON does not need to fight problems seroval was created for — serialize any JS object.

Screenshots or Videos

No response

Platform
  • Router / Start Version: @tanstack/react-start@1.168.25, @tanstack/react-router@1.170.15, @tanstack/router-core@1.171.13
  • OS: macOS/Linux
  • Browser: n/a
  • Browser Version: n/a
  • Bundler: vite
  • Bundler Version: 8.0.x
Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the benchmark in the linked seroval-vs-jsonstringify repository and compare serialization of the reported large JSON payloads. Trace how serialization is used by @tanstack/react-router-ssr-query for streamed SSR payloads. Done means an evaluated opt-out for plain JSON payloads with performance results covering the reported case.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
backend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.