Vue3Nuxt3打造SSR网站应用

去年接手一个内容型项目，网站需求很直接：SEO要能抓得到，应用首屏速度要快，网站后台编辑发布文章后前端要立刻能搜到。应用SPA那套用久了，网站搜索引擎爬虫拿到的应用基本是个空壳，这次干脆上Nuxt3。网站

Nuxt3底层是应用Vite加Vue3，启动速度比Nuxt2那会儿的网站Webpack快得不是一星半点。装完之后目录结构清爽，应用pages/下面扔文件就是网站路由，不用再手写router.js。应用服务端渲染这块，网站默认ssr: true，应用页面在Node端跑一遍Vue实例，网站吐出完整HTML给浏览器。爬虫拿到的是真内容，不是<div id="app"></div>。

数据获取是SSR的关键。Nuxt3提供了useAsyncData和useFetch两个组合式函数，在setup里调用，服务端渲染时会等数据回来再生成HTML。我一开始习惯性用onMounted里发请求，结果首屏HTML里压根没数据——因为onMounted只在客户端跑。后来改成useAsyncData，配合$fetch，服务端和客户端都能识别，水合（hydration）阶段不会重复请求。

有个坑得提一下：服务端没有window和document。写组件时如果直接访问localStorage或者window.innerWidth，Node端直接报错。解决办法是用process.client或process.server做条件判断，或者把这类逻辑塞进onMounted。我封装了一个useWindowSize组合式函数，内部用process.client兜底，省得每个组件都写一遍。

水合不匹配是另一个高频问题。服务端渲染出的DOM和客户端首次渲染的DOM必须一致，否则Vue会警告并丢弃服务端内容重新渲染。常见诱因是随机数、时间戳、或者依赖浏览器环境的条件渲染。我遇到过表格里用Math.random()做key的，服务端和客户端生成的key不同，直接导致整块内容闪烁。改成稳定ID后问题消失。

部署方面，Nuxt3支持Node服务器、静态生成和边缘函数。我们选的是Node预设，nuxt build之后产出一个.output目录，里面自带一个轻量HTTP服务器。PM2拉起来，前面挂Nginx做反向代理和缓存。静态资源走CDN，HTML走Node动态渲染。实测首字节时间在200ms左右，比之前SPA加预渲染的方案稳得多。

缓存策略得单独设计。文章详情页用routeRules配置swr: 3600，一小时内在后台重新验证，用户拿到的始终是缓存副本，编辑发布后最多一小时生效。列表页用isr按需生成，兼顾速度和实时性。首页这种更新不频繁的，直接prerender: true，构建时生成静态HTML，连Node都不用跑。

开发体验上，Nuxt DevTools挺顺手。组件树、路由、payload都能看，调试SSR数据流比翻日志快。nuxt.config.ts里配好runtimeConfig，敏感变量放private，公开的放public，服务端和客户端各取所需，不用再折腾.env前缀。

这套组合跑了大半年，搜索引擎收录量涨了四成，Lighthouse性能分稳定在90以上。不是银弹，但内容站要SSR，Nuxt3目前是我用过最顺手的方案。