Vorladen (Preloading)

Preloading in TanStack Router ist eine Möglichkeit, eine Route vorab zu laden, bevor der Benutzer tatsächlich zu ihr navigiert. Dies ist nützlich für Routen, die der Benutzer wahrscheinlich als nächstes besuchen wird. Wenn Sie beispielsweise eine Liste von Beiträgen haben und der Benutzer wahrscheinlich auf einen davon klickt, können Sie die Beitragsroute vorab laden, damit sie bereit ist, wenn der Benutzer darauf klickt.

• Absicht
  • Preloading nach "Absicht" funktioniert durch die Verwendung von Hover- und Touch-Start-Ereignissen auf <Link>-Komponenten, um die Abhängigkeiten für die Zielroute vorab zu laden.
  • Diese Strategie ist nützlich für das Vorabladen von Routen, die der Benutzer wahrscheinlich als nächstes besuchen wird.
• Viewport-Sichtbarkeit
  • Preloading nach "Viewport" funktioniert durch die Verwendung der Intersection Observer API, um die Abhängigkeiten für die Zielroute vorab zu laden, wenn die <Link>-Komponente im Viewport sichtbar ist.
  • Diese Strategie ist nützlich für das Vorabladen von Routen, die unter dem "Fold" oder außerhalb des Bildschirms liegen.
• Rendern
  • Preloading nach "Rendern" funktioniert, indem die Abhängigkeiten für die Zielroute vorab geladen werden, sobald die <Link>-Komponente im DOM gerendert wird.
  • Diese Strategie ist nützlich für das Vorabladen von Routen, die immer benötigt werden.

Vorab geladene Routenübereinstimmungen werden vorübergehend im Speicher zwischengespeichert, mit einigen wichtigen Einschränkungen

• Nicht verwendete vorab geladene Daten werden standardmäßig nach 30 Sekunden entfernt. Dies kann konfiguriert werden, indem die Option defaultPreloadMaxAge für Ihren Router festgelegt wird.
• Offensichtlich wird, wenn eine Route geladen wird, ihre vorab geladene Version in den normalen "pending matches"-Status des Routers übernommen.

Wenn Sie mehr Kontrolle über das Vorabladen, Caching und/oder die Garbage Collection vorab geladener Daten benötigen, sollten Sie eine externe Caching-Bibliothek wie TanStack Query verwenden.

Der einfachste Weg, Routen für Ihre Anwendung vorab zu laden, ist die Einstellung der Option defaultPreload auf intent für Ihren gesamten Router.

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreload: 'intent',
})

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreload: 'intent',
})

Dadurch wird das intent-Preloading standardmäßig für alle <Link>-Komponenten in Ihrer Anwendung aktiviert. Sie können auch die Eigenschaft preload auf einzelnen <Link>-Komponenten setzen, um das Standardverhalten zu überschreiben.

Standardmäßig beginnt das Vorabladen nach **50 ms** des Hoverns oder Berührens einer <Link>-Komponente durch den Benutzer. Sie können diese Verzögerung ändern, indem Sie die Option defaultPreloadDelay für Ihren Router festlegen.

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadDelay: 100,
})

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadDelay: 100,
})

Sie können auch die Eigenschaft preloadDelay auf einzelnen <Link>-Komponenten setzen, um das Standardverhalten pro Link zu überschreiben.

Wenn Sie die integrierten Loader verwenden, können Sie steuern, wie lange vorab geladene Daten als frisch gelten, bis ein weiteres Preload ausgelöst wird, indem Sie entweder routerOptions.defaultPreloadStaleTime oder routeOptions.preloadStaleTime auf eine Anzahl von Millisekunden setzen. **Standardmäßig gelten vorab geladene Daten 30 Sekunden lang als frisch.**.

Um dies zu ändern, können Sie die Option defaultPreloadStaleTime für Ihren Router festlegen.

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadStaleTime: 10_000,
})

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadStaleTime: 10_000,
})

Oder Sie können die Option routeOptions.preloadStaleTime für einzelne Routen verwenden.

// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => fetchPost(params.postId),
  // Preload the route again if the preload cache is older than 10 seconds
  preloadStaleTime: 10_000,
})

// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => fetchPost(params.postId),
  // Preload the route again if the preload cache is older than 10 seconds
  preloadStaleTime: 10_000,
})

Wenn Sie externe Caching-Bibliotheken wie React Query integrieren, die eigene Mechanismen zur Bestimmung veralteter Daten haben, möchten Sie möglicherweise die Standard-Preloading- und Stale-While-Revalidate-Logik von TanStack Router überschreiben. Diese Bibliotheken verwenden oft Optionen wie staleTime, um die Aktualität von Daten zu steuern.

Um das Preloading-Verhalten in TanStack Router anzupassen und die Caching-Strategie Ihrer externen Bibliothek vollständig zu nutzen, können Sie das integrierte Caching umgehen, indem Sie routerOptions.defaultPreloadStaleTime oder routeOptions.preloadStaleTime auf 0 setzen. Dies stellt sicher, dass alle Preloads intern als veraltet markiert werden und Loader immer aufgerufen werden, sodass Ihre externe Bibliothek, wie z. B. React Query, die Datenladung und das Caching verwalten kann.

Zum Beispiel

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadStaleTime: 0,
})

import { createRouter } from '@tanstack/solid-router'

const router = createRouter({
  // ...
  defaultPreloadStaleTime: 0,
})

Dies würde es Ihnen dann ermöglichen, beispielsweise eine Option wie die staleTime von React Query zu verwenden, um die Aktualität Ihrer Preloads zu steuern.

Wenn Sie eine Route manuell vorab laden müssen, können Sie die Methode des Routers preloadRoute verwenden. Sie akzeptiert ein Standard-TanStack NavigateOptions-Objekt und gibt ein Promise zurück, das aufgelöst wird, wenn die Route vorab geladen ist.

function Component() {
  const router = useRouter()

  useEffect(() => {
    async function preload() {
      try {
        const matches = await router.preloadRoute({
          to: postRoute,
          params: { id: 1 },
        })
      } catch (err) {
        // Failed to preload route
      }
    }

    preload()
  }, [router])

  return <div />
}

function Component() {
  const router = useRouter()

  useEffect(() => {
    async function preload() {
      try {
        const matches = await router.preloadRoute({
          to: postRoute,
          params: { id: 1 },
        })
      } catch (err) {
        // Failed to preload route
      }
    }

    preload()
  }, [router])

  return <div />
}

Wenn Sie nur den JS-Chunk einer Route vorab laden müssen, können Sie die Methode des Routers loadRouteChunk verwenden. Sie akzeptiert ein Routenobjekt und gibt ein Promise zurück, das aufgelöst wird, wenn der Routen-Chunk geladen ist.

function Component() {
  const router = useRouter()

  useEffect(() => {
    async function preloadRouteChunks() {
      try {
        const postsRoute = router.routesByPath['/posts']
        await Promise.all([
          router.loadRouteChunk(router.routesByPath['/']),
          router.loadRouteChunk(postsRoute),
          router.loadRouteChunk(postsRoute.parentRoute),
        ])
      } catch (err) {
        // Failed to preload route chunk
      }
    }

    preloadRouteChunks()
  }, [router])

  return <div />
}

function Component() {
  const router = useRouter()

  useEffect(() => {
    async function preloadRouteChunks() {
      try {
        const postsRoute = router.routesByPath['/posts']
        await Promise.all([
          router.loadRouteChunk(router.routesByPath['/']),
          router.loadRouteChunk(postsRoute),
          router.loadRouteChunk(postsRoute.parentRoute),
        ])
      } catch (err) {
        // Failed to preload route chunk
      }
    }

    preloadRouteChunks()
  }, [router])

  return <div />
}