服务端渲染与静态生成的页面策略

服务端渲染与静态生成的页面策略服务端渲染和静态生成不是互斥标签而是页面在何时取得数据、如何缓存以及用户首次看到什么内容的选择。页面类型不同答案也不同。把所有路由统一改成同一种模式通常会把本来简单的问题变复杂。先按数据变化方式划分页面帮助文档、公开文章和变动不频繁的介绍页适合在构建时生成再通过缓存或重新验证更新。与登录身份、权限或实时库存相关的页面需要在请求时判断或者先输出通用骨架再由客户端补充个性化数据。选择依据是数据新鲜度和访问体验而不是某个框架默认推荐的模式。无论在哪一侧读取数据都要明确失败后的页面。服务端请求超时不应让用户只看到白屏可以展示已有缓存、错误提示或可重试入口。缓存键也要包含影响内容的语言、地区和权限等条件避免把一个用户的结果意外返回给另一个用户。把服务端能力留在服务端export async function loadArticle(id: string) { const response await fetch(https://example.test/articles/${id}); if (!response.ok) throw new Error(文章读取失败); return response.json(); }示例地址只用于表达错误处理。真实实现需要通过环境配置提供服务端地址并确认调用发生在服务器环境。数据库凭证、内部接口 token 和权限判断不能被打进浏览器包对外发送给组件的数据只保留页面真正需要的字段。处理水合和交互边界服务端输出 HTML 有利于首屏内容可见但需要交互的局部仍要在客户端接管。把整个页面都变成客户端组件会失去服务端渲染的价值反过来把依赖浏览器 API 的逻辑放在服务器也会导致水合不一致。时间、随机数、用户本地存储等值要选择稳定的渲染方式避免服务端和客户端输出不同结构。图表、编辑器和地图这类依赖 DOM 的组件可以延后加载并提供文字摘要或占位结构。这样即使脚本尚未完成下载用户也能理解页面主体而不是看到一个没有意义的空区域。检查缓存与数据边界验证时分别覆盖首次请求、缓存命中、内容更新、接口失败和登录态切换。检查响应头、页面源代码以及浏览器网络请求确认数据没有被错误缓存也没有把敏感字段输出到 HTML。还应检查重定向、未找到页面和搜索引擎可见的元数据是否与渲染策略一致。对于每个页面记录采用该策略的原因和失效规则后续改动数据源时才知道需要同步调整哪里。把实现条件写回方案里阅读这类方案时最值得回看的不是顺利完成的那次而是条件改变后的行为。围绕“先按数据变化方式划分页面”可以故意换掉一个前提缺少必要字段、服务返回慢、配置与预期不同或者任务被中途取消。观察“把服务端能力留在服务端”会怎样接住这个变化再检查“处理水合和交互边界”有没有留下误导性的成功状态。这样得到的是处理规则不是一段漂亮的结论。文档里可以保留一张很短的操作说明触发条件写成可识别的输入输出写明保存位置或可见现象失败时写出停止点和恢复方式。它不用替代正式文档却能帮助后来的人复走“先按数据变化方式划分页面”这条路径。涉及配置时把版本、开关和依赖条件放在同一处涉及异步处理时明确谁负责查看结束状态。如果这部分会被交给同事维护验收不要只问“有没有完成”。更有用的问题是看着“把服务端能力留在服务端”的结果能否判断输入是否被正确消费修改“处理水合和交互边界”后能否找到受影响的地方撤掉这次改动时是否会留下半成品。答案不必承诺绝对安全但应当能对应到代码、配置或现有记录。视觉效果、交互回退和资源释放不能由约定俗成来保证。本文的内容可以先从一个小场景开始使用碰到与假设不符的输入再把新发现补回规则而不是为了整齐把差异抹掉。