静态预渲染

静态预渲染是 Nitro 的一项功能，虽然它在 TanStack Start 中可用，但我们仍在探索使用它的最佳实践。请谨慎使用！

静态预渲染是为您的应用程序生成静态 HTML 文件的过程。这对于提高应用程序的性能非常有用，因为它允许您向用户提供预渲染的 HTML 文件，而无需在运行时生成它们，或者用于将静态站点部署到不支持服务器端渲染的平台。

预渲染，由 Nitro 驱动

TanStack Start 构建于 Nitro 之上，这意味着我们可以利用 Nitro 的预渲染功能。 Nitro 可以将您的应用程序预渲染为静态 HTML 文件，然后可以将其提供给用户，而无需在运行时生成它们。要预渲染您的应用程序，您可以将 server.prerender 选项添加到您的 app.config.js 文件中

// app.config.js

import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

// app.config.js

import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

Nitro 配置预渲染文档中记录了许多可用于预渲染的选项，请参考 Nitro 配置预渲染文档。

使用 Nitro 预渲染动态路由

Nitro 附带了一些预构建的钩子，可让您自定义预渲染过程以及其他内容。其中一个钩子是 prerender:routes 钩子。此钩子允许您获取异步数据并将路由添加到要预渲染的路由 Set 集合中。

在此示例中，假设我们有一个博客，其中包含一系列文章。我们想要预渲染每篇文章页面。我们的文章路由如下所示 /posts/$postId。我们可以使用 prerender:routes 钩子来获取我们所有的文章，并将每篇文章路径添加到路由集合中。

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    hooks: {
      'prerender:routes': async (routes) => {
        // fetch the pages you want to render
        const posts = await fetch('https://api.example.com/posts')
        const postsData = await posts.json()

        // add each post path to the routes set
        postsData.forEach((post) => {
          routes.add(`/posts/${post.id}`)
        })
      },
    },
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    hooks: {
      'prerender:routes': async (routes) => {
        // fetch the pages you want to render
        const posts = await fetch('https://api.example.com/posts')
        const postsData = await posts.json()

        // add each post path to the routes set
        postsData.forEach((post) => {
          routes.add(`/posts/${post.id}`)
        })
      },
    },
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

截至撰写本文时，Nitro 钩子文档不包含有关提供的钩子的任何信息。

预渲染，由 Nitro 驱动

使用 Nitro 预渲染动态路由

订阅 Bytes

订阅 Bytes