Deferred Data Loading

Hi everyone!

I'm building a simple e-commerce app using TanStack Router, TanStack Query, and TanStack Start (with server functions).

To simulate a slow API during development, I'm adding a 10-second fake delay in my server function like this:

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    console.log('getProducts executed')
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    console.log('getProducts executed')
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

I'm currently using two different patterns for data fetching in different pages, and I want to know which one is more optimal — especially with slow APIs or fake delays.

Pattern 1 – Products page (Suspense + Await – feels very smooth):

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

Pattern 2 – Orders page (useQuery + manual isLoading):

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

Should I standardize the whole app on Suspense + Await (like the Products page) for consistency? Or keep useQuery for pages that need more complex refetching/mutations?

The problem is for Product page that even though it's still fresh because it doesn't log anything after the first execution, when I return to that page, the component fallback still appears for a short period of time (without logging anything).

TanStack•2mo ago•

4 replies

technological-jade

Deferred Data Loading

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    console.log('getProducts executed')
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    console.log('getProducts executed')
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

Pattern 2 – Orders page (useQuery + manual isLoading):

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

Deferred Data Loading

Similar Threads

Deferred Data Loading

Similar Threads

Similar Threads

Similar Threads