เพิ่มประสิทธิภาพ Netlify Graph ด้วย Global Cache จาก Upstash Redis

Netlify เพิ่งเปิดตัวฟีเจอร์ใหม่ชื่อ Netlify Graph ช่วยให้นักพัฒนาสร้าง GraphQL API Calls สำหรับเว็บแอปได้ง่ายขึ้น หลังจากเตรียม Query ใน Dashboard แล้ว สามารถ Inject โค้ด Client เข้าโปรเจกต์ได้ในคลิกเดียว

ปัญหา: Latency จาก Netlify Functions

เมื่อใช้ Netlify Functions ร่วมกับบริการภายนอก (เช่น Spotify API) คำขอจาก Client จะต้องผ่าน:

1. Client → Netlify Backend (Functions)
2. Netlify Backend → บริการภายนอก (Spotify)

หากบริการเหล่านี้และผู้ใช้อยู่ต่าง Region กัน จะเกิด Latency สูงมาก

แก้ไขด้วย Upstash Global Redis Cache

Upstash Global Redis แก้ปัญหานี้ได้ด้วยการ Replicate ข้อมูลไปยัง 5 Regions ทั่วโลก (North Virginia, Oregon, Frankfurt, Singapore, São Paulo) ทำให้ API Response ถูก Cache ใกล้ผู้ใช้สุด

การ Implement: Spotify Featured Playlists + Cache

1. Deploy Next.js Starter บน Netlify

Deploy ผ่าน Netlify Console แล้ว Clone repo มา Local รัน netlify dev (Port 8888)

2. ตั้งค่า Netlify Graph + Spotify

1. Netlify Console → Sample App → Graph → Connect API → Spotify
2. Enable Authentication และ Graph Explorer
3. รัน netlify dev --graph แล้วเปิด GraphQL Playground

3. สร้าง Query สำหรับ Featured Playlists

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name
      images { url }
      description
    }
  }
}

4. Generate Handler Code

คลิก Actions → Generate Handler จะได้ไฟล์ 2 ไฟล์:

• netlify/functions/SpotifyFeatured.js - Netlify Function เรียก Spotify API
• pages/SpotifyFeaturedForm.jsx - React Component เรียก Function

5. เพิ่ม Upstash Redis Cache ใน Function

// netlify/functions/SpotifyFeatured.js
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 async (req, res) => {
  const cacheKey = "spotify-featured-playlists";
  const cacheTTL = 300; // 5 นาที

  // 1. เช็ค Cache ก่อน
  let spotifyData = await redis.get(cacheKey);

  if (!spotifyData) {
    // 2. Cache Miss - เรียก Spotify API จริง
    const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured(
      {},
      { accessToken: process.env.SPOTIFY_ACCESS_TOKEN }
    );

    if (errors) {
      console.error(JSON.stringify(errors, null, 2));
      return res.status(500).json({ errors });
    }

    // 3. เซฟ Cache
    await redis.setex(cacheKey, cacheTTL, JSON.stringify(data));
    spotifyData = data;
  } else {
    // Cache Hit - parse จาก string
    spotifyData = JSON.parse(spotifyData);
  }

  res.setHeader("Content-Type", "application/json");
  return res.status(200).json({ spotifyData });
};

สร้าง Upstash Global Database จาก Console แล้วใส่ Credentials ใน Netlify Environment Variables

สรุป

• Netlify Graph ทำให้เชื่อมต่อ 3rd Party API ง่ายขึ้นด้วย GraphQL Explorer และ Code Generation
• Upstash Global Redis ให้ Global Cache ที่ Setup ได้ในไม่กี่คลิก ลด Latency ได้จริง
• รวมกันได้: Developer Experience ดี + Performance ดี

Source Code: GitHub Repository