NextJs 数据篇 - 数据获取 | 缓存 | Server Actions

Zong_09152024-06-02 13:37

NextJs 数据篇 - 数据获取 | 缓存 | Server Actions

  • 前言
  • [一. 数据获取 fetch](#一. 数据获取 fetch)
    • [1.1 缓存 caching](#1.1 缓存 caching)
      • [① 服务端组件使用fetch](#① 服务端组件使用fetch)
      • [② 路由处理器 GET 请求使用fetch](#② 路由处理器 GET 请求使用fetch)
    • [1.2 重新验证 revalidating](#1.2 重新验证 revalidating)
      • [① 基于时间的重新验证](#① 基于时间的重新验证)
      • [② 按需重新验证](#② 按需重新验证)
    • [1.3 缓存的退出方式](#1.3 缓存的退出方式)
  • [二. Server Actions](#二. Server Actions)
    • [2.1 PageRouter下 API 简单案例](#2.1 PageRouter下 API 简单案例)
    • [2.2 AppRouter 下 Server Actions 简单案例](#2.2 AppRouter 下 Server Actions 简单案例)

前言

之前讲了：

这篇文章就打算专门讲一下NextJs中的数据获取方式、缓存以及什么是Server Actions

一. 数据获取 fetch

NextJs 中，在服务端使用 fetch 函数是常规的数据请求方式，它扩展了原生的API，在此基础上有这么几个功能（针对服务端的请求）：

  • caching：缓存
  • revalidating ：重新验证

例如这么一个简单的服务端组件：

typescript 复制代码 
export default async function Page() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()

    return (
        <ul>
            {data.map((item: any) => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    )
}

1.1 缓存 caching

默认情况下，NextJs 会自动缓存服务端中 fetch 请求的返回值。但是在以下情况下不会自动缓存：

  • 在 Server Action 中使用的时候。
  • 在定义了非 GET 方法的路由处理程序中使用。

即在服务端组件内部 或者只有 GET 方法的路由处理程序 中使用 fetch 函数，返回结果会自动缓存。

接下来我们来测试一下缓存，为了更加直观的让大家看到缓存的生效，我们可以在next.config.mjs 文件中增加以下配置，这样在fetch的时候，就会打印相关的信息，包括缓存是否命中

typescript 复制代码 
/** @type {import('next').NextConfig} */
const nextConfig = {
    logging: {
        fetches: {
            fullUrl: true
        }
    }
};

export default nextConfig;

① 服务端组件使用fetch

例如我有这么一个服务端组件：

typescript 复制代码 
export default async function Page() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()
    return (
        <ul>
            {data.map((item: any) => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    )
}

页面多次访问后：可以发现缓存命中

② 路由处理器 GET 请求使用fetch

typescript 复制代码 
// app/api/getData/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()
    return NextResponse.json(data)
}

然后多次访问 http://localhost:3000/api/getData，结果如下：

1.2 重新验证 revalidating

重新验证的定义：清除缓存数据，然后重新获取最新的数据。 而NextJs 中提供了两种方式完成重新验证：

  • 基于时间的重新验证：根据指定的时间，自动进行重新验证。
  • 按需重新验证：根据事件手动重新验证数据。

① 基于时间的重新验证

这种验证方式，只需要在fetch的时候，增加参数revalidate即可，如下代表这个请求的缓存时长为10秒钟

typescript 复制代码 
fetch('https://...', { next: { revalidate: 10 } })

或者在路由段配置项中进行配置，可以再页面上或者路由处理程序中增加以下属性的导出：

typescript 复制代码 
// layout.jsx | page.jsx | route.js
export const revalidate = 10

② 按需重新验证

我们可以在路由处理程序中或者 Server Actions 中通过两种方式来实现按需重新验证：

  • 路径 revalidatePath
  • 缓存标签 revalidateTag
revalidatePath

我们写一个简单的页面，这个页面每次加载的时候都会随机加载一个图片，但是由于fetch被缓存了，加载多次还是同一个图片。

typescript 复制代码 
async function getData() {
  // 接口每次调用都会返回一个随机的猫猫图片数据
  const res = await fetch('https://api.thecatapi.com/v1/images/search')
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

export default async function Page() {
  const data = await getData()
  
  return <img src={data[0].url} width="300" />
}

效果如下：

那我如何按需让这个fetch请求做到刷新呢？例如我创建这么一个路由处理程序：

typescript 复制代码 
// app/api/revalidatePathTest/route.ts
import { revalidatePath } from 'next/cache'
import { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
    const path = request.nextUrl.searchParams.get('path')

    if (path) {
        revalidatePath(path)
        return Response.json({ revalidated: true, now: Date.now() })
    }

    return Response.json({
        revalidated: false,
        now: Date.now(),
        message: 'Missing path to revalidate',
    })
}

这段代码啥意思呢？

  • 如果我请求的地址没有参数 refreshPath，那就是个普通的接口。
  • 如果我请求的地址带上参数 refreshPath，就会通过revalidatePath 函数，重新验证对应路由或者接口。

倘若我访问：http://localhost:3000/api/revalidatePathTest?refreshPath=/，之后再访问：http://localhost:3000/，可见图片发生了刷新：

说明成功让路由 / 进行了重新验证（缓存刷新）

revalidateTag

除此之外，NextJs中有一个路由标签系统 ，即revalidateTag，它的实现逻辑如下：

使用 fetch 的时候，设置一个或者多个标签标记请求

调用 revalidateTag 方法重新验证该标签对应的所有请求

例如我们修改app/page.tsx文件：

typescript 复制代码 
async function getData() {
  // 接口每次调用都会返回一个随机的猫猫图片数据
  const res = await fetch('https://api.thecatapi.com/v1/images/search', { next: { tags: ['refresh'] } })
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

export default async function Page() {
  const data = await getData()
  
  return <img src={data[0].url} width="300" />
}

修改revalidatePathTest：

typescript 复制代码 
// app/api/revalidatePathTest/route.ts
import { revalidatePath } from 'next/cache'
import { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag')
  revalidateTag(tag)
  return Response.json({ revalidated: true, now: Date.now() })
}

操作如下：

我们可以发现：

  1. 当我们多次刷新 http://localhost:3000/ ，图片并没有改变，因为缓存的作用。
  2. 当我们访问：http://localhost:3000/api/revalidatePathTest?tag=refresh，我们带上了指定的tag。值为refresh。
  3. 此时再次访问首页，发现图片修改。
  4. 而我们的图片在fetch的时候，await fetch('https://api.thecatapi.com/v1/images/search', { next: { tags: ['refresh'] } })，指定了tag为refresh
  5. 因此可以联动做到重新验证。

1.3 缓存的退出方式

上面说的都是重新验证，说白了就是缓存的一种刷新机制，那么我们是否有办法主动退出缓存呢？

当使用 fetch 的时候，若满足以下情形，可以做到默认退出缓存机制：

  • fetch 请求添加了 cache: 'no-store' 或者 revalidate: 0 属性。例如
typescript 复制代码 
fetch('', { cache: 'no-store' })
  • fetch 请求在路由处理程序中并使用了其他方法，例如POST。
  • 函数体内使用到了 headers 或 cookies 等方法。
typescript 复制代码 
export async function GET(request) {
  const token = request.cookies.get('token')
  return Response.json({ data: new Date().toLocaleTimeString() })
}
  • 配置了路由段选项 const dynamic = 'force-dynamic'
typescript 复制代码 
export const dynamic = 'force-dynamic'
  • 配置了路由段选项 fetchCache ，默认会跳过缓存

二. Server Actions

Server Actions 是指在服务端执行的异步函数 ，但是可以在服务端和客户端组件中使用。 我们什么情况下可以用到这个呢？

  • 在 PageRouter 情况下，若需要前后端进行交互，则需要先定义一个接口。
  • 在 AppRouter 情况下，这种操作则可以简化为 Server Actions 。我们可以定义一个 Server Actions ，然后直接在客户端使用获取数据。

它的基本定义方式就是通过 'use server' 声明，一般分为两种：

  • 模块级别：在文件的顶部声明，那么该文件下声明的所有导出函数都是Server Actions。
  • 函数级别：在函数内部的顶端添加声明，那么只有该函数是Server Actions。

例如：

typescript 复制代码 
// 函数级别 
async function getData() {
   'use server'
   // ...
}

// 模块级别 app/serverActions/action.ts
'use server'
export async function getData() {
    // ...
}
export async function create() {
    // ...
}

2.1 PageRouter下 API 简单案例

我们定义一个接口：

typescript 复制代码 
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()
    return NextResponse.json(data)
}

然后定义一个页面，通过API的方式从后端取数据。

typescript 复制代码 
'use client'

import { useEffect, useState } from "react"

export default function Page() {
    const [data, setData] = useState<any>(null)
    async function getList() {
        const data = await (await fetch('/api/getData')).json();
        setData(data);
    }
    useEffect(() => {
        getList();
    }, [])
    return (
        <ul>
            {data?.map((item: any) => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    )
}

2.2 AppRouter 下 Server Actions 简单案例

我们来看下使用Server Actions的简单案例，一般我们定义一个actions文件夹：

里面的函数如下：

typescript 复制代码 
'use server'
export async function getData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()
    return data;
}

然后在组件中使用：服务端组件和客户端组件都可以使用

typescript 复制代码 
import { getData } from '../actions/actions'

export default async function Page() {
    const data = await getData();
    return (
        <ul>
            {data.map((item: any) => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    )
}

可以看到Server Actions代码更加简洁，无需手动创建一个接口。并且这个函数可以在代码的任何一个地方使用。

相关推荐
前端小咸鱼一条10 小时前
18. React的受控和非受控组件
前端·react.js·前端框架
蓝瑟11 小时前
前端测试不再难：Vite+React+Vitest单元测试完整手册
前端·react.js·单元测试
Asort11 小时前
精通React JSX：高级开发者必备的语法规则与逻辑处理技巧
前端·javascript·react.js
前端小慈12 小时前
React 常见使用笔记
react.js
鹏多多13 小时前
React项目使用useMemo优化性能指南和应用场景
前端·javascript·react.js
mapbar_front1 天前
React 中 useCallback 的基本使用和原理解析
react.js
前端架构师-老李1 天前
React中useContext的基本使用和原理解析
前端·javascript·react.js
技术钱1 天前
react antdesign实现表格嵌套表单
前端·react.js·前端框架
小p1 天前
react学习4：CSS Modules 样式
前端·react.js
小p1 天前
react学习3： 闭包陷阱
前端·react.js
热门推荐
01GitHub 镜像站点02综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件03UV安装并设置国内源04npm使用国内淘宝镜像的方法05Linux下V2Ray安装配置指南06BongoCat - 跨平台键盘猫动画工具07《大数据技术原理与应用》实验报告三 熟悉HBase常用操作08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10GitLab 零基础入门指南：从安装到项目管理全流程