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

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

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

前言

之前讲了：

  • NextJs 初级篇 - 安装 | 路由 | 中间件
  • NextJs 渲染篇 - 什么是CSR、SSR、SSG、ISR 和服务端/客户端组件

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

一. 数据获取 fetch

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

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

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

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的时候，就会打印相关的信息，包括缓存是否命中

/** @type {import('next').NextConfig} */
const nextConfig = {logging: {fetches: {fullUrl: true}}
};export default nextConfig;

① 服务端组件使用fetch

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

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

// 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秒钟

fetch('https://...', { next: { revalidate: 10 } })

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

// layout.jsx | page.jsx | route.js
export const revalidate = 10

② 按需重新验证

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

  • 路径 revalidatePath
  • 缓存标签 revalidateTag
revalidatePath

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

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请求做到刷新呢？例如我创建这么一个路由处理程序：

// 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文件：

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：

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

二. Server Actions

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

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

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

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

例如：

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

2.1 PageRouter下 API 简单案例

我们定义一个接口：
在这里插入图片描述

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的方式从后端取数据。

'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文件夹：
在这里插入图片描述
里面的函数如下：

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

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

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代码更加简洁，无需手动创建一个接口。并且这个函数可以在代码的任何一个地方使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/20731.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PostgreSQL的多态函数

PostgreSQL的多态函数

项目中遇到一个需求,需要模拟Oracle的NVL2函数实现一个对应功能的函数 于是就写了一个自定义函数 CREATE OR REPLACE FUNCTION bkdb3.nvl2(expr anyelement, expr2 anyelement, expr3 anyelement)RETURNS anyelementLANGUAGE plpgsql AS $$ BEGINIF expr IS NOT NULL AND expr…
阅读更多...
windows操作系统提权之服务提权实战rottenpotato

windows操作系统提权之服务提权实战rottenpotato

RottenPotato&#xff1a; 将服务帐户本地提权至SYSTEM load incognito list_tokens –u upload /home/kali/Desktop rottenpotato.exe . execute -Hc -f rottenpotato.exe impersonate_token "NT AUTHORITY\SYSTEM" load incognito 这条命令用于加载 Metasploi…
阅读更多...
vue 关闭页面前释放资源

vue 关闭页面前释放资源

mounted() {window.addEventListener(beforeunload, e > this.handleBeforeUnload(e)) }beforeDestroy() {//监听-关闭页面的时候释放资源window.removeEventListener(beforeunload, e > this.handleBeforeUnload(e))},methods: {handleBeforeUnload(event){event.preven…
阅读更多...
【Linux】在Windows环境下配置两台Linux机器的文件互传

【Linux】在Windows环境下配置两台Linux机器的文件互传

相信有很多云服务器小伙伴都有想把一台linux资源传到另一台机器&#xff0c;那么该怎样实现&#xff1f; 本篇文章的演示案例都是基于centous进行传输&#xff0c;ubuntu进行接收&#xff01; 别的方法也都是一样的&#xff01; 方法一&#xff08;基于xshell进行的压缩包win…
阅读更多...
Java项目：92 基于SSM的办公管理系统

Java项目：92 基于SSM的办公管理系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 基于SSM的办公管理系统 1、项目介绍 基于SSM的办公管理系统主要是对于办公用品的申领进行管理&#xff0c;系统分为三种角色&#xff0c;超级管理员、企业 职…
阅读更多...
Python3 元组

Python3 元组

前言 本文主要介绍Python中的元组(tuple)&#xff0c;主要内容包括 元组简介、元组特性、元组的基本操作。 文章目录 前言一、元组简介二、元组特性1、不可变性2、有序性3、异构性4、可以嵌套使用5、元组类型比列表类型更加节省内存空间 三、元组的基本操作1、创建2、索引3、…
阅读更多...
利用WMI横向移动

利用WMI横向移动

一. WMI介绍和使用 1. WMI介绍 WMI是Windows在Powershell还未发布前&#xff0c;微软用来管理Windows系统的重要数据库工具&#xff0c;WMI本身的组织架构是一个数据库架构&#xff0c;WMI 服务使用 DCOM或 WinRM 协议, 在使用 wmiexec 进行横向移动时&#xff0c;windows 操…
阅读更多...
Go_unsafe包

Go_unsafe包

是什么&#xff1f;为什么&#xff1f; 如何利用unsafe包修改私有成员&#xff1f; 结构体会被分配到一块连续的内存&#xff0c;结构体的地址也代表第一个成员的地址。 如何利用unsafe包获取slice和map的长度&#xff1f; // 利用unsafe包修改私有成员 type S struct {name …
阅读更多...
vue中使用svg图像

vue中使用svg图像

一 、svg图像是什么 SVG&#xff08;可缩放矢量图形&#xff09;是一种图像格式&#xff0c;它以XML文档的形式存在&#xff0c;用以描述图像中的形状、线条、文本和颜色等元素。由于其基于矢量的特性&#xff0c;SVG图像在放大或改变尺寸时能够保持图形质量不受影响。这种格式…
阅读更多...
Java 异步编编程——Java内置线程池（Executor 线程池）

Java 异步编编程——Java内置线程池（Executor 线程池）

文章目录 知道线程池是什么以及解决什么问题Java 内置线程池Java 内置线程池设计结构及执行机制ThreadPoolExecutor 中的概念生命周期核心参数阻塞队列4 种任务拒绝策略 线程池使用场景 知道线程池是什么以及解决什么问题 线程池&#xff08;Thread Pool&#xff09;是一种基于…
阅读更多...
Linux性能优化-网络篇-DNS问题排查

Linux性能优化-网络篇-DNS问题排查

文章目录 前言一、nslookupnslookup 使用交互模式非交互模式 二、dig命令解析域名解析IP指定DNS服务器dig 的trace功能 前言 DNS(Domain Name System) , 域名系统&#xff0c;主要提供域名和IP之间映射关系的查询服务。 本节内容我们带大家了解下如何分析和排查DNS问题。 本次…
阅读更多...
如何进行数据库分库分表

如何进行数据库分库分表

当数据库的数据量增长到一定程度&#xff0c;单一数据库或表可能会遇到性能瓶颈&#xff0c;此时分库分表是一种常见的解决方案。以下是如何进行数据库分库分表的详细步骤和考虑因素&#xff0c;结合了参考文章中的相关信息&#xff1a; 一、分库分表概述 分库分表是为了解决…
阅读更多...
devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效，没有输出内容

devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效，没有输出内容

问题&#xff1a;devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效&#xff0c;没有输出内容 原因&#xff1a; 1、必须在Https协议下才可使用 2、必须用户手动点击click事件中调用 &#xff0c;进行权限申请 源码&#xff1a; <!DOCTYPE h…
阅读更多...
JVM 虚拟机

JVM 虚拟机

JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java 虚拟机&#xff0c;虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机有&#xff1a;JVM、VMwave、Virtual Box等。JVM 是一台被定制过的现实当中不存在的计算…
阅读更多...
行政工作如何提高效率？桌面备忘录便签软件哪个好

行政工作如何提高效率？桌面备忘录便签软件哪个好

在行政管理工作中&#xff0c;效率的提高无疑是每个行政人员都追求的目标。而随着科技的发展&#xff0c;各种便捷的工具也应运而生&#xff0c;其中桌面备忘录便签软件便是其中的佼佼者。那么&#xff0c;这类软件又如何帮助我们提高工作效率呢&#xff1f; 首先&#xff0c;…
阅读更多...
C语言| 求1到100之间所有奇数的和偶数之和

C语言| 求1到100之间所有奇数的和偶数之和

思路&#xff1a; 1 用到for循环功能&#xff1b; 2 定义两个循环变量i j , 奇数 i 1每次加2&#xff0c;偶数 j 0 每次加2 3 求和放在for 循环中间&#xff0c;每遍历一次就相加。 /* 求1到100之间所有奇数的和 求1到100之间所有偶数之和 */ #include <stdio.h> …
阅读更多...
Vue前端中从后端获取图片验证码

Vue前端中从后端获取图片验证码

前端发送请求 <template><el-form :model"user" :rules"rules" ref"userForm" class"login" label-width"auto" style"max-width: 600px"><el-form-item label"用户名" prop"name…
阅读更多...
SqlServer还原系统库步骤及问题解决

SqlServer还原系统库步骤及问题解决

还原master 需要切换到binn目录 Cd C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\Binn 关闭服务 用单用户模式启动 SQL Server 默认实例 sqlservr.exe -m 直接单用户登录 恢复master备份文件 RESTORE DATABASE master FROM DISK E:\dbbak\txic_ke…
阅读更多...
react 表格实现拖拽功能

react 表格实现拖拽功能

项目背景 : react ant 单纯实现拖拽确实不难 , 我的需求是根据后台接口返回 , 生成对应的父子表格 , 并只可以拖拽子的位置 , 如图 后台返回的数据结构 (pid为0说明是父 , 子的pid等于父的id , 说明是父的子) 1 , 我先转成了树形结构且自己加上了key (注意 : key一定得是唯一的…
阅读更多...
Resilience4j结合微服务出现的异常

Resilience4j结合微服务出现的异常

Resilience4j结合微服务出现的异常 1、retry未生效 由于支持aop&#xff0c;所以要引入aop的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>2、circ…
阅读更多...
最新文章

Copyright @ 2022~2023