静态预渲染是指为您的应用程序生成静态 HTML 文件。这对于提高应用程序的性能非常有用,因为它允许您在不实时生成的情况下向用户提供预渲染的 HTML 文件,或者用于将静态站点部署到不支持服务器端渲染的平台。
TanStack Start 可以将您的应用程序预渲染为静态 HTML 文件,然后无需实时生成即可提供给用户。要预渲染您的应用程序,您可以在 vite.config.ts 文件的 tanstackStart 配置中添加 prerender 选项。
// 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' },
},
],
}),
],
})
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。