[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"public:announcements":3,"post:detail:post-2-Nuxt3进阶:zh":4,"public:navigations:zh":58,"footer:categories:zh":103},[],{"id":5,"title":6,"subtitle":7,"slug":8,"source":9,"source_url":7,"audio":7,"video":7,"video_url":7,"content":10,"excerpt":11,"cover_image":7,"author":12,"category":16,"tags":24,"status":50,"visibility":51,"password":7,"views":52,"likes_count":23,"is_pinned":53,"allow_comments":30,"comments_count":54,"is_password_protected":53,"meta_title":6,"meta_description":11,"meta_keywords":55,"created_at":56,"published_at":56,"updated_at":57,"reading_time":13},2,"Nuxt 3 进阶 - SSR 与 SSG 深度解析",null,"post-2-Nuxt3进阶","原创","# Nuxt 3 进阶 - SSR 与 SSG 深度解析\n\nNuxt 3 代表了 Vue 生态中全栈框架的最高水准。其全新的 Nitro 引擎统一了服务端和构建时的渲染逻辑，让 SSR、SSG、ISR 的切换变得前所未有地简单。\n\n## 三种渲染模式的本质差异\n\n理解 Nitro 的工作机制，首先需要明确三种渲染模式在请求生命周期上的不同：\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { useAsyncData, useFetch, definePageMeta } from '#app'\n\ndefinePageMeta({\n  name: 'products-id',\n  path: '\u002Fproducts\u002F:id',\n  middleware: ['auth'],\n  layout: 'shop'\n})\n\nconst route = useRoute()\nconst { data: product, pending, refresh, error } = await useAsyncData(\n  `product-${route.params.id}`,\n  () => $fetch(`\u002Fapi\u002Fproducts\u002F${route.params.id}`),\n  {\n    server: true,\n    lazy: false,\n    default: () => ({}),\n    transform: (res) => ({\n      ...res,\n      formattedPrice: new Intl.NumberFormat('zh-CN', {\n        style: 'currency',\n        currency: 'CNY'\n      }).format(res.price)\n    })\n  }\n)\n\nconst { data: related } = await useFetch(\n  '\u002Fapi\u002Fproducts\u002Frelated',\n  {\n    params: { id: route.params.id, limit: 4 },\n    pick: ['items']\n  }\n)\n\nuseHead({\n  title: () => product.value?.name,\n  meta: [\n    { name: 'description', content: () => product.value?.description }\n  ]\n})\n\nconst isrTimestamp = ref(Date.now())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"product-page\">\n    \u003CSuspense>\n      \u003Ctemplate #default>\n        \u003CProductDetail v-if=\"product\" :product=\"product\" \u002F>\n        \u003Cdiv v-else-if=\"error\" class=\"error\">{{ error.message }}\u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #fallback>\n        \u003CProductSkeleton \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FSuspense>\n    \u003CRelatedProducts v-if=\"related\" :items=\"related.items\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## 性能与成本对比\n\n| 渲染模式 | 首屏 TTFB | 可交互时间 TTI | 服务器成本 | SEO 友好 | 适用场景 |\n|:---|:---|:---|:---|:---|:---|\n| SSR | ⚡ 300-600ms | ✅ 优秀 | 💸 高 | ✅ 最佳 | 个性化、实时数据 |\n| SSG | ⚡⚡⚡ \u003C50ms | ✅ 最佳 | 🆓 极低 | ✅ 最佳 | 文档、博客、产品页 |\n| ISR | ⚡⚡ \u003C100ms* | ✅ 优秀 | 💰 中 | ✅ 良好 | 电商、新闻、中低频更新 |\n| CSR (SPA) | 🐢 200ms + JS | ❌ 较差 | 🆓 极低 | ⚠️ 需额外处理 | Dashboard、后台管理 |\n\n*首次访问后命中缓存的情况\n\n## 缓存策略配置\n\nNitro 提供了多层缓存机制。对于 SSR 页面，可以通过 routeRules 配置 CDN 级缓存：\n\n```ts\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  routeRules: {\n    '\u002Fproducts\u002F**': { swr: 3600 },\n    '\u002Fapi\u002F**': { swr: 60, cache: { maxItems: 1000 } },\n    '\u002Fstatic\u002F**': { static: true }\n  }\n})\n```\n\nSWR（Stale-While-Revalidate）模式让用户在后台刷新数据的同时立即返回缓存响应，兼顾了性能和数据新鲜度。\n\n## 水合优化技巧\n\nSSR 模式下，客户端需要对服务端渲染的 HTML 进行水合（Hydration）。常见的性能陷阱包括：\n\n1. **Payload 过大**：使用 `definePageMeta` 的 `payloadExtractor` 精简传递给客户端的数据\n2. **过早水合**：使用 `\u003CClientOnly>` 包裹非首屏必须的交互组件\n3. **重复请求**：合理设置 useAsyncData 的 key，利用 Nitro 自动的数据去重\n\n## 最佳实践\n\n1. **默认用 SSG**，除非页面强依赖实时或个性化数据\n2. **组合渲染模式**：首页 SSG + 详情页 ISR + 用户中心 SSR，而不是一刀切\n3. **善用 Nitro API Routes**，避免单独部署后端服务（对于中小项目）\n4. **监控 TTFB 分布**，如果 P95 > 1s，考虑开启缓存或切换 ISR\n5. **使用 `nuxt build --prerender`** 预渲染高频页面，降低冷启动耗时\n\n## 总结\n\nNuxt 3 的 Nitro 引擎彻底抹平了 SSR 与 SSG 的开发差异。开发者只需关注业务逻辑，通过配置文件即可在不同渲染模式间切换。选择渲染模式的关键在于：页面更新频率 × 内容个性化程度 × 团队运维能力。","Nuxt 3 基于 Vue 3 和 Vite 构建，带来了全新的渲染引擎 Nitro。本文深入剖析服务端渲染(SSR)、静态站点生成(SSG)、增量静态再生(ISR)三种核心模式的工作原理、适用场景与性能差异。配合真实代码演示如何配置渲染策略、优化首屏加载时间、处理缓存策略，打造极致用户体验。",{"id":13,"username":14,"nickname":14,"avatar":7,"cover_image":7,"bio":7,"website":7,"github":7,"avatar_source":7,"resolved_avatar_url":7,"title":7,"created_at":15},1,"Choyeon","2026-09-30T18:09:53.330367Z",{"id":5,"name":17,"slug":18,"description":19,"icon":20,"color":21,"cover_image":7,"created_at":22,"post_count":23},"教程","tutorial","从零开始的实战教程，步骤清晰，代码完整，适合各阶段开发者学习","heroicons:academic-cap","#10b981","2026-09-30T18:09:53.641581Z",0,[25,32,38,44],{"id":26,"name":27,"slug":28,"color":29,"icon":7,"is_active":30,"created_at":31,"post_count":23},3,"Vue","vue","#42b883",true,"2026-09-30T18:09:53.672512Z",{"id":33,"name":34,"slug":35,"color":36,"icon":7,"is_active":30,"created_at":37,"post_count":23},15,"性能优化","performance","#f97316","2026-09-30T18:09:53.707190Z",{"id":39,"name":40,"slug":41,"color":42,"icon":7,"is_active":30,"created_at":43,"post_count":23},19,"Nuxt","nuxt","#00dc82","2026-09-30T18:09:53.718454Z",{"id":45,"name":46,"slug":47,"color":48,"icon":7,"is_active":30,"created_at":49,"post_count":23},26,"Frontend","frontend","#94a3b8","2026-09-30T18:09:53.760103Z","published","public",394,false,6,"Nuxt,Vue,Frontend,性能优化","2026-08-18T23:09:53.733462Z","2026-10-01T10:19:19.004506Z",[59,68,74,81,89,97],{"id":13,"title":60,"url":65,"icon":7,"parent_id":7,"location":66,"order":13,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},{"zh":61,"en":62,"ja":63,"zh_TW":64},"首页","Home","ホーム","首頁","\u002F","header","2026-09-30T18:09:54.251095Z",{"id":5,"title":69,"url":73,"icon":7,"parent_id":7,"location":66,"order":5,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},{"zh":70,"en":71,"ja":72,"zh_TW":70},"文章","Posts","記事","\u002Fposts",{"id":26,"title":75,"url":80,"icon":7,"parent_id":7,"location":66,"order":26,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},{"zh":76,"en":77,"ja":78,"zh_TW":79},"分类","Categories","カテゴリー","分類","\u002Fcategories",{"id":82,"title":83,"url":88,"icon":7,"parent_id":7,"location":66,"order":82,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},4,{"zh":84,"en":85,"ja":86,"zh_TW":87},"标签","Tags","タグ","標籤","\u002Ftags",{"id":90,"title":91,"url":96,"icon":7,"parent_id":7,"location":66,"order":90,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},5,{"zh":92,"en":93,"ja":94,"zh_TW":95},"关于","About","概要","關於","\u002Fpage\u002Fabout",{"id":54,"title":98,"url":102,"icon":7,"parent_id":7,"location":66,"order":54,"is_active":30,"target_blank":53,"created_at":67,"updated_at":7},{"zh":99,"en":100,"ja":101,"zh_TW":99},"留言板","Guestbook","ゲストブック","\u002Fpage\u002Fguestbook",[104,120,128,141,156,171,186,200],{"id":13,"name":105,"slug":110,"description":111,"icon":116,"color":117,"cover_image":7,"created_at":118,"post_count":119},{"en":106,"ja":107,"zh":108,"zh_Hant":109},"Technology","テクノロジー","技术","技術","technology",{"en":112,"ja":113,"zh":114,"zh_Hant":115},"Cutting-edge technology exploration and in-depth analysis covering programming languages, frameworks, and architecture design","プログラミング言語、フレームワーク、アーキテクチャ設計を含む先端技術の探究","前沿技术探索与深度分析，涵盖编程语言、框架、架构设计等核心领域","前沿技術探索與深度分析，涵蓋編程語言、框架、架構設計等核心領域","heroicons:cog-6-tooth","#6366f1","2026-09-30T18:09:53.633610Z",8,{"id":5,"name":121,"slug":18,"description":124,"icon":20,"color":21,"cover_image":7,"created_at":22,"post_count":54},{"en":122,"ja":123,"zh":17,"zh_Hant":17},"Tutorial","チュートリアル",{"en":125,"ja":126,"zh":19,"zh_Hant":127},"Hands-on tutorials from scratch with clear steps and complete code for developers at all levels","ゼロから始める実践的なチュートリアル。明確な手順と完全なコードで、全てのレベルの開発者に最適","從零開始的實戰教程，步驟清晰，代碼完整，適合各階段開發者學習",{"id":26,"name":129,"slug":47,"description":132,"icon":137,"color":138,"cover_image":7,"created_at":139,"post_count":140},{"en":46,"ja":130,"zh":131,"zh_Hant":131},"フロントエンド","前端",{"en":133,"ja":134,"zh":135,"zh_Hant":136},"Full coverage of web frontend development including Vue, React, new CSS features, and performance optimization","Vue、React、CSSの新機能やパフォーマンス最適化を含むWebフロントエンド開発の全領域","Web前端开发全栈覆盖，包括Vue、React、CSS新特性及性能优化等话题","Web前端開發全棧覆蓋，包括Vue、React、CSS新特性及性能優化等話題","heroicons:computer-desktop","#ec4899","2026-09-30T18:09:53.644838Z",7,{"id":82,"name":142,"slug":147,"description":148,"icon":153,"color":154,"cover_image":7,"created_at":155,"post_count":26},{"en":143,"ja":144,"zh":145,"zh_Hant":146},"Backend","バックエンド","后端","後端","backend",{"en":149,"ja":150,"zh":151,"zh_Hant":152},"Server-side development best practices including API design, database optimization, and microservices architecture","API設計、データベース最適化、マイクロサービスアーキテクチャを含むサーバーサイド開発の実践","服务端开发实战经验，API设计、数据库优化、微服务架构等深度内容","服務端開發實戰經驗，API設計、數據庫優化、微服務架構等深度內容","heroicons:server-stack","#f59e0b","2026-09-30T18:09:53.647836Z",{"id":90,"name":157,"slug":162,"description":163,"icon":168,"color":169,"cover_image":7,"created_at":170,"post_count":23},{"en":158,"ja":159,"zh":160,"zh_Hant":161},"Fullstack","フルスタック","全栈","全棧","fullstack",{"en":164,"ja":165,"zh":166,"zh_Hant":167},"End-to-end development guides covering the full project lifecycle and technology stack selection","フロントエンドからバックエンドまでの開発プロセス全体をカバーするガイド","从前端到后端的全流程开发指南，覆盖完整项目生命周期与技术选型","從前端到後端的全流程開發指南，覆蓋完整項目生命週期與技術選型","heroicons:swatch","#8b5cf6","2026-09-30T18:09:53.650513Z",{"id":54,"name":172,"slug":177,"description":178,"icon":183,"color":184,"cover_image":7,"created_at":185,"post_count":82},{"en":173,"ja":174,"zh":175,"zh_Hant":176},"Essays","エッセイ","随笔","隨筆","essays",{"en":179,"ja":180,"zh":181,"zh_Hant":182},"Technical reflections and development insights recording the programmer's growth journey","プログラマーの成長の軌跡を記録する技術的考察と開発の洞察","技术思考与开发心得分享，记录程序员成长路上的点滴感悟","技術思考與開發心得分享，記錄程序員成長路上的點滴感悟","heroicons:pencil-square","#f43f5e","2026-09-30T18:09:53.653105Z",{"id":140,"name":187,"slug":191,"description":192,"icon":197,"color":198,"cover_image":7,"created_at":199,"post_count":82},{"en":188,"ja":189,"zh":190,"zh_Hant":190},"Tools","ツール","工具","tools",{"en":193,"ja":194,"zh":195,"zh_Hant":196},"Development toolchain and productivity tool recommendations to supercharge your development experience","開発効率を飛躍的に向上させるツールチェーンと生産性ツールの推奨","开发工具链与效率提升利器推荐，让你的开发体验如虎添翼","開發工具鏈與效率提升利器推薦，讓你的開發體驗如虎添翼","heroicons:wrench-screwdriver","#06b6d4","2026-09-30T18:09:53.655605Z",{"id":119,"name":201,"slug":206,"description":207,"icon":212,"color":213,"cover_image":7,"created_at":214,"post_count":23},{"en":202,"ja":203,"zh":204,"zh_Hant":205},"Translation","翻訳","翻译","翻譯","translation",{"en":208,"ja":209,"zh":210,"zh_Hant":211},"Curated translations of high-quality foreign technical articles to keep up with international trends","国際的な技術トレンドを追うための厳選された海外技術記事の翻訳","优质外文技术文章精选翻译，紧跟国际技术前沿动态","優質外文技術文章精選翻譯，緊跟國際技術前沿動態","heroicons:language","#84cc16","2026-09-30T18:09:53.658041Z"]