延迟数据加载

TanStack Router 旨在并行运行加载器，并等待所有加载器都解析完成才渲染下一个路由。在大多数情况下这很棒，但有时，您可能希望在后台加载其余数据时，更快地向用户展示一些内容。

延迟数据加载是一种模式，允许路由器在后台解析较慢的、非关键的路由数据时，渲染下一个位置的关键数据/标记。此过程在客户端和服务器（通过流式传输）上均有效，是提高应用程序感知性能的好方法。

如果您正在使用像 TanStack Query 或任何其他数据获取库，那么延迟数据加载的工作方式会略有不同。跳到使用外部库进行延迟数据加载部分以获取更多信息。

使用 Await 进行延迟数据加载

要延迟缓慢或非关键数据，请在您的加载器响应中的任何位置返回一个未等待/未解析的 Promise

tsx

// src/routes/posts.$postId.tsx
import { createFileRoute, defer } from '@tanstack/solid-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async () => {
    // Fetch some slower data, but do not await it
    const slowDataPromise = fetchSlowData()

    // Fetch and await some data that resolves quickly
    const fastData = await fetchFastData()

    return {
      fastData,
      deferredSlowData: slowDataPromise,
    }
  },
})

// src/routes/posts.$postId.tsx
import { createFileRoute, defer } from '@tanstack/solid-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async () => {
    // Fetch some slower data, but do not await it
    const slowDataPromise = fetchSlowData()

    // Fetch and await some data that resolves quickly
    const fastData = await fetchFastData()

    return {
      fastData,
      deferredSlowData: slowDataPromise,
    }
  },
})

一旦任何已等待的 Promise 被解析，下一个路由将开始渲染，而延迟的 Promise 将继续解析。

在组件中，可以使用 Await 组件解析和使用延迟的 Promise

tsx

// src/routes/posts.$postId.tsx
import { createFileRoute, Await } from '@tanstack/solid-router'

export const Route = createFileRoute('/posts/$postId')({
  // ...
  component: PostIdComponent,
})

function PostIdComponent() {
  const { deferredSlowData, fastData } = Route.useLoaderData()

  // do something with fastData

  return (
    <Await promise={deferredSlowData} fallback={<div>Loading...</div>}>
      {(data) => {
        return <div>{data}</div>
      }}
    </Await>
  )
}

// src/routes/posts.$postId.tsx
import { createFileRoute, Await } from '@tanstack/solid-router'

export const Route = createFileRoute('/posts/$postId')({
  // ...
  component: PostIdComponent,
})

function PostIdComponent() {
  const { deferredSlowData, fastData } = Route.useLoaderData()

  // do something with fastData

  return (
    <Await promise={deferredSlowData} fallback={<div>Loading...</div>}>
      {(data) => {
        return <div>{data}</div>
      }}
    </Await>
  )
}

提示

如果您的组件是代码分割的，您可以使用 getRouteApi 函数，以避免必须导入 Route 配置来访问类型化的 useLoaderData() hook。

Await 组件通过触发最近的 suspense 边界来解析 Promise，直到它被解析，之后它将渲染组件的 children 作为一个带有已解析数据的函数。

如果 Promise 被拒绝，Await 组件将抛出序列化错误，该错误可以被最近的错误边界捕获。

使用外部库进行延迟数据加载

当您路由的信息获取策略依赖于使用像 TanStack Query 这样的外部库进行外部数据加载时，延迟数据加载的工作方式略有不同，因为该库在 TanStack Router 之外为您处理数据获取和缓存。

因此，您需要使用 Route 的 loader 来启动数据获取，而不是使用 defer 和 Await，然后在您的组件中使用该库的 hooks 来访问数据。

tsx

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/solid-router'
import { slowDataOptions, fastDataOptions } from '~/api/query-options'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/solid-router'
import { slowDataOptions, fastDataOptions } from '~/api/query-options'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

然后在您的组件中，您可以使用该库的 hooks 来访问数据

tsx

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/solid-router'
import { useSuspenseQuery } from '@tanstack/solid-query'
import { slowDataOptions, fastDataOptions } from '~/api/query-options'

export const Route = createFileRoute('/posts/$postId')({
  // ...
  component: PostIdComponent,
})

function PostIdComponent() {
  const fastData = useSuspenseQuery(fastDataOptions())

  // do something with fastData

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

function SlowDataComponent() {
  const data = useSuspenseQuery(slowDataOptions())

  return <div>{data}</div>
}

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/solid-router'
import { useSuspenseQuery } from '@tanstack/solid-query'
import { slowDataOptions, fastDataOptions } from '~/api/query-options'

export const Route = createFileRoute('/posts/$postId')({
  // ...
  component: PostIdComponent,
})

function PostIdComponent() {
  const fastData = useSuspenseQuery(fastDataOptions())

  // do something with fastData

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

function SlowDataComponent() {
  const data = useSuspenseQuery(slowDataOptions())

  return <div>{data}</div>
}

缓存和失效

流式 Promise 遵循与其关联的加载器数据相同的生命周期。它们甚至可以被预加载！

使用 Await 进行延迟数据加载

使用外部库进行延迟数据加载

缓存和失效

订阅 Bytes

订阅 Bytes