Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Redis

Bắt đầu với Next.js Edge Functions: Tăng Hiệu suất và Giảm Độ trễ

Next.js Functions là gì? Tại sao chúng quan trọng?

Hôm nay, team Vercel công bố Next.js Edge functions. Edge functions cho phép nhà phát triển chạy mã tại các server phân tán toàn cầu. Điều này có nghĩa là mã của bạn sẽ thực thi tại vị trí gần người dùng nhất. Bạn có thể coi edge functions như serverless functions chạy trên cơ sở hạ tầng CDN. Edge functions có các lợi thế sau:

  • Độ trễ thấp toàn cầu: Vì mã được sao chép đến nhiều vị trí toàn cầu (PoP: points of presence), người dùng ở bất kỳ đâu cũng trải nghiệm độ trễ thấp. Mỗi client lấy phản hồi từ server gần nhất.
  • Không cold start: Nhà cung cấp cơ sở hạ tầng edge dùng V8 Isolates loại bỏ cold starts. Nghĩa là khởi động nhanh hơn nhiều.

Bắt đầu với Next.js Functions

Ở đây chúng ta sẽ viết Next.js edge function hiển thị lời chào tùy chỉnh tùy theo vị trí client. Chúng ta sẽ tải thông điệp chào từ Upstash Redis.

Xem repo và demo.

1 Tạo ứng dụng Next.js và cài đặt Upstash Redis:

npx create-next-app@latest --typescript
cd nextjs-edge
npm install @upstash/redis

2 Tạo cơ sở dữ liệu Redis:

Tạo Global database cho độ trễ edge tốt nhất trong Bảng điều khiển Upstash. Kết nối cơ sở dữ liệu với redis-cli và thêm dữ liệu chào như sau:

global-promoted-chicken-30286.upstash.io:30286>
set GB "Ey up?"
OK
global-promoted-chicken-30286.upstash.io:30286>
set US "Yo, what's up?"
OK
global-promoted-chicken-30286.upstash.io:30286>
set TR "Naber dostum?"
OK
global-promoted-chicken-30286.upstash.io:30286>
set DE "Was ist los?"
OK
global-promoted-chicken-30286.upstash.io:30286>
set IN "Namaste"
OK

3 Tạo edge function:

Tạo file pages/api/_middleware.ts như sau:

import type { NextFetchEvent, NextRequest } from "next/server";
import { Redis } from "@upstash/redis";

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const country = req.geo.country || "US";
  const redis = new Redis({
    url: "UPSTASH_REDIS_REST_URL",
    token: "UPSTASH_REDIS_REST_TOKEN",
  });
  const result = await redis.get(country);
  const greeting = result || "Hello World!";
  return new Response(greeting);
}

Sao chép và thay thế UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN từ trang cơ sở dữ liệu trong Bảng điều khiển Upstash.

4 Chạy và Triển khai:

Chạy ứng dụng cục bộ:

npm run dev

Kiểm tra: https://localhost:3000/api/hello

Bạn sẽ thấy req.geo không được định nghĩa. Triển khai app lên Vercel để xem hoạt động trên cơ sở hạ tầng Edge:

vercel deploy

Kiểm tra: https://nextjs-edge-enesakar-upstash.vercel.app/api/hello

Bạn có thể kiểm tra lời chào từ các vị trí khác nhau dùng VPN.

Kết luận

Next.js Edge là tin tức tuyệt vời cho nhà phát triển xây dựng ứng dụng nhanh toàn cầu. Upstash Redis là dịch vụ dữ liệu được thiết kế và tối ưu cho edge functions.

Các link hữu ích:

Cho chúng tôi biết suy nghĩ trên Twitter hoặc Discord.