共计 2492 个字符，预计需要花费 7 分钟才能阅读完成。
介绍
静态站点生成是提高应用程序速度、安全性和整体性能的强大工具。Next.js 是一种流行的静态站点生成框架，它为开发人员提供了一种利用静态站点功能的简单方法。它提供了一组强大的功能，例如自动代码拆分、路由和服务器端呈现，使开发更加轻松快捷。借助 Next.js，开发人员可以快速创建安全、高性能且 SEO 友好的静态网站。在本文中，我们将讨论使用 Next.js 生成静态网站的好处，以及它如何帮助开发人员创建强大而高效的网站。
使用 Next.js 生成静态站点的好处
性能和速度
与服务器端生成和客户端生成相比，静态站点生成显示出性能改进。这样，内容是在应用程序构建期间生成的。这意味着根据请求，内容已准备就绪，可以立即发送给用户。这是一个巨大的改进，因为在其他两种情况下，都需要先生成它才能显示或发送。如果我们谈论的是客户端，那么会加载库、获取数据并为其生成内容并显示在浏览器中。服务器端根据请求获取数据，触发构建，并将最终包作为响应发送给显示的用户。
安全可靠
安全性和可靠性可能是您可能不会考虑的两个因素，但它们确实是。首先从安全性开始，在客户端渲染中，加载所有库和静态资源，然后从 API 请求数据，如果授权失败，则显示相应的错误。问题是它仍然加载静态资源。使用静态站点生成，客户端只会立即收到错误页面。可靠性也一样。您的页面可能是动态的，并且取决于某些不会更改的 API 响应。比如博文。典型的过程又是获取资源和数据、生成内容并在浏览器中显示。但是，有时 API 可能由于许多不同的原因而无法使用。通过静态站点生成，
搜索引擎优化
静态站点生成减少了加载时间，减少了加载后对服务器请求的需求，并实现了更好的结构化和设置元数据。这些是搜索引擎在对网页进行排名时考虑的因素。
使用方便
这可能是 NextJS 特有的好处。随着时间的推移，我为此尝试了许多不同的单页应用程序解决方案，根据我的经验，NextJS 拥有迄今为止最好的一个。开箱即用，在构建期间，它将生成不会更改的静态内容。你不需要做任何事情。这可能是标题、标题、静态文本、图像或其他任何内容。对于从某些 API 或服务加载的动态内容，您可以在页面组件中使用两个函数。一个是 getStaticProps 用于准备将在生成中使用的数据，如果您的路线是动态的，还有 getStaticPaths 函数。
如何开始在 Next.js 中生成静态站点
对于使用 NextJS 的基本静态站点生成，您无需执行任何操作。这是它的一大优点。在构建期间，NextJS 将找出未更改的内容，并构建发送给用户的内容。当您的某些内容依赖于不同的数据时，就会出现差异。这就是为什么有 getStaticProps 函数的原因。
export default function Person({person}) {
return (<>
Hello {person.firstName} {person.lastName}!
</>
)
}
export async function getStaticProps(context) {
return {
props: {person: { firstName: "John", lastName: "Doe"}
}, // will be passed to the page component as props
}
}在上面的示例中，我们有一个简单的页面组件 Person。该组件接收个人详细信息作为道具，然后用于生成内容。为了传递这些值，我们使用需要在页面组件中导出的 getStaticProps 函数。您可能会注意到它是一个异步函数。那是因为您可能需要从某些 API 或异步服务中获取数据。
上面的示例是一个简单的静态路径页面，但您也可能拥有可以根据 id 等内容而改变的动态路径。对于那些，您需要从页面组件中导出另一个函数。该函数是 getStaticPath。
export async function getStaticPaths() {
return {paths: [{ params: { id: '1'} }, {params: { id: '2'} }],
fallback: false, // can also be true or 'blocking'
}
}
export async function getStaticProps(context) {
const id = context.params.id
return {
props: {person: { firstName: "John" + id, lastName: "Doe" + id}
}, // will be passed to the page component as props
}
}上面的示例使用 getStaticPath 函数并返回一个路径参数数组，它将在构建期间为其生成内容。在上面的示例中，它用于 id 值 1 和 2. 这些 id 值通过函数参数传递给 getStaticProps 函数。在上面的示例中，该参数称为上下文，它只是将 id 值附加到名称，但在现实世界的示例中，它可能类似于需要从数据库中获取数据的人的 id。
您可能会注意到 getStaticPaths 函数中的另一个参数是 fallback 值 false。该值决定它是否还会在运行时尝试生成内容。在我们的示例中，因为 fallback 设置为 false，它将为路径 id 1 和 2 创建内容。如果有人试图访问路径值 3. 它将返回错误 404 not found 页面。在将该参数更改为值 true 或“阻塞”的情况下，请求参数将传递给 getStaticProps 函数。该函数将尝试生成一个新页面。如果不能，它会返回一个错误。否则，将根据请求生成一个新页面，就像服务器端生成一样。结果内容存储在服务器上，每个后续请求都将使用该生成的内容。
你的工作，由 AI 赋能！🔥
还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗？🤯
板板 AI，你的工作好帮手！
一键生成 各种文案、脚本、图片、视频、代码、报告，轻松应对各种工作 / 营销需求！
现在注册体验，即可获得：
- 🎁 30 积分基础模型余额
- 🎁 3 积分高级模型余额
- 🎁 3 积分绘画余额
还不快来试试？
点击链接，开启你的 AI 创作之旅！>>>https://www.banbanai.cn
板板 AI，让你的工作效果发挥无限可能！ 🚀
