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 on-the-fly generieren zu müssen, oder für die Bereitstellung statischer Websites auf Plattformen, die kein serverseitiges Rendering unterstützen.

Prerendering

TanStack Start kann Ihre Anwendung in statische HTML-Dateien vorrendern, die dann an Benutzer ausgeliefert werden können, ohne dass sie on-the-fly generiert werden müssen. Um Ihre Anwendung vorzurendern, können Sie die Option prerender zu Ihrer tanstackStart-Konfiguration in der Datei vite.config.ts hinzufügen.

// vite.config.ts

import { tanstackStart } from '@tanstack/solid-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/solid-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