Next.js SSG

使用 Next.js，你可以通过 Static Generation (SSG) 预渲染你的页面。你的页面将在构建时生成并静态地提供给访问者。它还可以被 CDN 缓存以最大化性能。

Nextra 也支持这一功能。这里是一个例子：

🏆

Nextra 在 GitHub 上有 12186 个星标！

最后仓库更新时间：1/26/2025.

上面显示的数字是通过 MDX 服务器组件在构建时生成的。启用 Incremental Static Regeneration 后，它将保持更新。

以下是上述示例的 MDX 代码：

MDX


{/* Via async components */}
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>
}
 
{/* Via async functions */}
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>