likes
comments
collection
share

【Next.js 14】网络请求 fetch(使用指南与注意点)

作者站长头像
站长
· 阅读数 11

前言

Next.js拓展了原生的fetch,增加了缓存和重新验证机制。在服务端组件中,直接使用fetch请求接口数据。在客户端组件中,可借助第三方库请求接口数据。本文将详细阐述在Next.js中如何使用fetch获取接口数据。

1. 强缓存

对于基本不更新的网络资源走强缓存策略

在服务端组件中,使用fetch获取数据默认走强缓存策略。即只有当缓存中没有该资源或者手动清除时,才会发起网络请求。

async function getProjects() {
  const res = await fetch(`https://...`)
  // 相当于 const res = fetch(`https://...`, { cache: 'force-cache' })
  const projects = await res.json()
 
  return projects
}
 
export default async function Index() {
  const projects = await getProjects()
 
  return projects.map((project) => <div>{project.name}</div>)
}

提示:在开发环境中,就算指定强缓存,接口还是会每次去重新请求。在生产环境中,缓存策略会生效,直接返回缓存的值

2. 强缓存有效时间

虽说在强缓存中,只有当缓存中没有该资源或者手动清除时,才会发起网络请求。但强缓存也是有缓存时间的,默认为365天。

对于不经常更新的网络资源可以手动设置缓存有效时间。在fetch请求中使用revalidate指定缓存时间,单位为秒

//缓存有效期3600s
const revalidatedData = await fetch(`https://...`, { next: { revalidate: 60*60 } })

如果想在缓存时间内进行更新,可修改请求头,例如在请求头中添加版本信息

async function getData() {
  const data = await fetch('http://127.0.0.1:9000/api/list', {
    next: { revalidate: 36000 },
    headers: {
      version: '20240406',
    },
  }).then((res) => res.json());
  return data;
}

因为 Next.js 在处理请求时,会根据请求头等信息生成唯一的缓存 key,用于缓存响应数据。如果修改请求头中自定义属性version的值,会使 Next.js 重新生成缓存信息

3. 不缓存

对于经常更新的网络资源,不走缓存策略

在fetch中使用{ cache: 'no-store' },指定每次请求都获取最新数据,不读取缓存数据

const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

4. 不缓存数据共享

对于缓存的请求,即使在不同子组件内多次调用,接口也只会被调用一次,不会影响性能。

对于不缓存的请求,每次发起都会实时返回最新的数据。如果在同一页面内,若两个子组件均需依赖相同的接口数据,一种处理方式是进行状态提升。

在它们共同的父级组件中发起数据请求,并通过props将数据传递至子组件。不过,这种方式可能会有两个问题:当组件层级较为复杂时,通过层层传递props会比较繁琐;若父级组件中包含静态数据,则这些数据会因为需要等待接口数据返回而延迟显示,无法立即呈现给用户。

为了解决这些问题,我们可以利用React的cache API来实现数据共享

1. 新建user/utils.ts

使用cache对接口数据进行缓存

import { cache } from 'react';

//模拟网络请求
async function getNews(): Promise<{ name: number; id: number }[]> {
  return new Promise((resolve) => {
    const num = Math.random();
    setTimeout(() => {
      resolve([
        {
          name: num,
          id: 1,
        },
        {
          name: 1233,
          id: 2,
        },
      ]);
    }, 1000);
  });
}

export const getItem = cache(async () => {
  const data = await getNews();
  return data;
});

2. 新建user/layout.tsx

在布局组件中请求接口数据

import { getItem } from './utils';

export default async function Layout({ children }: { children: React.ReactNode }) {
  const data = await getItem();
  return (
    <section>
      {data.map((o) => (
        <div key={o.id}>{o.name}</div>
      ))}
      ------{children}
    </section>
  );
}

3. 新建user/page.tsx

在页面组件中请求接口数据

import { getItem } from './utils';

export default async function Home() {
  const data = await getItem();
  return (
    <article>
      {data.map((o) => (
        <div key={o.id}>{o.name}</div>
      ))}
    </article>
  );
}

访问路由“/user”,页面显示为相同的内容,说明接口只被调用了一次。刷新页面,页面显示的内容同步刷新

5. 客户端组件中获取数据

在服务端组件中,使用fetch获取接口数据。在客户端组件中,可借助第三方库获取接口数据,例如SWR 或者 ahooks 的 useRequest

在客户端组件中获取数据,接口的请求信息将会展示在客户端,如果不想暴露请求头中的token信息,有两种解决办法:

  1. 在服务端组件中获取数据,然后通过props传递给客户端组件

  2. 通过API路由进行接口转发

6. 配置代理

在服务端组件中,数据请求在服务端,不需要考虑跨域问题。但在客户端组件中,数据请求在浏览器,需要考虑跨域问题。

假设本地开发地址为http://localhost:3000,第三方API地址为https://www.test.com/api/list,在浏览器中请求会报跨域错误。

配置代理,修改next.config.mjs

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `https://www.test.com/api/:path*`,
      },
    ];
  },
};

当客户端发送以 /api 开头的请求,Next.js 会自动将其重定向到 https://www.test.com/api

提示:如果项目配置了basePath: '...',rewrites需额外增加basePath: false

const nextConfig = {
  async rewrites() {
    return [
      {
        //...
        basePath: false,
      },
    ];
  },
};

7. 在动态路由中使用注意点

  1. 动态路由如果不使用generateStaticParams提前指定路由参数,接口设定的缓存策略依旧会生效,但页面的缓存策略为private, no-cache, no-store, max-age=0, must-revalidate

  2. 动态路由中的接口只要有缓存策略为不缓存,使用generateStaticParams生成的动态路由参数,打包后不会生成对应的html文件

  3. 接口数据更新后,使用generateStaticParams打包后的动态路由的html页面内容也会同步更新

8. 封装fetch请求

封装fetch请求,增加请求拦截器和响应拦截器,并可对请求接口统一管理,防止重复书写{ next: { revalidate } }等属性。

因为每个人的封装思路不同,我这里便不直接贴源码了,感兴趣的可直接访问我的源码地址:request.ts

结尾

对Next.js感兴趣的,可先关注我,后续将继续更新相关内容

如果在Next.js中,有更好的fetch封装思路可在评论区留言,本文内容将实时更新

转载自:https://juejin.cn/post/7356817667574431796
评论
请登录