Preact大型内容站点预渲染边界设置及内容变更重渲染策略问询

一、设置预渲染边界，避免全站遍历 #

针对数千上万URL的大型站点，没必要在构建时预渲染所有页面，可通过以下方式控制预渲染范围：

• 手动指定核心路由：在vite.config.js里配置prerender.entries，只把首页、高频分类页、热门内容页这类核心页面加进去，关掉自动爬虫的全量遍历。示例代码：

export default defineConfig({
  plugins: [preact({
    prerender: {
      entries: [
        '/',
        '/popular',
        '/category/tech'
        // 只保留关键路由，不用让爬虫自己找所有链接
      ]
    }
  })]
});

• 限制爬虫遍历深度：配置prerender.crawlDepth，比如设为1，只爬取当前页面直接跳转的链接，不会递归深入多层，避免爬遍全站的嵌套链接。配置示例：

prerender: {
  crawlDepth: 1
}

• 排除非必要路由：用prerender.exclude过滤掉不需要预渲染的页面，比如所有动态生成的文章详情页、归档页等。示例：

prerender: {
  exclude: [/^\/posts\/\d+/, '/archive']
}

• 混合渲染策略：核心页面预渲染，长尾页面改用SSR或者客户端懒加载。长尾页面只在用户首次访问时渲染，既省构建时间，又不影响用户体验。

二、内容变更时确定需重渲染的页面 #

内容修改引发连锁影响时，要精准定位需要更新的页面，不用全量重构：

• 维护内容依赖关系表：建一个映射表，记录每个内容项关联的页面。比如某篇文章标题改了，关联的页面包括它自己的详情页、所属分类页、首页推荐区、相关文章列表页，把这些关联关系提前存好。
• CMS触发更新钩子：在内容管理系统里加个钩子，当内容修改后，自动根据依赖表标记出需要重渲染的URL。
• 写增量预渲染脚本：不用跑全量构建，写个脚本单独渲染标记的页面。直接调用@preact/preset-vite的预渲染API就行，示例：

// 增量预渲染脚本
import { prerender } from '@preact/preset-vite/dist/prerender';

await prerender({
  entries: ['/posts/123', '/category/tech', '/'],
  // 其他预渲染配置和项目一致
});

• 哈希校验缓存：给每个预渲染页面加个哈希标识，内容变更后对比哈希，只有哈希变了的页面才重新渲染。比如构建时在HTML里加<!-- hash: 8a3b7c -->，内容更新后重新算关联页面的哈希，不一致就触发重渲染。

内容的提问来源于stack exchange，提问作者Jason