Computer >> 컴퓨터 >  >> 프로그래밍 >> Redis

실시간 기능을 Next.js에 손쉽게 통합

Next.js에 실시간 기능을 추가하는 것은 짜증나는 일입니다 💀

내 말은 다음과 같습니다:

  • Vercel AI SDK용 실시간 스트림
  • 라이브 대시보드
  • 실시간 알림 및 업데이트
  • 라이브 커서 또는 '온라인 상태' 표시
  • 파일 업로드 또는 장기 실행 작업의 진행 상황 추적

그리고 이것은 단지 이 목적으로 사용할 수 있는 SaaS가 부족하기 때문이 아닙니다. 기존 서비스는 다음과 같습니다:

  • 비싸고 가격이 불분명함(Ably)
  • 나쁜 개발자 경험으로 인해 유형이 안전하지 않음(푸셔)
  • 훌륭하지만(Convex, Supabase) 전체 스택을 마이그레이션하지 않고 실시간을 추가하기는 어렵습니다.

Upstash Realtime의 목표

저는 실시간 서비스를 원했습니다

  • 프런트엔드와 백엔드에서 100% 유형 안전
  • Vercel 및 기타 서버리스 플랫폼에 배포 가능
  • 연결 시간이 아닌 이벤트를 기준으로 가격이 책정됩니다.
  • 기존 데이터베이스(Neon, Planetscale 등 모든 것)와 함께 사용 가능

그래서 우리는 바로 그러한 목적으로 Upstash Realtime을 구축하고 있습니다. Next.js 앱에 실시간 기능을 추가하는 가장 쉬운 방법입니다. 설치에는 2분이 소요되며 Vercel, Cloudflare 또는 기타 제품에 배포할 수 있습니다.

이 작업을 수행하는 기존 방법이 모두 싫었습니다 🤡

저는 Contentport라는 오픈 소스 SaaS를 구축하면서 Realtime에 대한 아이디어를 얻었습니다. contentport를 통해 트윗을 게시하면 실패 시 자동으로 재시도되는 Upstash 워크플로에서 게시 로직이 실행됩니다.

이렇게 하면 Twitter API가 다운되더라도 AI 제공업체가 중단되거나 다른 문제가 발생합니다. 잘못된 경우 게시하는 사람에 대해 매우 높은 신뢰도를 보장할 수 있습니다.

그러나 이 논리는 백그라운드 작업에서 실행되기 때문에 클라이언트와 게시 논리 사이에는 연결이 없습니다. 즉, 클라이언트에게 현재 상태(예:'처리 중', '게시 중', '성공')를 알릴 방법이 없습니다.

실시간 기능을 Next.js에 손쉽게 통합

상태 업데이트를 클라이언트에 실시간으로 보내려면 일종의 메시지 브로커가 필요했습니다.

나는 Pusher에 매우 만족하지 않았으며 단지 실시간 기능을 위해 기존 Neon Postgres 데이터베이스를 Convex로 마이그레이션하고 싶지 않았습니다. 그리고 우리의 가장 성숙한 제품인 Upstash Redis에는 이 작업을 수행하는 데 필요한 모든 것(Pub/Sub 및 Redis Streams)이 포함되어 있습니다.

빠른 예

서버 작업에서 클라이언트로 실시간 업데이트를 보내는 간단한 예제를 만들어 보겠습니다.

먼저 패키지를 설치합니다:

npm install @upstash/realtime

그런 다음 zod를 사용하여 이벤트를 정의합니다:

lib/realtime.ts
import { InferRealtimeEvents, Realtime } from "@upstash/realtime";
import z from "zod/v4";
import { redis } from "./redis";
 
const schema = {
 notification: z.object({
 message: z.string(),
 }),
};
 
const realtime = new Realtime({ schema, redis });
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>;

모든 경로 핸들러에서 이벤트 보내기:

Route.ts
import { realtime } from "@/lib/realtime";
 
await realtime.emit("notification", { message: "Hello world!" });

React 구성요소의 이벤트를 구독하세요:

page.tsx
import { RealtimeEvents } from "@/lib/realtime";
import { useRealtime } from "@upstash/realtime/client";
 
useRealtime<RealtimeEvents>({
 event: "notification",
 onData: ({ message }) => {
 console.log(message);
 },
});

그게 다야! 이제 서버에서 클라이언트로 완전히 유형이 안전한 실시간 업데이트가 가능합니다.

면책조항

Upstash Realtime은 Pusher와 같은 소켓이 아닌 HTTP를 사용하므로 1:1 Pusher 대체를 의미하지 않습니다.

따라서 매우 높은 빈도의 업데이트(초당 15-20회)의 경우 HTTP가 더 안정적일 수 있지만 소켓 연결 때문에 Pusher를 권장합니다.

하지만 Vercel AI SDK의 고주파 AI 청크 업데이트, 라이브 대시보드 또는 라이브 채팅 메시지와 같은 다른 모든 것에는 Upstash Realtime을 구축하여 활용하고 있습니다.

꼭 시도해 보세요. 시작하기가 매우 쉽습니다!

읽어주셔서 감사합니다! 🙌 질문이나 의견이 있으신가요? @joshtriedcoding으로 저에게 직접 연락주세요.