前端 - nextjs 服务器端渲染的问题?

Question

在使用 nuxt 时,nuxt 可以使用 usefetch 进行请求,底层的实现是 ofetch 这个库,这个库支持在服务器端和客户端进行请求,nuxt 做了优化,如果服务器端有请求过的数据会序列化传输到客户端,这样客户端在水合时就不用再发起请求。而在使用 nextjs 时,使用的是 fetch 进行请求,nextjs 对 fetch 进行了扩展,增加了缓存的功能,但是我发现这个扩展的 fetch,如果在客户端使用,会变为普通的原生的 fetch,本身没有类似 nuxt 的防止重复请求的功能。是不是在 nextjs 中要实现 nuxt 的类似功能需要自行封装来实现?

Answer 1

是的，需要自行封装，或者有一些开源库，比如swr或者react query

Answer 2

在 Next.js 中，虽然 Next.js 的 fetch API 在服务器端进行了扩展以支持缓存和其他特性，但确实，当代码在客户端执行时，它通常会回退到原生的 fetch API，这本身并不自带像 Nuxt.js 中 useFetch 和 ofetch 那样的优化和序列化功能。

要在 Next.js 中实现类似 Nuxt.js 的防止重复请求和数据共享的功能，你可以考虑以下几种方法：

1. 使用自定义 Hook 封装 fetch

你可以创建一个自定义的 React Hook（例如 useCustomFetch），在这个 Hook 中封装你的逻辑来检查请求是否已经在服务器端完成，并尝试从某种形式的客户端缓存中检索数据。这可能需要你维护一个全局状态（如使用 useContext 和 useReducer）来跟踪和存储已完成的请求和响应。

2. 利用 Next.js 的 Data Fetching 方法

Next.js 提供了多种数据获取方法，如 getStaticProps（适用于静态生成页面），getServerSideProps（适用于服务器端渲染页面），以及 getInitialProps（不推荐用于新项目，因为它会在服务器端和客户端都运行）。你可以利用这些方法在服务器端预取数据，并通过 Next.js 的数据传递机制将数据发送到客户端。

3. 使用第三方库

考虑使用如 react-query、SWR（Stale-While-Revalidate）等库，这些库为 React 应用程序提供了强大的数据获取和缓存策略。这些库可以很容易地与 Next.js 集成，并提供丰富的 API 来控制数据的加载状态、缓存和重新验证。

4. 服务器端缓存

如果你正在使用 Next.js 的 API 路由（pages/api 目录下的函数），你可以在这些路由内部实现缓存逻辑，以确保对于相同的请求，服务器会返回缓存的响应而不是每次都重新计算或查询数据。

示例：使用 SWR

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

function fetcher(url) {
  return fetch(url).then(r => r.json());
}

export default Profile;

在这个例子中，SWR 会自动处理缓存和重新验证逻辑，使得在客户端再次请求相同的数据时，如果数据未过期，则不会重新向服务器发送请求。

总结来说，虽然 Next.js 的默认 fetch API 在客户端不具备 Nuxt.js 的 useFetch 那样的优化，但你可以通过封装自定义逻辑、利用 Next.js 的数据获取方法、使用第三方库或实现服务器端缓存等方式来达到类似的效果。