Statisches Prerendering

Statisches Prerendering ist der Prozess der Generierung statischer HTML-Dateien für Ihre Anwendung. Dies kann entweder zur Verbesserung der Leistung Ihrer Anwendung nützlich sein, da es Ihnen ermöglicht, vorgerenderte HTML-Dateien für Benutzer bereitzustellen, ohne sie auf dem Flug generieren zu müssen, oder für die Bereitstellung statischer Websites auf Plattformen, die keine serverseitige Wiedergabe unterstützen.

Prerendering

TanStack Start kann Ihre Anwendung in statische HTML-Dateien preredern, die dann an Benutzer ausgeliefert werden können, ohne sie auf dem Flug generieren zu müssen. Um Ihre Anwendung zu preredern, können Sie die Option prerender zu Ihrer TanStack Start-Konfiguration in der Datei vite.config.ts hinzufügen.

// vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite'

export default defineConfig({
  plugins: [
    tanstackStart({
      prerender: {
        // Enable prerendering
        enabled: true,

        // Enable if you need pages to be at `/page/index.html` instead of `/page.html`
        autoSubfolderIndex: true,

        // How many prerender jobs to run at once
        concurrency: 14,

        // Whether to extract links from the HTML and prerender them also
        crawlLinks: true,

        // Filter function takes the page object and returns whether it should prerender
        filter: ({ path }) => !path.startsWith('/do-not-render-me'),

        // Number of times to retry a failed prerender job
        retryCount: 2,

        // Delay between retries in milliseconds
        retryDelay: 1000,

        // Callback when page is successfully rendered
        onSuccess: ({ page }) => {
          console.log(`Rendered ${page.path}!`)
        },
      },
      // Optional configuration for specific pages (without this it will still automatically
      // prerender all routes)
      pages: [
        {
          path: '/my-page',
          prerender: { enabled: true, outputPath: '/my-page/index.html' },
        },
      ],
    }),
  ],
})

// vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite'

export default defineConfig({
  plugins: [
    tanstackStart({
      prerender: {
        // Enable prerendering
        enabled: true,

        // Enable if you need pages to be at `/page/index.html` instead of `/page.html`
        autoSubfolderIndex: true,

        // How many prerender jobs to run at once
        concurrency: 14,

        // Whether to extract links from the HTML and prerender them also
        crawlLinks: true,

        // Filter function takes the page object and returns whether it should prerender
        filter: ({ path }) => !path.startsWith('/do-not-render-me'),

        // Number of times to retry a failed prerender job
        retryCount: 2,

        // Delay between retries in milliseconds
        retryDelay: 1000,

        // Callback when page is successfully rendered
        onSuccess: ({ page }) => {
          console.log(`Rendered ${page.path}!`)
        },
      },
      // Optional configuration for specific pages (without this it will still automatically
      // prerender all routes)
      pages: [
        {
          path: '/my-page',
          prerender: { enabled: true, outputPath: '/my-page/index.html' },
        },
      ],
    }),
  ],
})

Prerendering

Bytes abonnieren

Bytes abonnieren