Skip to content

Next.js 原理与运行时

Next.js Static Export 适合什么场景,又有哪些限制?

静态导出可以降低运行成本,但它不是把一个动态全栈应用无损搬到 CDN。

适合阶段:高级前端 / 部署选型核心能力:Static Export · Capability Boundary · CDN

面试官想考什么

  • 静态导出和 SSG 有什么区别? 考察部署运行时。
  • Route Handler、Server Actions 能否继续使用? 考察能力限制。
  • 动态路由和搜索如何处理? 考察客户端补数。
  • 什么时候不该选静态导出? 考察选型判断。

一句话回答

text
Static Export 生成可由静态服务器托管的 HTML、JS 和资源,适合公共内容和无服务端运行时的站点;需要鉴权、Server Actions、动态 Route Handler、请求级 metadata 或服务端数据时,应选择 Node/Serverless/Edge 运行时。

面试回答详解

1. 运行模型

text
build -> HTML/JS/assets -> object storage/CDN
-> browser hydration/client fetch

导出后没有 Next.js 服务端请求入口,运行时动态逻辑必须转移到客户端或外部 API。

2. 适合场景

  • 文档、营销页、公共博客和版本化内容。
  • 数据发布频率低、可以在构建时获取。
  • 需要全球 CDN 分发、低运维成本的站点。

3. 主要限制

无法依赖请求时 cookies/headers、Server Actions、动态 Route Handler、服务端重写、部分动态图片和服务端鉴权。动态搜索、用户中心和个性化内容要用外部 API 或独立应用承载。

4. SEO 与更新

静态 HTML 对爬虫友好,但内容更新通常需要重新构建、发布或由外部 CMS 触发构建。长时间构建会影响发布速度,应考虑增量部署或保留服务端运行时。

5. 安全与性能

静态资源可用 CDN,但不要把 secret 放进客户端环境变量。搜索和用户数据的 API 仍需独立鉴权、限流和 CORS 策略。验证产物是否包含错误环境变量和内部 URL。

可直接背诵的 30 秒回答

text
Static Export 是构建出 HTML、JS 和资源后交给静态服务器托管,适合公共、稳定、无需请求级服务端能力的站点。它不能无损支持 Server Actions、动态 API、cookies/headers 鉴权和服务端个性化;这些能力要迁到外部 API 或换成 Node、Serverless 或 Edge 部署,选择时看动态能力和更新频率。

扩展知识

Static Export 与 ISR

  • Static Export:部署后主要是静态文件,没有 Next.js 请求时渲染。
  • ISR:仍需要支持 revalidation 的服务端或平台运行时。
  • 两者的动态能力和运维成本不同。

面试官追问链

追问一:静态站点如何做登录?

  • 考察点:边界迁移。
  • 回答方向:登录和数据访问交给外部 API,客户端只保存非敏感状态;不能把 secret 或授权逻辑放到 bundle。

追问二:静态导出一定比 SSR 快吗?

  • 考察点:性能判断。
  • 回答方向:TTFB 往往简单,但客户端数据、JS 和第三方脚本仍可能慢,要看完整用户体验指标。

追问三:内容更新如何不全量构建?

  • 考察点:发布治理。
  • 回答方向:使用平台增量构建、按页面拆分、外部 CMS/CDN 失效,或改回支持 revalidation 的部署模式。

推荐阅读

基于 MIT 协议开源