主要观点：静态网站无需呆板，借助 JavaScript 可从 API 获取数据并动态更新页面，这就是“仅 API”方法的理念，团队应关注其快速、廉价、简单的特点，该指南涵盖流程、数据安全处理、速度、SEO 和可靠性等方面，介绍了“仅 API”模式下静态网站获取动态内容的方式及不同模型的差异，还包括选择 API、构建动态部分、设置数据获取、处理加载错误等内容。

关键信息：

• “仅 API”模式下，用户打开静态页面，JavaScript 调用 API 获取 JSON 并转化为 HTML 更新 DOM 实现动态内容。
• 与 SSR（服务器端渲染）和 SSG（静态生成）不同，“仅 API”在页面加载后由浏览器构建视图，适用于首次绘制后可数据水化的页面。
• 适合“仅 API”的场景有公共或半公共数据、读重内容等，不适合的有需首次加载全 HTML 的页面等。
• 可选择 REST 或 GraphQL 等 API，常见提供方有 Headless CMS 等，要注意速率限制等。
• 构建动态部分可从简单的页面加载时获取渲染数据开始，逐步添加细节页面等。
• 要注意安全，如不在浏览器中发送私钥，可使用服务器less 函数等。
• 要让网站快速、安全、SEO 友好，可通过缓存、削减负载、SEO 处理和可靠性监测等方式。

重要细节：

• 基本流程为从 CDN 加载静态资产，用 async 函数 fetch 调用端点解析 JSON 并更新 DOM，可在页面加载、按钮点击等时运行。
• 选择 API 要根据需求，如 REST 简单适用于小网站，GraphQL 可减少字段调用。
• 构建动态部分的关键模式有页面加载时获取渲染、列表和网格展示数组、根据 URL ID 渲染详情页等。
• 处理加载错误时要显示加载骨架、错误提示、重试按钮等，保持友好。
• 缓存可通过设置 HTTP 缓存头、使用 ETag 等方式，提高加载速度。
• 速度优化可削减负载、压缩 JSON、防抖输入等。
• SEO 处理可在静态壳中设置标签，添加结构化数据等。
• 可靠性监测可设置超时、重试、电路中断等。

对比：“仅 API”在浏览器运行时构建 HTML 适用于静态网站动态部分，SEO 首次绘制时较轻；SSR 在服务器为每个请求构建 HTML 适用于 SEO 关键页面等但成本高；SSG 在构建时生成 HTML 适用于内容稳定的网站但内容更改需重建。