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