预渲染 Prerender

以下是关于预渲染（Prerender）的基本知识点总结：

---

一、预渲染核心概念

1. 定义与分类

类型	描述	适用场景
静态预渲染	构建时生成完整HTML页面（如静态站点生成SSG）	博客、文档站、营销页等静态内容
动态预渲染	运行时按需生成页面并缓存（如用户首次访问时生成）	电商商品页、用户主页等半动态内容
混合预渲染	结合静态预渲染 + 动态更新（增量静态再生ISR）	新闻网站、产品列表等部分动态内容

2. 核心价值

• 性能优化：用户访问时直接获取完整HTML，减少客户端渲染时间（FP/FCP优化50%+）
• SEO友好：确保爬虫直接获取完整内容，解决SPA的SEO痛点
• 首屏体验：消除白屏时间，提升用户感知速度

---

二、基础实现方案

1. 静态站点生成（SSG）

// Next.js 示例
export async function getStaticProps() {const data = await fetch('https://api.example.com/posts');return {props: { posts: data }, // 构建时生成静态页面revalidate: 60 // 增量再生（ISR）};
}// 输出路径控制
export async function getStaticPaths() {return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }],fallback: 'blocking' // 动态路径处理策略};
}

2. 动态预渲染服务

# Nginx 配置示例（Prerender.io）
server {location / {if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {proxy_pass http://prerender-service;}try_files $uri $uri/ /index.html;}
}

3. 客户端混合方案

// Vue + vite-plugin-ssg 示例
import { createSSGApp } from 'vite-plugin-ssg'export const createApp = createSSGApp(App, {routes, // 路由配置async onBeforeRender({ route }) {// 预获取数据const data =