share cache across routes while supporting SSR

[ivawzh]

Hello everyone,

Thank you for building such an amazing ecosystem and community with TanStack.

I have a question regarding the data loading strategy when using TanStack Start and Router (potentially with an external data loader like React Query v5). Specifically, is it possible to:

1. Enable SSR for both a feed page and individual pages. For example, /products page and /product/$id page.
2. Reuse data across these two types of pages. For example, on /products page, a feed of 100 products' full data is loaded. When a user clicks on a specific product page, I want to reuse the cached data from the feed to power the individual product page without firing any additional network requests.

Any help or insights will be appreciated. Thanks in advance.

[schiller-manuel]

you can access the parent loader data via useLoaderData.
is that what you are looking for?

[ivawzh]

Would you please elaborate a bit more on this? Sorry if this is a dumb question. I am just beginning to learn TanStack.

A bit more context on my use case:

• there are /products and /products/$productId pages on the web app.
• there are api/products and api/products/$productId JSON endpoints for powering pages above
• api/products/$productId returns type Product. Meanwhile, api/products also returns Array<Product> with full product data. So, if the frontend already has data loaded from the list endpoint, it is not necessary to fetch again from the single-product endpoint.

What I have read from Router doc:

TanStack Router Cache Cons:

• No shared caching/deduping between routes

This is why I thought I will need to configure TanStack query for my app. But I could have misunderstood the point.

Re useLoaderData, from my understanding this is to consume loader's result from component layer.
But my need is to conditionally skip /products/$productId page loader if its data is already cached from the other route's loader (i.e. api/products). Is useLoaderData accessible from the loader layer or beforeLoad step too?

[schiller-manuel]

in the loader you can access the parent route via parentMatchPromise which also gives you access to its loader data

[ivawzh]

It works! Thanks.

For other ppl's reference, see code below.

I do still have doubts on ensuring the immediate parent match is the exact route we want (e.g. posts/). It'd be nice to have explicit function like getRouteApi(path: string) . But its return is only useful under React context provider in component layer at the moment.

commit 541e18a04663cb350ed96eb6f74b420f3a2197a6 (HEAD -> master)

    feat: demo use cache across routes & endpoints
    
    Skip fetching single-post when data is already cached from post-list page

diff --git a/src/routes/posts.$postId.tsx b/src/routes/posts.$postId.tsx
index 0290114..f658f17 100644
--- a/src/routes/posts.$postId.tsx
+++ b/src/routes/posts.$postId.tsx
@@ -5,6 +5,17 @@ import { PostErrorComponent } from '~/components/PostError'
 
 export const Route = createFileRoute('/posts/$postId')({
-   loader: async ({ params: { postId } }) => {
+  loader: async ({ params: { postId }, parentMatchPromise }) => {
+    const parentMatch = await parentMatchPromise
+
+    if (parentMatch.id === '/posts') {
+      const cachedPost = parentMatch?.loaderData?.find((post) => post.id.toString() === postId)
+      if (cachedPost) {
+        console.log('Found cached post. Skipping fetch.')
+        return cachedPost
+      }
+    }
+
+    console.log('Fetching post from server.')
     return fetchPost({ data: postId })
   },
   errorComponent: PostErrorComponent,