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.mfbz.cn/a/668950.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

录制gif 强推LICEcap

录制gif 强推LICEcap

LICEcap 官网&#xff1a;https://www.cockos.com/licecap/ 即按即用&#xff0c;录制好的gif可直接插入博客&#xff0c;yyds~
阅读更多...
算法练习第25天|491. 非递减子序列

算法练习第25天|491. 非递减子序列

491. 非递减子序列 491. 非递减子序列https://leetcode.cn/problems/non-decreasing-subsequences/ 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案…
阅读更多...
文件IO（三）

文件IO（三）

文件IO&#xff08;三&#xff09; 左移右移Linux的man 手册文件IO打开文件操作文件关闭文件 caps lock开灯关灯读取按键文件IO操作目录文件打开目录文件操作目录文件 库动态库和静态库的优缺点创建静态库创建动态库 按下右ctrl键 亮灭灯 左移右移 Linux的man 手册 文件IO 打开…
阅读更多...
知网AI查重：AI工具如何助力通过检测？

知网AI查重：AI工具如何助力通过检测？

论文降重一直是困扰各界毕业生的“拦路虎”&#xff0c;还不容易熬过修改的苦&#xff0c;又要迎来降重的痛。 其实想要给论文降重达标&#xff0c;我有一些独家秘诀。话不多说直接上干货&#xff01; 1、同义词改写&#xff08;针对整段整句重复&#xff09; 这是最靠谱也是…
阅读更多...
旅游门票预订系统小程序源码购票源码

旅游门票预订系统小程序源码购票源码

功能介绍&#xff1a; 景点项目 支持发布多个景点项目、景点门票等。 在线支付 支持整合微信支付功能 一款基于ThinkPHP Uniapp开发的旅游i ]票预订系 统 支持景点]票、导游产品便捷预订、美食打卡、景点分 享、旅游笔记分享等综合系统,提供前后台无加密源码&#xff0c;支…
阅读更多...
JS脚本打包成一个 Chrome 扩展（CRX 插件）

JS脚本打包成一个 Chrome 扩展（CRX 插件）

受这篇博客 如何把CSDN的文章导出为PDF_csdn文章怎么导出-CSDN博客 启发&#xff0c;将 JavaScript 代码打包成一个 Chrome 扩展&#xff08;CRX 插件&#xff09;。 步骤&#xff1a; 1.创建必要的文件结构和文件&#xff1a; manifest.jsonbackground.jscontent.js 2.编写…
阅读更多...
汇编：调用Win32 API

汇编：调用Win32 API

在32位汇编程序中使用 Win32 API 是很常见的&#xff0c;特别是在开发 Windows 应用程序时调用的频率很高&#xff0c;Win32 API 提供了访问 Windows 操作系统功能的接口&#xff0c;包括窗口、消息处理、文件操作、网络通信等等。以下是使用 Win32 API 的一般步骤&#xff1a;…
阅读更多...
Controller类明明写了@CrossOrigin跨域注解，但还是有跨域问题

Controller类明明写了@CrossOrigin跨域注解，但还是有跨域问题

可能是写的过滤器干扰到了跨域处理。如&#xff1a; 此时&#xff0c;先注释掉过滤器注解&#xff0c;让其不生效&#xff0c;就可以避免干扰跨域处理了 不过&#xff0c;这只能暂时解决该问题&#xff0c;毕竟过滤器还是要用的&#xff0c;后续我再探索一下。。。。。。。
阅读更多...
springboot实现文件上传功能,整合云服务

springboot实现文件上传功能,整合云服务

文章目录 这是springboot案例的,文件上传功能的拆分,本篇将带大家彻底了解文件上传功能,先从本地存储再到云存储,全网最详细版本,保证可以学会,可以了解文件上传功能的开发文件上传功能剖析进行书写一个小的文件上传文件上传的文件三要素首先表单提交的方式要是 post方式,第二个…
阅读更多...
艾体宝洞察 | Redis Enterprise对比ElastiCache

艾体宝洞察 | Redis Enterprise对比ElastiCache

选择缓存数据库时&#xff0c;如何在Amazon ElastiCache和Redis Enterprise之间做出选择&#xff0c;应当考虑哪些标准&#xff1f; ElastiCache 通常可以满足基本的缓存需求&#xff0c;因此是一种适合初始阶段的解决方案。但随着使用量的增加&#xff0c;ElastiCache很快会变…
阅读更多...
FreeSWITCH 1.10.10 简单图形化界面21-录音相关

FreeSWITCH 1.10.10 简单图形化界面21-录音相关

FreeSWITCH 1.10.10 简单图形化界面21-录音相关 FreeSWITCH GUI界面预览00、安装FreeSWITCH GUI先看使用手册1、录音相关的应用11、record用法&#xff1a;举例&#xff1a;注意&#xff1a; 12、record_session用法&#xff1a;举例&#xff1a; 2、录音相关的变量3、单腿录音…
阅读更多...
ICPC训练赛补题集

ICPC训练赛补题集

ICPC训练赛补题集 文章目录 ICPC训练赛补题集D - Fast and Fat (负重越野)I-路径规划G. Inscryption(邪恶铭刻)NEW Houses雪中楼(西安交通大学)L.BracketGenerationE - Checksum D - Fast and Fat (负重越野) 原题链接&#xff1a;原题链接 题意&#xff1a;体重大的背体重小的…
阅读更多...
图像处理ASIC设计方法 笔记26 非均匀性校正SOC如何设计

图像处理ASIC设计方法 笔记26 非均匀性校正SOC如何设计

在红外成像技术领域，非均匀性校正是一个至关重要的环节，它直接影响到成像系统的性能和目标检测识别的准确性。非均匀性是指红外焦平面阵列（IRFPA）中各个像元对同一辐射强度的响应不一致的现象，这种不一致性可能是由于制造过程中的缺陷、材料的不均匀性或者像元间的热电特性…
阅读更多...
Mysql 8.0.37 安装教程

Mysql 8.0.37 安装教程

图片有点长&#xff0c;慢慢来 安装教程 安装地址&#xff1a;MySQL :: MySQL Downloads 进入官网 下载社区版 此处有两个版本&#xff0c;我们下载的是8.0.37版本 第一个需要联网安装&#xff0c;我们现在第二个离线安装 server only&#xff1a;仅安装MySQL server clien…
阅读更多...
SpringCloud如何实现SSO单点登录？

SpringCloud如何实现SSO单点登录？

目录 一、SpringCloud框架介绍 二、什么是SSO单点登录 三、单点登录的必要性 四、SpringCloud如何实现SSO单点登录 一、SpringCloud框架介绍 Spring Cloud是一个基于Spring Boot的微服务架构开发工具集&#xff0c;它整合了多种微服务解决方案&#xff0c;如服务发现、配置…
阅读更多...
Django里多app

Django里多app

在 Django 里的某一个项目&#xff0c;里面得包含很多 App (功能)&#xff0c;那么如何在该项目里管理这么多App呢&#xff1f; 先说明下背景&#xff1a;未先创建 apps 文件夹来存各个app文件夹&#xff0c;直接在项目文件目录里创建各个app。为了便于管理&#xff0c;得将各…
阅读更多...
【TB作品】msp430f5529单片机墨水屏，口袋板，显示温度和万年历，tmp421温度，RTC时间

【TB作品】msp430f5529单片机墨水屏，口袋板，显示温度和万年历，tmp421温度，RTC时间

文章目录 一、部分程序二、展示三、全部代码下载 一、部分程序 int main(void) {WDTCTL WDTPW | WDTHOLD; //关闭看门狗init(); //屏幕初始化InitIIC(); //I2C初始化TMP_Init(); //tmp421初始化SetupRTC();_EINT();while (1){} }#pragma vectorRT…
阅读更多...
在鸿蒙中身份校验的手势密码的实现

在鸿蒙中身份校验的手势密码的实现

在harmony中它提供了默认的组件PatternLock()&#xff1b; 这个就能直接显示九宫格密码验证 并且他有两个主要的回调事件 .onDotConnect密码输入选中宫格圆点时触发该回调 .onPatternComplete&#xff1a;密码输入结束时触发该回调 //如代码实现 PatternLock().sideLength(32…
阅读更多...
【scikit-learn009】异常检测系列：单类支持向量机（OC-SVM）实战总结（看这篇就够了，已更新）

【scikit-learn009】异常检测系列：单类支持向量机（OC-SVM）实战总结（看这篇就够了，已更新）

1.一直以来想写下机器学习训练AI算法的系列文章，作为较火的机器学习框架，也是日常项目开发中常用的一款工具，最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架OCSVM模型相关知识体系。 3.欢迎批评指正，欢迎互三，跪谢一键三连！ 4.欢迎…
阅读更多...
linux上VirtualBox使用

linux上VirtualBox使用

前言 最近想把唯一的windows系统装成linux&#xff0c; 但是确实存在一些特殊软件无法舍弃&#xff0c;所有装完linux需要用虚拟机装个windows 上来使用特定的一些软件&#xff08;不想用wine了&#xff09;。 还有对一些特定usb设备的透传&#xff0c;这样才能保证在虚拟机中…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站