JavaScript服务端渲染（SSR）是让Node.js服务器直接执行React/Vue组件生成带真实内容的HTML字符串并一次性发送给浏览器，解决白屏和SEO问题；getServerSideProps是Next.js中每次请求时在服务端运行的异步函数，用于取数并注入props，不可使用浏览器API，需注意缓存与性能优化。
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、哪些数据必须服务端取、哪些交互可以妥协为客户端补全——这些决策没文档可抄，只能靠一次又一次线上监控和用户反馈来校准。 
