เพิ่มประสิทธิภาพ API ของ Next.js ด้วย Redis Caching บน Sevalla

เมื่อคุณได้ยินเกี่ยวกับ Next.js ความคิดแรกของคุณอาจเป็นเว็บไซต์แบบคงที่หรือส่วนหน้าที่ขับเคลื่อนด้วย React แต่นั่นเป็นเพียงส่วนหนึ่งของเรื่องราว Next.js ยังเพิ่มประสิทธิภาพ API แบ็กเอนด์ที่มีฟีเจอร์ครบถ้วนซึ่งคุณสามารถโฮสต์และปรับขนาดได้เช่นเดียวกับบริการแบ็กเอนด์อื่นๆ

ในบทความก่อนหน้านี้ ฉันได้อธิบายเกี่ยวกับการสร้าง Next.js API และปรับใช้กับ Sevalla ตัวอย่างนี้จัดเก็บข้อมูลไว้ในฐานข้อมูล PostgreSQL และจัดการคำขอโดยตรง ซึ่งทำงานได้ดี แต่เมื่อปริมาณการรับส่งข้อมูลเพิ่มขึ้น API ที่เข้าถึงฐานข้อมูลในทุกคำขอก็อาจช้าลงได้

นี่คือที่มาของการแคช การเพิ่ม Redis เป็นเลเยอร์แคชทำให้เราสามารถทำให้ Next.js API ของเราเร็วขึ้นและมีประสิทธิภาพมากขึ้นมาก ในบทความนี้ เราจะดูวิธีเพิ่มแคช Redis ให้กับ API ของเรา ปรับใช้กับ Sevalla และแสดงการปรับปรุงที่วัดผลได้

ในบทความที่แล้ว ฉันได้อธิบาย API โดยละเอียด ดังนั้นคุณสามารถใช้พื้นที่เก็บข้อมูลนี้เพื่อเริ่มต้นเป็นฐานสำหรับโปรเจ็กต์นี้ได้

สารบัญ

• เหตุใดการแคชจึงมีความสำคัญ

• เรดิสคืออะไร?

• การตั้งค่าโครงการ

• กำลังจัดเตรียม Redis

• กำลังอัปเดตแคชเมื่ออ่าน

• กำลังอัปเดตแคชเมื่อเขียน

• กำลังปรับใช้กับ Sevalla

• เหตุใด Redis จึงทำงานได้ดีกับ Next.js API

• บทสรุป

เหตุใดการแคชจึงมีความสำคัญ

ทุกครั้งที่ API ของคุณเข้าถึงฐานข้อมูล จะต้องใช้เวลาและทรัพยากร ฐานข้อมูลสามารถจัดเก็บและสืบค้นข้อมูลที่มีโครงสร้างได้ดี แต่ไม่ได้รับการปรับให้เหมาะสมกับความเร็วในวงกว้าง เมื่อคุณต้องการให้บริการคำขออ่านหลายพันรายการต่อวินาที

การแคชช่วยแก้ปัญหานี้ด้วยการเก็บข้อมูลที่เข้าถึงบ่อยไว้ในหน่วยความจำ แทนที่จะถามฐานข้อมูลทุกครั้ง API สามารถส่งคืนข้อมูลจากแคชได้โดยตรง หากมี Redis เหมาะสมที่สุดสำหรับสิ่งนี้เนื่องจากเป็นที่เก็บคีย์-ค่าในหน่วยความจำที่ออกแบบมาเพื่อประสิทธิภาพ

ตัวอย่างเช่น หากคุณดึงรายชื่อผู้ใช้จากฐานข้อมูลในทุกคำขอ อาจต้องใช้เวลา 200 มิลลิวินาทีในการเรียกใช้การค้นหาและส่งกลับผลลัพธ์ ด้วยการแคช Redis คำขอแรกจะจัดเก็บผลลัพธ์ไว้ในหน่วยความจำ และคำขอที่ตามมาสามารถส่งคืนข้อมูลเดียวกันได้ภายในเวลาไม่ถึง 10 มิลลิวินาที นั่นเป็นการปรับปรุงตามลำดับขนาด

เรดิสคืออะไร?

Redis เป็นที่เก็บข้อมูลในหน่วยความจำที่ทำงานเหมือนกับฐานข้อมูลที่รวดเร็วเป็นพิเศษ แทนที่จะเขียนและอ่านจากดิสก์ จะเก็บข้อมูลไว้ในหน่วยความจำ ซึ่งทำให้รวดเร็วอย่างเหลือเชื่อ ด้วยเหตุนี้จึงมักถูกใช้เป็นแคช โดยที่ความเร็วมีความสำคัญมากกว่าการจัดเก็บข้อมูลระยะยาว

ได้รับการออกแบบมาเพื่อจัดการกับปริมาณงานที่มีปริมาณงานสูงโดยมีความหน่วงต่ำมาก ซึ่งหมายความว่าสามารถตอบสนองได้ในหน่วยไมโครวินาที ทำให้เหมาะอย่างยิ่งสำหรับกรณีการใช้งาน เช่น การแคชการตอบสนองของ API การจัดเก็บข้อมูลเซสชัน หรือแม้แต่การขับเคลื่อนแอปพลิเคชันแบบเรียลไทม์ เช่น ระบบแชทและกระดานผู้นำ

ต่างจากฐานข้อมูลแบบเดิม Redis มุ่งเน้นไปที่ความเรียบง่ายและรวดเร็ว โดยจัดเก็บข้อมูลเป็นคู่คีย์-ค่า ดังนั้นคุณจึงสามารถดึงข้อมูลหรืออัปเดตค่าได้อย่างรวดเร็วโดยไม่ต้องเขียนคำสั่งที่ซับซ้อน และเนื่องจากรองรับประเภทข้อมูลขั้นสูง เช่น รายการ ชุด และแฮช จึงมีความยืดหยุ่นมากกว่าการจัดเก็บคีย์-ค่าธรรมดามาก

เมื่อรวมกับ API เช่นเดียวกับที่เราสร้างขึ้นใน Next.js Redis จะช่วยลดภาระงานบนฐานข้อมูลหลักและให้การตอบสนองที่รวดเร็วเป็นพิเศษแก่ลูกค้า

การตั้งค่าโครงการ

มาโคลนพื้นที่เก็บข้อมูลกันเถอะ:

git clone git@github.com:manishmshiva/nextjs-api-pgsql.git next-api

ตอนนี้เรามาดูไดเร็กทอรีและทำการติดตั้งแบบ npm เพื่อติดตั้งแพ็คเกจ

cd next-api
npm i

สร้างไฟล์ .env และเพิ่ม URL ฐานข้อมูลจาก Sevalla ลงในตัวแปรสภาพแวดล้อม

cat .env

ไฟล์ .env ควรมีลักษณะดังนี้:

PGSQL_URL=postgres://<username>:<password>-@asia-east1-001.proxy.kinsta.app:30503/<db_name>

ตอนนี้ เรามาตรวจสอบให้แน่ใจว่าแอปพลิเคชันทำงานตามที่คาดไว้โดยการเริ่มแอปพลิเคชันและทำการร้องขอ API สองสามรายการ

กำลังเริ่มแอป:

npm run dev

ตรวจสอบให้แน่ใจว่าฐานข้อมูลเชื่อมต่ออยู่ ไปที่ localhost:3000 บนเบราว์เซอร์ของคุณ ควรส่งคืน JSON ต่อไปนี้:

มาสร้างผู้ใช้ใหม่กันเถอะ หากต้องการสร้างรายการใหม่ในฐานข้อมูลโดยใช้บุรุษไปรษณีย์ ให้ส่งคำขอ POST ด้วย JSON ต่อไปนี้:

{"id":"d9553bb7-2c72-4d92-876b-9c3b40a8c62c","name":"Larry","email":"larry@example.com","age":"25"}

ตรวจสอบให้แน่ใจว่าบันทึกถูกสร้างขึ้นโดยไปที่ localhost:3000/users ในเบราว์เซอร์

เยี่ยมมาก ตอนนี้เรามาแคช API เหล่านี้โดยใช้ Redis กันดีกว่า

การจัดเตรียม Redis

ไปที่แดชบอร์ดของ Sevalla แล้วคลิกที่ "ฐานข้อมูล" เลือก "Redis" จากรายการ และปล่อยให้ตัวเลือกที่เหลือเป็นค่าเริ่มต้น

เมื่อสร้างฐานข้อมูลแล้ว ให้เปิดตัวเลือก "การเชื่อมต่อภายนอก" และคัดลอก URL ที่เข้าถึงได้แบบสาธารณะ

นี่คือลักษณะที่ควรปรากฏในไฟล์ .env:

REDIS_URL=redis://default:<password>@<host>:<port>

ตอนนี้ติดตั้งไคลเอ็นต์ Redis สำหรับ Node.js:

npm install ioredis

ตอนนี้เราสามารถเชื่อมต่อกับ Redis และใช้เป็นเลเยอร์แคชสำหรับ API ผู้ใช้ของเราได้แล้ว มาดูวิธีการใช้แคชกัน

การอัปเดตแคชเมื่ออ่าน

นี่คือ users/route.ts ที่อัปเดตแล้ว ที่ใช้ Redis:

import { NextResponse } from "next/server";
import { Client } from "pg";
import Redis from "ioredis";
const redis = new Redis(process.env.REDIS_URL!);
async function readUsers() {
 const client = new Client({
 connectionString: process.env.PGSQL_URL,
 });
 await client.connect();
 try {
 const result = await client.query("SELECT id, name, email, age FROM users");
 return result.rows;
 } finally {
 await client.end();
 }
}
export async function GET() {
 try {
 // Check cache first
 const cached = await redis.get("users");
 if (cached) {
 return NextResponse.json(JSON.parse(cached));
 }
 // Fallback to database if not cached
 const users = await readUsers();
 // Store result in cache with 60s TTL
 await redis.set("users", JSON.stringify(users), "EX", 60);
 return NextResponse.json(users);
 } catch (err) {
 return NextResponse.json({ error: "Failed to fetch users" }, { status: 500 });
 }
}

ตอนนี้ เมื่อคุณกด /users :

1. ก่อนอื่น API จะตรวจสอบ Redis

2. หากมีข้อมูลอยู่ก็จะส่งคืนทันที

3. ถ้าไม่เช่นนั้น ระบบจะสอบถาม PostgreSQL บันทึกผลลัพธ์ใน Redis แล้วส่งคืน

ทำให้คำขอซ้ำ ๆ รวดเร็วมาก คุณสามารถปรับการหมดอายุของแคชได้ (EX 60 ) ขึ้นอยู่กับความสดใหม่ของข้อมูล

หากไม่มีแคช Redis กำลังดึงข้อมูล /users สิบครั้งหมายถึงสิบแบบสอบถามฐานข้อมูล แต่ละรายการอาจใช้เวลาประมาณ 150–200 มิลลิวินาที ขึ้นอยู่กับขนาดฐานข้อมูลและเวลาแฝงของเครือข่าย

ด้วย Redis คำขอแรกยังคงใช้เวลาประมาณ 200 มิลลิวินาที เนื่องจากคำขอดังกล่าวเติมแคช แต่ทุกคำขอหลังจากนั้นจะเกิดขึ้นแทบจะในทันที ซึ่งมักจะใช้เวลาไม่ถึง 10 มิลลิวินาที นั่นเป็นการปรับปรุง 20 เท่า .

การเร่งความเร็วนี้มีความสำคัญเมื่อ API ของคุณเผชิญกับคำขอนับร้อยหรือหลายพันคำขอต่อวินาที การแคชไม่เพียงแต่ช่วยลดเวลาแฝงเท่านั้น แต่ยังช่วยลดภาระในฐานข้อมูลของคุณอีกด้วย

การอัปเดตแคชในการเขียน

ขณะนี้มีเพียงคำขอ GET เท่านั้นที่ใช้แคช แต่ถ้าเราเพิ่มผู้ใช้ใหม่ล่ะ? แคชจะยังคงส่งคืนข้อมูลเก่า

วิธีแก้ไขคืออัปเดตหรือล้างแคชทุกครั้งที่มีการเขียนเกิดขึ้น มาอัปเดต POST กันเถอะ ตัวจัดการ:

export async function POST(req: Request) {
 try {
 const body = await req.json();
 const client = new Client({
 connectionString: process.env.PGSQL_URL,
 });
 await client.connect();
 const query = `
 INSERT INTO users (id, name, email, age)
 VALUES ($1, $2, $3, $4)
 RETURNING *;
 `;
 const result = await client.query(query, [
 body.id,
 body.name,
 body.email,
 body.age,
 ]);
 await client.end();
 // Invalidate cache so next GET fetches fresh data
 await redis.del("users");
 return NextResponse.json(result.rows[0]);
 } catch (err) {
 return NextResponse.json({ error: "Failed to add user" }, { status: 500 });
 }
}

ตอนนี้เมื่อใดก็ตามที่มีการสร้างผู้ใช้ใหม่ แคชสำหรับ users ถูกล้างแล้ว คำขอ GET ถัดไปจะดึงข้อมูลจากฐานข้อมูล รีเฟรชแคช จากนั้นให้บริการข้อมูลที่แคชไว้ต่อไป

ปรับใช้กับ Sevalla

พุชโค้ดของคุณไปที่ GitHub หรือแยกพื้นที่เก็บข้อมูลของฉัน ตอนนี้ไปที่ Sevalla และสร้างแอปใหม่กันดีกว่า

เลือกพื้นที่เก็บข้อมูลของคุณจากเมนูแบบเลื่อนลงและทำเครื่องหมายที่ “การปรับใช้อัตโนมัติเมื่อคอมมิต” สิ่งนี้จะช่วยให้มั่นใจได้ว่าการปรับใช้จะเป็นไปโดยอัตโนมัติทุกครั้งที่คุณพุชโค้ด เลือก "งานอดิเรก" ใต้ส่วนทรัพยากร

คลิก "สร้าง" ไม่ใช่ "สร้างและปรับใช้" เราไม่ได้เพิ่ม PostgreSQL URL และ Redis URL ของเราเป็นตัวแปรสภาพแวดล้อม ดังนั้นแอปจะเสียหายหากคุณพยายามปรับใช้

ไปที่ส่วน "ตัวแปรสภาพแวดล้อม" และเพิ่มคีย์ "PGSQL_URL" และ URL ในช่องค่า ทำเช่นเดียวกันกับคีย์ “REDIS_URL” และเพิ่ม Redis URL

ตอนนี้กลับไปที่ส่วน "ภาพรวม" แล้วคลิก "ปรับใช้ทันที"

เมื่อการปรับใช้งานเสร็จสมบูรณ์ คลิก “เยี่ยมชมแอป” เพื่อรับ URL สดของ API ของคุณ คุณสามารถแทนที่ localhost:3000 ด้วย URL ใหม่ในบุรุษไปรษณีย์และทดสอบ API ของคุณ

เหตุใด Redis จึงทำงานได้ดีกับ Next.js API

Redis มีน้ำหนักเบา รวดเร็วเป็นพิเศษ และสมบูรณ์แบบสำหรับการแคชการตอบสนอง API ในบริบทของ Next.js มันเข้ากันได้อย่างเป็นธรรมชาติเพราะ:

• เส้นทาง API ทำงานฝั่งเซิร์ฟเวอร์ซึ่งสามารถสอบถาม Redis ได้โดยตรง

• ตรรกะการแคชนั้นง่ายต่อการเพิ่มรอบการเรียกฐานข้อมูล

• Redis สามารถใช้ได้มากกว่าการแคช สิ่งต่างๆ เช่น การจำกัดอัตรา พื้นที่จัดเก็บเซสชัน และ pub/sub ก็เป็นรูปแบบทั่วไปเช่นกัน

ด้วยการรวม Next.js, PostgreSQL และ Redis บน Sevalla คุณจะได้รับสแต็กที่รวดเร็ว ปรับขนาดได้ และปรับใช้ได้ง่าย

บทสรุป

การแคชไม่ได้เป็นเพียงการเพิ่มประสิทธิภาพเท่านั้น แต่ยังจำเป็นสำหรับ API ในโลกแห่งความเป็นจริง Next.js ช่วยให้คุณสร้าง API แบ็กเอนด์ที่มีประสิทธิภาพซึ่งสามารถนำไปใช้งานได้อย่างง่ายดาย การเพิ่ม Redis ลงในมิกซ์จะทำให้ API เหล่านั้นสามารถรองรับการปรับขนาดได้โดยไม่เปลืองแรง

Sevalla เชื่อมโยงทุกอย่างไว้ด้วยกันโดยให้บริการ PostgreSQL, Redis และโฮสติ้งแอปที่ได้รับการจัดการในที่เดียว ด้วยตัวแปรสภาพแวดล้อมไม่กี่ตัวและ repo GitHub คุณสามารถเปลี่ยนจากการพัฒนาในเครื่องไปเป็น API ที่แคชไว้พร้อมสำหรับการใช้งานจริงได้ภายในไม่กี่นาที

หวังว่าคุณจะสนุกกับบทความนี้ สมัครรับจดหมายข่าว AI ฟรีของฉัน TuringTalks.ai สำหรับบทช่วยสอนเชิงปฏิบัติเพิ่มเติมเกี่ยวกับ AI คุณสามารถหาฉันได้ที่ ลิงก์อิน

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น