[{"data":1,"prerenderedAt":222},["ShallowReactive",2],{"site-settings":3,"$f_xbhK5gU6nZIlFmeJLCOa--A-9X_lXDynIQ3uTIUPgc":26,"related-posts":50,"$fqEdhhRvSYkvgEq4HUDnoCjcFXbkKOKoxzydw6Fi7aMA":221},{"id":4,"site_name":5,"site_subtitle":6,"site_description":7,"author":8,"email":9,"github":10,"icp":10,"page_size":11,"enable_comment":12,"enable_rss":12,"updated_at":13,"site_icon":14,"site_og_image":15,"site_keywords":16,"site_og_image_width":24,"site_og_image_height":25},1,"LiteSite（轻站）","把你想做的网站说出来","LiteSite（轻站）探索自然语言驱动的零代码建站体验，展示响应式网站与前端原型的设计方向。","Admin","support@litesite.com",null,10,true,"2026-10-05T03:56:44.502+00:00","https:\u002F\u002Fnklbhnvyoggxghtaoizu.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-images\u002F2026-10-05-1765bce7-01f1-4206-8d5d-6a717d17f206.png","https:\u002F\u002Fnklbhnvyoggxghtaoizu.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-images\u002F2026-10-05-157c3c1d-2722-474c-860b-d3f38d6a674d.png",[17,18,19,20,21,22,23],"LiteSite","轻站","零代码建站","AI建站","响应式网站","前端原型","网站设计",1200,630,{"id":27,"slug":28,"title":29,"summary":30,"content":31,"status":32,"tags":33,"seo_keywords":39,"published_at":45,"updated_at":46,"category":47},18,"how-nuxt-ssr-works","Nuxt 的 SSR 是怎么做的？从请求、数据获取到 Hydration","沿着一次文章页请求，看 Nuxt 如何用 Nitro 接收请求、在服务端执行 useFetch 并生成 HTML，再由浏览器复用 payload 完成 Hydration。","Nuxt SSR（服务端渲染）做的事，是在首次请求时先运行页面组件、取得必要数据，并在服务端把 Vue 页面渲染成 HTML 发给浏览器。浏览器可以先显示内容，再加载客户端代码接管交互。理解它，最好沿着一次请求走，而不是把 SSR 简化成“服务器返回一段 HTML”。以下以 Nuxt 4 的文章详情页为例。\n\n![Nuxt SSR 流程图：HTTP 请求、Nitro 处理、Vue 服务端渲染、浏览器 Hydration](https:\u002F\u002Fnklbhnvyoggxghtaoizu.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-images\u002F2026-10-05-f7ebdfc8-c117-41eb-98f4-7e0606b6338c.png)\n\n*图：这是首次访问页面的主流程；站内导航和预渲染各有不同的执行时机。*\n\n## 第一步：请求先到 Nitro\n\n用户直接打开 \u002Fblog\u002F某篇文章，浏览器发出 HTTP 请求。Nuxt 的服务端运行时 Nitro 接收请求，应用路由和相关规则，再把页面交给 Nuxt 渲染。如果页面调用本站的 \u002Fapi\u002Fposts\u002F:slug，这个接口也是 Nitro 的服务端路由；它可以查询数据库并返回文章数据。\n\n这里要分清页面请求与 API 请求：页面请求最终要产生 HTML，API 路由返回数据。Nuxt 能把这两者放在同一项目里，但权限和缓存边界仍要单独设计。本博客公开文章走可公开的数据读取，后台草稿则不能被共享缓存或匿名请求泄露。\n\n## 第二步：服务端执行页面的 setup 和数据获取\n\nNuxt 为这次请求创建渲染上下文，匹配页面组件并执行其 setup。文章页可以这样写一个简化版本：\n\n~~~vue\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { data: post, error } = await useFetch(\n  () => '\u002Fapi\u002Fposts\u002F' + route.params.slug\n)\nif (error.value) {\n  throw createError({ statusCode: error.value.statusCode || 500 })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle v-if=\"post\">\n    \u003Ch1>{{ post.title }}\u003C\u002Fh1>\n    \u003Cp>{{ post.summary }}\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n~~~\n\n在首次服务端渲染中，Nuxt 等待这个异步数据操作完成，随后把文章标题和摘要写进返回的 HTML。使用 useFetch 或 useAsyncData 的另一个关键点是：结果会进入 Nuxt 的 payload，供浏览器启动时复用。实际本站的文章详情页也使用了 await useFetch 来读取按 slug 查询的文章。\n\n如果只在 onMounted 中请求数据，服务端不会执行那段逻辑，首份 HTML 里通常没有文章正文。直接在页面 setup 中用普通 $fetch 虽然能在服务端拿到数据，却可能在客户端初始化时重复请求；面向页面状态时优先用 Nuxt 的异步数据 API。\n\n## 第三步：返回 HTML，也带上可复用的数据\n\n服务端根据组件状态生成 HTML，同时输出页面所需的头部信息、资源链接和序列化的数据 payload。浏览器收到响应后，即使 JavaScript 还没完成加载，也可以解析并展示已有的标题、正文等内容。这有利于首屏内容呈现和需要读取 HTML 的访问者，但并不自动保证页面快或搜索排名高：数据库响应、服务端计算和网络传输仍会影响等待时间。\n\n不要把包含用户私人信息的 HTML 或 payload 放进公共缓存。只有对所有访问者都相同的响应，才适合按公开页面的方式共享缓存。\n\n## 第四步：浏览器 Hydration 接管交互\n\n客户端 JavaScript 加载后，Vue 会依据相同的组件结构和 payload 对已有 HTML 做 hydration：复用服务端输出的 DOM，挂上事件处理，并继续维护响应式状态。因为首屏数据已在 payload 中，正常情况下不必为了同一份数据再请求一次。随后点击 NuxtLink 进入其他页面时，通常由客户端路由更新视图和按需取数，不会每次都重新下载整份 HTML 文档。\n\n若服务端和浏览器首次计算出的内容不同，会出现 hydration mismatch。例如在渲染阶段直接使用随机数、当前时间、window 或 localStorage，可能让两端产生不同输出。浏览器专属逻辑放在 onMounted 中，或把需要一致的值在服务端算好并通过数据传给客户端。\n\n## SSR 与预渲染不是一回事\n\nSSR 通常在请求到来时生成 HTML；预渲染在构建时就生成 HTML 文件，访问时直接返回它。本站的配置允许构建工具发现并预渲染公开文章页，而后台和 API 路由被排除在静态预渲染之外。因此部署方式很关键：如果只托管静态文件，依赖 Nitro 的实时后台与 API 仍需另有服务。\n\n二者都能让首份响应包含内容，但数据更新时机不同。经常变化或按用户变化的页面，需要实时服务端处理或其他合适的数据更新策略；相对稳定的公开文章可以考虑预渲染与缓存。\n\n## 怎么确认 SSR 真正生效\n\n直接请求文章 URL，查看响应的原始 HTML 中是否已经有标题和正文；再看浏览器控制台是否有 hydration 警告、网络面板是否无故重复拉取首屏数据。最后测试关闭 JavaScript 后的可读内容，以及从站内链接进入同一文章时的数据加载。若两种入口表现不同，就分别检查服务端数据获取与客户端导航逻辑。\n\nNuxt SSR 的核心链路可以概括为：请求进入 Nitro，页面在服务端取得数据并渲染 HTML，payload 把状态带到浏览器，Hydration 接管交互。把这四步和预渲染、客户端导航分清，才能正确排查“首屏空白”“重复请求”和“服务端正常、浏览器报错”等常见问题。","published",[34,36],{"name":35,"slug":35},"工程",{"name":37,"slug":38},"Nuxt","nuxt",[40,41,42,43,44],"Nuxt SSR","Nuxt服务端渲染","Nuxt useFetch","Hydration","Nitro渲染流程","2026-10-05T03:55:36.035+00:00","2026-10-05T03:55:39.832172+00:00",{"id":48,"name":49,"slug":49},3,"技术笔记",{"items":51,"total":219,"page":4,"pageSize":220},[52,69,85,101,121,127,143,159,174,187,202],{"id":53,"slug":54,"title":55,"summary":56,"status":32,"tags":57,"seo_keywords":61,"published_at":67,"category":68},22,"llm-output-instability-hallucination","模型返回不稳定 \u002F 幻觉怎么办？","区分随机波动与事实幻觉，沿着样本评测、证据检索、结构校验、业务规则和人工回退建立可验证的大模型输出链路。",[58,59],{"name":35,"slug":35},{"name":60,"slug":60},"大模型",[62,63,64,65,66],"模型幻觉怎么办","大模型输出不稳定","LLM幻觉","RAG事实校验","模型评测","2026-10-05T04:17:13.315+00:00",{"id":48,"name":49,"slug":49},{"id":70,"slug":71,"title":72,"summary":73,"status":32,"tags":74,"seo_keywords":77,"published_at":83,"category":84},21,"llm-cost-budget-guardrails","大模型调用怎么控制成本？把预算控制放进请求链路","从请求准入、原子预留、真实用量结算到超支降级，设计一套能在并发与重试下运行的大模型调用预算控制链路。",[75,76],{"name":35,"slug":35},{"name":60,"slug":60},[78,79,80,81,82],"大模型调用成本控制","LLM预算管理","Token费用","模型调用限额","API成本监控","2026-10-05T04:14:07.621+00:00",{"id":48,"name":49,"slug":49},{"id":86,"slug":87,"title":88,"summary":89,"status":32,"tags":90,"seo_keywords":93,"published_at":99,"category":100},20,"llm-structured-output-reliability","结构化输出怎么保证模型按格式返回？","模型返回 JSON 不等于系统拿到可用数据。本文区分提示词、JSON 模式与 Schema 约束，说明如何用服务端校验、有限重试和业务规则构建可靠的结构化输出链路。",[91,92],{"name":35,"slug":35},{"name":60,"slug":60},[94,95,96,97,98],"大模型结构化输出","JSON Schema","模型按格式返回","LLM输出校验","约束解码","2026-10-05T04:10:02.025+00:00",{"id":48,"name":49,"slug":49},{"id":102,"slug":103,"title":104,"summary":105,"status":32,"tags":106,"seo_keywords":113,"published_at":119,"category":120},19,"geo-vs-seo-explained","理解 GEO 是什么？和 SEO 有什么区别？","GEO 是什么，和 SEO 有什么区别？从用户提问、内容呈现、优化动作与衡量指标四个角度讲清两者的关系，并给出一套适合建站团队的入门做法。",[107,110],{"name":108,"slug":109},"建站","jianzhan",{"name":111,"slug":112},"GEO","geo",[114,115,116,117,118],"GEO是什么","GEO和SEO的区别","生成式引擎优化","SEO","AI搜索优化","2026-10-05T04:07:05.673+00:00",{"id":48,"name":49,"slug":49},{"id":27,"slug":28,"title":29,"summary":30,"status":32,"tags":122,"seo_keywords":125,"published_at":45,"category":126},[123,124],{"name":35,"slug":35},{"name":37,"slug":38},[40,41,42,43,44],{"id":48,"name":49,"slug":49},{"id":128,"slug":129,"title":130,"summary":131,"status":32,"tags":132,"seo_keywords":135,"published_at":141,"category":142},17,"llm-api-cost-control","大模型调用怎么控制成本？一笔账算清缓存、输出与重试","先按输入、输出和额外调用算清单次成本，再用缓存、模型路由、上下文裁剪和预算限额降本，并用可用答案质量守住效果。",[133,134],{"name":35,"slug":35},{"name":60,"slug":60},[136,137,138,139,140],"大模型调用成本","LLM API成本控制","Token费用计算","提示词缓存","模型路由","2026-10-05T03:49:26.666+00:00",{"id":48,"name":49,"slug":49},{"id":144,"slug":145,"title":146,"summary":147,"status":32,"tags":148,"seo_keywords":151,"published_at":157,"category":158},16,"geo-technical-pipeline-design","GEO 的技术链路你会怎么设计？","从问题池、证据库、可读页面到答案采样与质量回写，设计一条可维护的 GEO 技术链路，并明确外部 AI 系统的边界。",[149,150],{"name":35,"slug":35},{"name":111,"slug":112},[152,153,154,155,156],"GEO技术链路","GEO技术方案","生成式引擎优化架构","AI搜索内容工程","GEO监测","2026-10-05T03:44:34.947+00:00",{"id":48,"name":49,"slug":49},{"id":160,"slug":161,"title":162,"summary":163,"status":32,"tags":164,"seo_keywords":166,"published_at":172,"category":173},15,"geo-core-metrics-calculation","GEO 的核心指标你怎么理解？怎么算？","用同一组问题和明确的分母，算清 GEO 的品牌提及率、引用率、有效引用率、竞争提及份额与有效线索率。",[165],{"name":111,"slug":112},[167,168,169,170,171],"GEO核心指标","GEO指标怎么算","品牌提及率","AI引用率","生成式引擎优化效果","2026-10-05T03:40:09.175+00:00",{"id":48,"name":49,"slug":49},{"id":175,"slug":176,"title":177,"summary":178,"status":32,"tags":179,"seo_keywords":182,"published_at":185,"category":186},14,"geo-business-understanding","GEO 从业务理解开始：把真实问题写成可引用的内容","做 GEO 之前，先弄清业务服务谁、用户在什么场景下提问、哪些证据能支持回答，再用真实问题和业务结果验证内容。",[180,181],{"name":108,"slug":109},{"name":111,"slug":112},[111,116,183,184,118],"业务理解","GEO内容策略","2026-10-05T03:33:52.358+00:00",{"id":48,"name":49,"slug":49},{"id":188,"slug":189,"title":190,"summary":191,"status":32,"tags":192,"seo_keywords":194,"published_at":200,"category":201},13,"website-launch-checklist","网站上线前后检查清单：从可访问到可维护","一份实用的网站上线清单，逐项检查域名、HTTPS、手机体验、页面速度、SEO、表单、备份与上线后的监测。",[193],{"name":35,"slug":35},[195,196,197,198,199],"网站上线检查清单","网站上线","网站性能优化","网站SEO","网站维护","2026-10-05T03:24:44.969+00:00",{"id":48,"name":49,"slug":49},{"id":203,"slug":204,"title":205,"summary":206,"status":32,"tags":207,"seo_keywords":209,"published_at":215,"category":216},12,"website-planning-checklist","建站之前：用一张页面清单理清目标、结构与内容","从网站目标、访问者任务到页面清单和内容准备，用一套可执行的方法完成建站规划，避免边做边改。",[208],{"name":35,"slug":35},[210,211,212,213,214],"建站规划","网站信息架构","网站内容规划","页面清单","个人网站建设","2026-10-05T03:23:27.683+00:00",{"id":217,"name":218,"slug":218},7,"项目实践",11,100,[],1791174017644]