跳到主要内容

next数据获取

Next.js中推荐在服务端获取数据，有以下好处：

  • 可以直接访问后端数据源(例如数据库或者其他内网服务)
  • 通过防止敏感信息向客户端泄漏
  • 减少客户端和服务端的来回通信，提高加载速度

有四种方法可以获取数据：

  • 在服务器上，使用 fetch
  • 在服务器上，使用第三方库
  • 在客户端上，通过路由处理程序
  • 在客户端上，使用第三方库

在服务器上使用fetch获取数据​

Next.js 扩展了原生的 fetch Web API，允许你为服务器上的每个fetch请求配置缓存和重新验证行为

缓存数据​

默认情况下，Next.js 会自动缓存服务器上数据缓存中的返回值 fetch 。这意味着可以在生成时或请求时获取数据，缓存数据，并在每个数据请求上重用

  • 缓存数据： 使用fetch()获取数据将默认为cache: force-cache，它将缓存请求数据，直到手动失效
  • 指定不缓存数据：通过将 cache : no-store ，我们可以指示不应缓存所获取的数据。这类似于pages目录中的 getServerSideProps
  • 指定缓存秒数：使用fetch()获取数据可以使用revalidate，它将缓存请求指定的秒数 (revalidate表示重新验证)
js
// 缓存数据
fetch(`https://...`, { cache: 'force-cache' })
// 指定不缓存数据
fetch(`https://...`, { cache: 'no-store' })
// 指定缓存秒数
fetch(`https://...`, { next: { revalidate: 60 } })