静态预渲染

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

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

预渲染，由 Nitro 驱动

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

// app.config.js

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

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

// app.config.js

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

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

关于预渲染的许多可用选项都记录在 Nitro 配置预渲染文档。

使用 Nitro 预渲染动态路由

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

对于此示例，让我们假设我们有一个包含帖子列表的博客。我们想要预渲染每个帖子页面。我们的帖子路由看起来像 /posts/$postId。我们可以使用 prerender:routes 钩子来获取我们所有的帖子并将每个帖子路径添加到路由 set 中。

// app.config.ts
import { defineConfig } from '@tanstack/solid-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/solid-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