JavaScript服务端渲染教程详解

JavaScript服务端渲染（SSR）并非在浏览器中执行JS再生成HTML，而是借助Node.js服务器直接运行React/Vue组件，输出含真实内容的完整HTML字符串一次性送达浏览器，从根本上解决首屏白屏、SEO不可见及登录态个性化展示等关键体验问题；Next.js中的getServerSideProps和Nuxt.js中的useAsyncData虽为常用入口，却暗藏window未定义、数据竞态、缓存失当、服务端压力激增等多重陷阱——真正决定SSR成败的，不是语法细节，而是对页面价值、数据敏感性与用户路径的深度判断，以及持续通过监控与反馈迭代优化的工程定力。

JavaScript服务端渲染（SSR）不是“在浏览器里跑JS再吐HTML”，而是**让Node.js服务器直接执行你的React/Vue组件，生成带真实内容的HTML字符串，一次性发给浏览器**。它解决的是用户打开页面时的“白屏等待”和搜索引擎抓不到动态内容这两大痛点——如果你的页面需要SEO、首屏快于1秒、或展示登录态个性化内容，SSR不是可选项，而是必选项。

getServerSideProps 是 Next.js 里最常用的 SSR 入口函数

它在每次HTTP请求时运行，只存在于服务端，不打包进客户端JS。你用它取数据，Next.js自动把结果注入页面props，并完成HTML拼接。

• 必须是 async 函数，返回 { props: { ... } } 对象
• 不能调用 useState、useEffect 等React Hook——它根本不在组件生命周期里
• 可以返回 { redirect: { destination: '/login' } } 或 { notFound: true }，无需手写状态码
• 开发时改完保存，Next.js dev server 自动热重载该函数逻辑，不用重启

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/news')
  const news = await res.json()
  return { props: { news } }
}

export default function NewsPage({ news }) {
  return <main>{news.map(item => <h2 key={item.id}>{item.title}</h2>)}

SSR 渲染失败的典型错误：ReferenceError: window is not defined

这是新手踩得最多的一坑：你在组件顶层或 getServerSideProps 里写了 window.localStorage、document.cookie、new Image() 这类浏览器专属API。Node.js环境没有 window，直接报错中断渲染。

• 检查所有第三方库是否支持SSR（比如某些图表库、埋点SDK默认只适配CSR）
• 把浏览器相关逻辑移到 useEffect 或 if (typeof window !== 'undefined') 判断块内
• 图片懒加载、字体加载等资源操作，不要在服务端触发，留到客户端水合后处理

Vue 中用 useAsyncData 实现等效逻辑，但行为更隐式

Nuxt.js 的 useAsyncData 看似简单，实则暗藏陷阱：它默认在服务端执行，但返回的数据会自动序列化进 __NUXT__ 全局对象，客户端启动时复用——这个过程叫“脱水/注水”。一旦你在 setup() 里提前访问未就绪的数据，可能得到 undefined。

• 别在 onMounted 外直接解构 data.value，要用 await nextTick() 或 v-if="data" 做空值防护
• 如果接口依赖 cookie 或 header（如鉴权），需显式传入 event 参数：useAsyncData(() => $fetch('/api/user', { headers: event.req.headers }))
• useAsyncData 不会自动重试或缓存，高频接口建议加 key 和 transform 控制输出结构

SSR 不是银弹：服务器负载和缓存策略必须同步设计

每请求都跑一遍组件+API调用，对Node进程是实打实的压力。一个未缓存的博客详情页QPS过百，CPU就可能飙到90%。

• 静态内容（如文章正文、作者信息）优先走CDN缓存，设置 Cache-Control: public, max-age=3600
• 个性化内容（如“你好，张三”）拆成两层：骨架HTML缓存 + 客户端异步拉取用户信息并局部更新
• Vercel/Netlify 等平台支持边缘缓存，比应用层缓存更靠近用户，延迟更低
• 千万别在 getServerSideProps 里做耗时计算（如PDF生成、大数组排序），应前置到构建时或后台任务

真正难的从来不是“怎么写个 getServerSideProps”，而是判断哪些页面值得SSR、哪些数据必须服务端取、哪些交互可以妥协为客户端补全——这些决策没文档可抄，只能靠一次又一次线上监控和用户反馈来校准。

理论要掌握，实操不能落！以上关于《JavaScript服务端渲染教程详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！