[TanStack Start] JavaScript waterfall in the production build

[ali-idrizi]

I have been trying out TanStack Start and testing its server-side rendering, and noticed a waterfall of JS requests during the first load. In the reproduction, I have a very simple router setup with one layout and an index:

app
├── client.tsx
├── router.tsx
├── routes
│   ├── __root.tsx
│   ├── _layout.index.tsx
│   └── _layout.tsx
└── ssr.tsx

The index is simply a motion component:

function Home() {
  return (
    <motion.div
      style={{ width: 100, height: 100, background: "black" }}
      animate={{ x: 100 }}
    />
  );
}

I am testing the production build, and I noticed that not all JS files are loaded by the initial HTML response, but some of them by other JS files, which is making a waterfall of JS fetching, and is very noticeable with throttled network:

tanstack-start-js-waterfall.mp4

I understand Start is still in beta, but is this expected behavior, or is it something that could be optimized in the future?

[schiller-manuel]

this can be optimized for sure