什么是JavaScript服务端渲染技术【教程】

javaScript服务端渲染（SSR）是让node.js服务器直接执行react/vue组件生成带真实内容的html字符串并一次性发送给浏览器，解决白屏和seo问题；getServerSideProps是Next.js中每次请求时在服务端运行的异步函数，用于取数并注入props，不可使用浏览器API，需注意缓存与性能优化。

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 
{news.map(item => 
{item.title}
)}

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%。

立即学习“Java免费学习笔记（深入）”；

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

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