静态站点生成(SSG)
示例
- Agility CMS 示例(演示)
- Builder.io 示例(演示)
- ButterCMS 示例(演示)
- Contentful 示例(演示)
- Cosmic 示例(演示)
- DatoCMS 示例(演示)
- DotCMS 示例(演示)
- Drupal 示例(演示)
- Enterspeed 示例(演示)
- GraphCMS 示例(演示)
- Keystone 示例(演示)
- Kontent.ai 示例(演示)
- Makeswift 示例(演示)
- Plasmic 示例(演示)
- Prepr 示例(演示)
- Prismic 示例(演示)
- Sanity 示例(演示)
- Sitecore XM Cloud 示例(演示)
- Storyblok 示例(演示)
- Strapi 示例(演示)
- TakeShape 示例(演示)
- Tina 示例(演示)
- Umbraco 示例(演示)
- Umbraco Heartcore 示例(演示)
- Webiny 示例(演示)
- WordPress 示例(演示)
- 博客起始示例(演示)
- 静态推文(演示)
如果一个页面使用静态生成,页面的 HTML 将在构建时生成。这意味着在生产环境中,页面 HTML 是在你运行 next build
时生成的。这个 HTML 将在每次请求时重复使用。它可以被 CDN 缓存。
在 Next.js 中,你可以有或没有数据地静态生成页面。让我们来看看每种情况。
没有数据的静态生成
默认情况下,Next.js 使用静态生成预渲染页面,不获取数据。以下是一个示例:
function About() {
return <div>关于</div>
}
export default About
注意,这个页面不需要获取任何外部数据就可以预渲染。在这种情况下,Next.js 在构建时为每个页面生成单个 HTML 文件。
带数据的静态生成
某些页面需要获取外部数据进行预渲染。有两种场景,可能适用其中一种或两种。在每种情况下,你都可以使用 Next.js 提供的这些函数:
- 你的页面内容依赖于外部数据:使用
getStaticProps
。 - 你的页面路径依赖于外部数据:使用
getStaticPaths
(通常与getStaticProps
一起使用)。
场景 1:你的页面内容依赖于外部数据
示例:你的博客页面可能需要从 CMS(内容管理系统)获取博客文章列表。
// TODO:需要通过调用某个 API 端点获取 `posts`
// 然后才能预渲染此页面。
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
为了在预渲染时获取这些数据,Next.js 允许你从同一个文件中导出一个名为 getStaticProps
的异步函数。这个函数在构建时被调用,并允许你在预渲染时将获取的数据传递给页面的 props
。
export default function Blog({ posts }) {
// 渲染文章...
}
// 这个函数在构建时被调用
export async function getStaticProps() {
// 调用外部 API 端点获取文章
const res = await fetch('https://.../posts')
const posts = await res.json()
// 通过返回 { props: { posts } },Blog 组件
// 将在构建时接收 `posts` 作为 prop
return {
props: {
posts,
},
}
}
要了解 getStaticProps
的更多工作原理,请查看数据获取文档。
场景 2:你的页面路径依赖于外部数据
Next.js 允许你创建具有动态路由的页面。例如,你可以创建一个名为 pages/posts/[id].js
的文件,根据 id
显示单个博客文章。这将允许你在访问 posts/1
时显示 id: 1
的博客文章。
要了解更多关于动态路由的信息,请查看动态路由文档。
然而,你想在构建时预渲染哪些 id
可能取决于外部数据。
示例:假设你只在数据库中添加了一篇博客文章(id: 1
)。在这种情况下,你只想在构建时预渲染 posts/1
。
稍后,你可能会添加第二篇文章,id: 2
。然后你会想要预渲染 posts/2
。
因此,你的预渲染页面路径依赖于外部数据。为了处理这种情况,Next.js 允许你从动态页面(在这个例子中是 pages/posts/[id].js
)导出一个名为 getStaticPaths
的异步函数。这个函数在构建时被调用,并允许你指定要预渲染的路径。
// 这个函数在构建时被调用
export async function getStaticPaths() {
// 调用外部 API 端点获取文章
const res = await fetch('https://.../posts')
const posts = await res.json()
// 根据文章获取我们想要预渲染的路径
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// 我们将在构建时仅预渲染这些路径。
// { fallback: false } 意味着其他路由应该返回 404。
return { paths, fallback: false }
}
同时在 pages/posts/[id].js
中,你需要导出 getStaticProps
,以便获取关于此 id
的文章数据并用于预渲染页面:
export default function Post({ post }) {
// 渲染文章...
}
export async function getStaticPaths() {
// ...
}
// 这也在构建时被调用
export async function getStaticProps({ params }) {
// params 包含文章 `id`。
// 如果路由是 /posts/1,那么 params.id 就是 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// 通过 props 将文章数据传递给页面
return { props: { post } }
}
要了解 getStaticPaths
的更多工作原理,请查看数据获取文档。
何时使用静态生成?
我们建议尽可能使用静态生成(有数据或无数据),因为你的页面可以构建一次并由 CDN 提供服务,这使得它比每次请求都由服务器渲染页面要快得多。
你可以为许多类型的页面使用静态生成,包括:
- 营销页面
- 博客文章和作品集
- 电子商务产品列表
- 帮助和文档
你应该问自己:"我能在用户请求之前预渲染这个页面吗?"如果答案是肯定的,那么你应该选择静态生成。
另一方面,如果你无法在用户请求之前预渲染页面,静态生成就不是一个好主意。可能你的页面显示频繁更新的数据,并且页面内容在每次请求时都会变化。
在这种情况下,你可以执行以下操作之一:
- 使用带客户端数据获取的静态生成:你可以跳过预渲染页面的某些部分,然后使用客户端 JavaScript 填充它们。要了解更多关于这种方法的信息,请查看数据获取文档。
- 使用服务器端渲染:Next.js 在每次请求时预渲染页面。它会更慢,因为页面不能被 CDN 缓存,但预渲染的页面将始终是最新的。我们将在下面讨论这种方法。