Next.js 静态渲染

静态渲染是默认的服务器渲染策略，其中路由在构建时渲染，或在后台数据重新验证之后渲染。结果会被缓存，并可以通过内容分发网络 (CDN) 分发，以实现最佳性能。

静态渲染适用于包含可在构建时确定的非个性化数据的路由，例如博客文章或产品页面。

🏆

Nextra 在 GitHub 上有 13213 个星标！

仓库最后更新时间 10/4/2025。

上面的数字是通过 MDX 服务器组件在构建时生成的。启用增量静态再生后，它将保持最新。

示例

上面示例的 MDX 代码如下：

MDX


{/* 通过异步组件 */}
export async function Stars() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const stars = repo.stargazers_count
  return <b>{stars}</b>
}
 
{/* 通过异步函数 */}
export async function getUpdatedAt() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const updatedAt = repo.updated_at
  return new Date(updatedAt).toLocaleDateString()
}
 
<Callout emoji="🏆">
  Nextra 在 GitHub 上有 <Stars /> 个星标！
 
  仓库最后更新时间 _{await getUpdatedAt()}_。
</Callout>