SSG (Static Site Generation)
名词 · Web 架构
静态生成方法,在构建时预生成所有 HTML 页面,然后直接从 CDN 提供服务——提供近乎即时的加载速度,并因无需动态服务器而增强安全性。
Next.js 采用的 Web 架构,在编译时将动态数据(API、CMS、数据库)转换为静态 HTML 文件——兼具动态网站的灵活性与静态网站的速度。
每个页面都是独立 HTML 文件的部署策略,可通过内容分发网络(CDN)全球分发,消除对应用服务器的依赖并大幅降低托管成本。
SSG(Static Site Generation,静态站点生成)是一种 Web 架构技术,在构建阶段预生成所有 HTML 页面,甚至在用户访问网站之前。这些静态 HTML 文件随后直接从 CDN 提供服务,每次请求无需任何服务端计算。Next.js 在这种方式上表现出色,我们的团队利用它交付超快速的网站,内容即时可用且完美可被搜索引擎索引。
SSG 提供显著的 SEO 优势,因为每个页面都是完整的 HTML 文件,Google 爬虫在首次抓取时就能完美读取,无需执行 JavaScript。近乎即时的加载时间直接改善您的 Core Web Vitals 分数,这是 Google 的官方排名因素。我们的团队通过 Next.js 利用 SSG 将您的内容页面推到搜索结果前列,把您的网站变成真正的高质量有机流量磁铁。
SSG 在构建时一次性生成 HTML 页面,而 SSR 在服务器上为每个用户请求动态生成。SSG 更快,因为页面是预构建的并从 CDN 提供服务,但不太适合频繁变化的内容。SSR 非常适合个性化页面或实时数据。我们的团队经常在同一个 Next.js 项目中结合两种策略,根据每个页面的需求获得两种方法的最佳效果。
SSG 通过消除动态应用的经典攻击面来增强网站安全性:没有暴露的应用服务器、没有实时可访问的数据库、没有可注入的 SQL 查询。CDN 提供的静态 HTML 文件不会被常见漏洞(SQL 注入、服务端 XSS、暴力破解攻击)所侵害。我们的团队为安全性和可靠性是绝对优先级的展示型和机构型网站推荐这种架构。
SSG 非常适合电商网站的产品目录,因为产品页面可以预生成以实现即时加载和最佳 SEO。然而,购物车、用户账户或支付等动态页面需要客户端渲染(CSR)。我们的团队使用 Next.js 设计混合架构,将 SSG 用于目录页面、CSR 用于交互功能,同时保证 SEO 性能和流畅的购物体验。
ISR(Incremental Static Regeneration,增量静态再生)是 Next.js 提出的 SSG 进化版,允许在初始构建后单独重新生成静态页面,而无需重建整个网站。传统 SSG 需要完整的新构建来更新内容,ISR 则根据可配置的时间间隔在后台重新验证页面。我们的团队在需要频繁更新内容同时保持静态渲染出色性能的项目中使用 ISR。