用 Upstash 作为你的 Redis 服务器

用 Upstash 作为你的 Redis 服务器

本文继续我们的实战教程(源码:github.com/weijunext/n...%25EF%25BC%258C "https://github.com/weijunext/nextjs-learn-demos)%EF%BC%8C") 今天给大家推荐一个免费的 Redis 服务器,它叫 Upstash。

如果你正在开发个人产品,那么请忘掉 Redis 的配置和各种安全措施,用 Upstash,什么 RDB 和 AOF、雪崩和击穿、密码和权限,这些 Upstash 会帮你搞定,你只需要关注你要实现的功能。

本文假定你已了解 Redis 的基本概念,阅读完本文,你将学习到:

  • 创建一个 Upstash 的 Redis 数据库
  • NextJS 服务端组件和 Redis 交互

创建 Redis 数据库

万事开头需注册,请到 upstash.com/ 注册登录,开始咱们的教程。

首次进入后台,看到的是这样的界面

创建 Redis 数据库

稍等片刻就创建完成了,Redis 信息一览无余。

这种方式创建Redis,相信要比我们手动在本地安装Redis、分配db要流畅的多吧。下面进入正题,NextJS中 怎么使用 Upstash 的 Redis。

服务端组件调用

先安装依赖

bash 复制代码
    yarn add @upstash/redis

实际项目中,我们会在多个地方使用redis,所以应该把redis配置写到lib里,方便调用

ts 复制代码
    // @/lib/redis.ts

    import { Redis } from '@upstash/redis'

    const redis = new Redis({
      url: `${process.env.UPSTASH_REDIS_REST_URL}`,
      token: `${process.env.UPSTASH_REDIS_REST_TOKEN}`,
    })

    export default redis

在服务端组件中直接和 redis 交互

tsx 复制代码
    // @/app/pages.tsx

    ......
    import redis from "@/lib/redis";

    export default async function Home() {
    ......
    	await redis.incr("view");
    	const view = await redis.get("view")

    	return (
    		<>
    			......
    				<span className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800">
              <TablerEyeFilled />
              <p>
                <span className="hidden sm:inline-block">Page Views</span>{" "}
                <span className="font-semibold">{nFormatter(view)}</span>
              </p>
            </span>
    			......
    		</>
    	) 

    ......
    }

如果你疑惑为什么组件内可以直接调用redis,那么请看我的过往文章:

从 demo 中可以知道,Upstash 的 redis 命令和 Node开发者熟悉的 ioredis 几乎一样,所以 Upstash 使用起来不会有任何心理门槛。

我们看看控制台,确认 redis 是否被正确操作了:

当我们刷新几次页面后,在 Usage 页卡下可以看到命令调用次数;

在 Data Browser 可以看到 Redis 里的所有数据。

再看页面,数据和控制台相符,说明以上代码没有问题。

结语

Upstash 这样的第三方托管平台,比较适合个人开发者的个人项目使用,它能够让你最轻量又安全地用上 Redis,你要做的只是学习常用的 Redis 的命令。

源码

github.com/weijunext/n...

相关推荐
Asthenia04122 分钟前
ArrayList与LinkedList源码分析及面试应对策略
后端
庸俗今天不摸鱼26 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
Asthenia041231 分钟前
由浅入深解析Redis事务机制及其业务应用-电商场景解决超卖
后端
Asthenia041233 分钟前
Redis详解:从内存一致性到持久化策略的思维链条
后端
黄毛火烧雪下33 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Asthenia041233 分钟前
深入剖析 Redis 持久化:RDB 与 AOF 的全景解析
后端
Apifox43 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox