预渲染 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 =