quickest-silver

What causes a page to load in two parts instead of one?

When I add the lines

  const { data } = useSuspenseQuery(postsQueryOptions());
  console.log(data);

  const { data } = useSuspenseQuery(postsQueryOptions());
  console.log(data);

to app/routes/index.tsx after npx degit TanStack/router/examples/react/start-basic-react-query start-basic-react-query I see the page load in two parts: page that uses the suspended query is streamed in. What controls this behavior, say I want this to block and the page to render all at once. Is that an option I have?

7 Replies

quickest-silverOP•10mo ago

Just checked, same behavior with npx vinxi build --preset node-server; npx vinxi start

quickest-silverOP•10mo ago

This streaming in is useful but I'm confused about what in the code causes it to happen. Happy to write some docs on this! I know it's something @Tanner Linsley thought about a lot. Is this a case of routes/__root.tsx being special, since it's the shell for the whole thing? I figured a <Suspense> boundary was generally necessary to specify a streaming boundary but maybe it's that this doesn't count for routes/__root.tsx?

ambitious-aqua•10mo ago

So the router does have a suspense boundary near the root if I recall If you use a loader, it will automatically put one in for you Try specifying on the route itself wrapInSuspense: false

magic-amber•10mo ago

there is a suspense boundary you cannot opt out currently

magic-amber•10mo ago

https://github.com/TanStack/router/blob/main/packages/react-router/src/Match.tsx#L297

GitHub

router/packages/react-router/src/Match.tsx 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

quickest-silverOP•10mo ago

Adding wrapInSuspense:false didn't change anything for me, didn't have a loader to it wouldn't have stuck it there cool, thanks! @Manuel Schiller does "currently" here mean it's planned to drop this? Is there a workaround for blocking the render?

quickest-silverOP•10mo ago

I filed https://github.com/TanStack/router/discussions/2860 to avoid losing track of this, I'd love to learn more here and happy to add some docs about suspense behavior once I get it

GitHub

Ability to block initial render while using a loader · TanStack rou...

I'd like to be able to use a loader in the same component as a useSuspenseQuery and block the render. Today this is possible from routes/__root.tsx but in routes/index.tsx. @schiller-manuel not...

Gaming

Programming

What causes a page to load in two parts instead of one?

Did you find this page helpful?