Next.js 服务器端数据获取
介绍
在 Next.js 中，服务器端数据获取（Server-side Data Fetching）是一种在服务器端渲染页面时动态获取数据的技术。与客户端数据获取不同，服务器端数据获取允许在页面加载之前获取数据，从而生成完整的 HTML 页面并直接发送给客户端。这种方式特别适合需要动态内容且对 SEO 友好的页面。
通过服务器端数据获取，你可以确保页面内容在用户访问时已经准备好，从而减少页面加载时间并提升用户体验。
服务器端数据获取的工作原理
在 Next.js 中，服务器端数据获取是通过 getServerSideProps 函数实现的。这个函数在每次页面请求时运行，并允许你在服务器端获取数据，然后将数据作为 props 传递给页面组件。
jsx
export async function getServerSideProps(context) {
// 在这里获取数据
const res = await fetch('https://api.example.com/data');
const data = await res.json();
// 将数据作为 props 传递给页面
return {
props: {
data,
},
};
}
参数说明
context: 一个包含请求相关信息的对象，例如req（请求对象）、res（响应对象）、query（查询参数）等。props: 返回的对象必须包含props属性，该属性将传递给页面组件。
示例
假设我们有一个博客页面，需要根据 URL 中的 id 参数获取特定的博客文章：
jsx
export async function getServerSideProps(context) {
const { id } = context.query;
const res = await fetch(`https://api.example.com/posts/${id}`);
const post = await res.json();
return {
props: {
post,
},
};
}
export default function BlogPost({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
在这个示例中，getServerSideProps 函数根据 URL 中的 id 参数获取博客文章数据，并将其作为 post 属性传递给 BlogPost 组件。
实际应用场景
1. 动态内容页面
服务器端数据获取非常适合动态内容页面，例如博客文章、产品详情页等。这些页面的内容通常需要根据 URL 参数动态生成。
2. 需要 SEO 优化的页面
由于服务器端数据获取在页面加载之前就生成了完整的 HTML，因此非常适合需要 SEO 优化的页面。搜索引擎可以轻松抓取这些页面的内容。
3. 需要用户认证的页面
对于需要用户认证的页面，服务器端数据获取可以在服务器端验证用户身份，并根据用户权限动态生成页面内容。
注意事项
警告
- 性能影响: 由于
getServerSideProps在每次请求时都会运行，因此可能会对服务器性能产生影响。如果页面内容不经常变化，可以考虑使用静态生成（Static Generation）或增量静态再生（Incremental Static Regeneration）。 - 缓存策略: 服务器端数据获取的页面通常不会被缓存，因此需要特别注意缓存策略，以避免不必要的服务器负载。
总结
服务器端数据获取是 Next.js 中一种强大的数据获取策略，特别适合需要动态内容、SEO 优化或用户认证的页面。通过 getServerSideProps 函数，你可以在服务器端获取数据并将其传递给页面组件，从而生成完整的 HTML 页面。
附加资源
练习
- 创建一个 Next.js 页面，使用
getServerSideProps获取用户列表并显示在页面上。 - 修改上面的博客示例，使其在获取数据时处理可能的错误（例如文章不存在的情况）。