框架集成：23 SSG静态生成与HTML - 详细教程与实战指南

// Next.js App Router - 静态生成

// 1. 默认静态生成（无动态数据）
// app/about/page.tsx
export default function AboutPage() {
  return <h1>关于我们</h1>;
}
// 构建时自动生成静态HTML

// 2. 带数据的静态生成
// app/posts/[id]/page.tsx
export default async function PostPage({ params }) {
  const post = await getPost(params.id);
  return <article>{post.content}</article>;
}

// 生成静态路径
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ id: String(post.id) }));
}

// 3. ISR - 增量静态再生
// 设置revalidation时间
async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    next: { revalidate: 60 }  // 60秒后重新验证
  });
  return res.json();
}

// 4. On-demand Revalidation（按需重新验证）
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request) {
  const path = request.nextUrl.searchParams.get('path');
  if (path) {
    revalidatePath(path);  // 重新验证指定路径
    return Response.json({ revalidated: true, now: Date.now() });
  }
  return Response.json({ revalidated: false });
}

// 5. 静态导出（完全静态站点）
// next.config.js
module.exports = {
  output: 'export',  // 生成纯静态站点
  images: { unoptimized: true },  // 禁用图片优化
};

// Nuxt.js 静态生成
// nuxt.config.ts
export default defineNuxtConfig({
  // 预渲染所有路由
  nitro: {
    prerender: {
      crawlLinks: true,     // 自动爬取链接
      routes: ['/sitemap.xml'],  // 额外路由
    }
  }
});

// 运行静态生成
// npx nuxi generate

// 混合渲染
// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },        // SSG
    '/blog/**': { swr: 3600 },       // ISR(1小时)
    '/admin/**': { ssr: false },      // CSR
    '/api/**': { cors: true },        // API
  }
});

// ================================
// Astro - 内容优先的静态站点框架
// src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
const posts = await Astro.glob('./blog/*.md');
---
<Layout title="首页">
  <h1>博客文章</h1>
  {posts.map(post => (
    <article>
      <h2><a href={post.url}>{post.frontmatter.title}</a></h2>
      <p>{post.frontmatter.description}</p>
    </article>
  ))}
</Layout>

// Astro的核心优势：
// 1. 零JavaScript默认 - 不发送JS到客户端
// 2. Islands Architecture - 选择性hydration
// 3. 支持多框架组件
//    import ReactComponent from './Component.jsx';
//    import VueComponent from './Component.vue';
//    import SvelteComponent from './Component.svelte';

// Islands Architecture（岛屿架构）
<Layout>
  <!-- 静态HTML，无JS -->
  <h1>文章标题</h1>
  <p>文章内容...</p>

  <!-- 交互岛屿：只有这部分发送JS -->
  <ReactComponent client:load />
  <VueComponent client:visible />
  <SvelteComponent client:idle />
</Layout>

// client:指令
// client:load     - 页面加载时hydration
// client:visible  - 可见时hydration
// client:idle     - 浏览器空闲时hydration
// client:media    - 匹配媒体查询时hydration
// client:only     - 只在客户端渲染（跳过SSR）

// 现代框架支持在同一应用中混合使用不同渲染模式

// Next.js App Router 渲染模式
// 1. 静态生成（默认）
//    - 无fetch的页面自动SSG
//    - 带fetch + cache: 'force-cache' 的页面SSG

// 2. 服务端渲染
//    - fetch + cache: 'no-store'
//    - 使用cookies()/headers()等动态API

// 3. ISR
//    - fetch + next: { revalidate: N }

// 4. CSR
//    - 'use client' + ssr: false
//    - 动态导入

// 渲染模式决策树：
// 页面需要实时数据？
//   是 → 数据变化频率？
//     每次请求都变 → SSR
//     定期变化 → ISR
//   否 → 页面数量？
//     少（<1000） → SSG
//     多（>1000） → ISR + 按需生成

// SvelteKit渲染模式
// +page.ts
export const prerender = true;   // SSG
export const prerender = false;  // SSR
export const ssr = false;        // CSR

// Nuxt路由规则
routeRules: {
  '/': { prerender: true },
  '/blog/*': { swr: 3600 },
  '/admin/*': { ssr: false },
  '/api/*': { cors: true },
}