Upstash রেডিসের গ্লোবাল ক্যাশ দিয়ে Netlify Graph পারফরম্যান্স বাড়ান

গতকাল Netlifyn একটি নতুন ফিচার ঘোষণা করেছে যার নাম Netlify Graph। আমার সহকর্মী সম্প্রতি চিত্রে একই অনুপস্থিত অংশ হাইলাইট করেছেন এবং Netlify সমাধান কողাও একটি ভালো পদক্ষেপ নেয়েছে।

মৌলিকভাবে Netlify Graph ডেভেলপারদের তাদের ওয়েব অ্যাপের জন্য GraphQL API কল তৈরি করতে সাহায্য করে। Netlify ড্যাশবোর্ডে GraphQL রিকোয়েস্ট প্রস্তুত করার পর আপনি একক ক্লিকে ক্লায়েন্ট কোড আপনার প্রোজেক্টে ইনজেক্ট করতে পারেন।

Netlify Functions-এর সাথে থার্ড-পার্টি সার্ভিস ব্যবহার করার একটি ড্রব্যাক আছে। ক্লায়েন্ট-সাইড রিকোয়েস্ট প্রথম Netlify ব্যাকএন্ড (Functions)-এ যায়, তারপর থার্ড-পার্টি সার্ভিসে যায় (আমাদের উদাহরণে Spotify)। যদি এই সার্ভিসগুলো এবং এন্ড ইউজার একই জিও-লোকেশনে না থাকে তবে এই যাত্রা লেটেন্সি অনেক বাড়ায়।

যদি আমরা Netlify Functions থেকে ডেটা ক্যাশ করতে পারি তবে লেটেন্সি নিম্ন করতে পারি। Upstash গ্লোবাল রেডিস ডেটাবেস Netlify API কল ক্যাশ করার জন্য একটি ভালো সমাধান হতে পারে। Upstash রেডিসের মাল্টি-রিজন রিপ্লিকেশনের সুবিধায় API রেসপন্স গ্লোবালি ক্যাশ/রিপ্লিকেট করা যায়।

চলুন একটি খুব সাধারণ Spotify অ্যাপ্লিকেশন তৈরি করি যা Spotify API কল করে এবং Upstash গ্লোবাল রেডিসে API কলগুলো ক্যাশ করে।

Netlify কনসোল ব্যবহার করে Next JS Starter App ডিপ্লয় করুন। এটি খুব সহজ একটি Next.js অ্যাপ যা Netlify-এ দুই-चार ক্লিকেই ডিপ্লয় করা যায়। Next JS starter App ডিপ্লয় করার অন্যান্য অপশন চেক করুন।

ডিপ্লয় স্টেপগুলো শেষ হলে, আপনার স্যাম্পল রিপোজিটরি ক্লোন করুন এবং netlify dev কমান্ড এক্সিকিউট করুন। এটি localhost:8888-এ কাজ করবে। আপনাকে netlify login এক্সিকিউট করতে হতে পারে যদি এটি প্রথমবার সেটআপ করেন।

এখন আমরা Netlify Graph-Spotify API ইন্টিগ্রেশন কনফিগার করব। নেভিগেট করুন:

Netlify Console → Sample App → Graph → Connect API or Service → Spotify

Spotify কনফিগারেশন পেজে, Authentication এবং Graph Explorer ইনএবল করুন, এটি Spotify-এর সাথে API ইন্টিগ্রেশনের জন্য অথেনটিকেট করবে।

এখন আমরা GraphQL Playground-এ খেলতে পারি। Start querying Spotify বাটনে ক্লিক করুন। এখন প্রজেক্ট ডিরেক্টরিতে নিচের কমান্ডের সাথে netlify-cli চালান।

netlify dev --graph

CLI ফিনিশ হলে, Netlify Graph সেকশন চেক করুন, এবং আপনি এক্টিভ সেশন দেখবেন। সেশনটিতে ক্লিক করুন, এবং এটি GraphQL API-এর জন্য একটি প্লে গ্রাউন্ড এনভায়রনমেন্ট খুলবে।

এই প্লে গ্রাউন্ডটি অসাধারণ। নির্দিষ্ট GraphQL কোয়েরি জেনারেট করার জন্য এটি খুব উপযোগী। আমি দ্রুত একটি Spotify কোয়েরি জেনারেট করলাম যা Featured Playlists রিটার্ন করে।

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

কোয়েরি বিল্ড করার পর, কোড জেনারেট করি এবং আমাদের প্রোজেক্টে ইনজেক্ট করি।

Actions → Generate Handler এ ক্লিক করুন।

netlify-cli স্বয়ংক্রিয়ভাবে api ডিরেক্টরির নিচে SpotifyFeatured.js ফাইল এবং pages ডিরেক্টরির নিচে SpotifyFeaturedForm.jsx জেনারেট করবে।

• SpotifyFeatured.js: Netlify ফাংশন ডেফিনিশন যা Netlify ব্যাকএন্ড → Spotify API থেকে ডেটা ফেচ করে
• SpotifyFeaturedForm.jsx: একটি React কম্পোনেন্ট যা Netlify ফাংশন কল করে এবং রেসপন্স রিটার্ন করে

আমি এই কম্পোনেন্টের শুধু HTML/CSS পার্ট এডিট করেছি ভালো UI অভিজ্ঞতার জন্য। আমার কোড পোস্টের শেষে শেয়ার করব।

SpotifyFeaturedForm.jsx কম্পোনেন্টটি index.js-এ ইনক্লুড করুন।

import Spotify from './SpotifyFeaturedForm'
// ...
<Spotify title="Spotify Featured Playlist"/>

এখন আমার মেইন পেজে একটি বাটন আছে এবং Spotify API থেকে রেসপন্স পেতে পারি। চলুন রেসপন্সগুলো ক্যাশ করি।

Upstash গ্লোবাল ডেটাবেস তৈরি করুন Upstash কনসোল থেকে

আমরা অটো-জেনারেটেড Netlify ফাংশন কোড (SpotifyFeatured.js) মডিফাই করব। কোডে Netlify ব্যাকএন্ড/Spotify API থেকে ডেটা ফেচ করার কোড আছে:

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});

আমরা প্রথমে রেডিসে ক্যাশ চেক করব, যদি না থাকে তবে থার্ড-পার্টি সার্ভিস কল করব।

রেডিসের সাথে কমিউনিকেশনের জন্য আমি Upstash রেডিস JS লাইব্রেরি ব্যবহার করেছি। আপনি আপনার Upstash রেডিস REST ক্রেডেনশিয়াল ডেটাবেস ডিটেইলস পেজ থেকে পেতে পারেন।

নিচের কোড স্নিপেটে আপনার UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_PASSWORD রিপ্লেস করুন।

redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');

if (spotifyData.data == null) {
  spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
  
  if (spotifyData.errors) {
    console.error(JSON.stringify(spotifyData.errors, null, 2));
  } else {
    await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
  }
} else {
  spotifyData = JSON.parse(spotifyData.data)
}

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

উপরের কোড স্নিপেটে, প্রথমে আমরা চেক করি ক্যাশ Upstash রেডিসে আছে কিনা। যদি থাকে তবে ক্যাশ ব্যবহার করি, অন্যথায় মূল API থেকে ফেচ করি এবং Upstash-এ ক্যাশ সেভ করি। এটি খুব সিম্পল কোড স্নিপেট এবং উদ্দেশ्यानুযায়ী উন্নত/মডিফাই করা যায়।

সুতরাং আমরা Netlify Graph ফিচারে গ্লোবাল ক্যাশ বিহেভিয়ার যোগ করলাম মাত্র কয়েক লাইনের কোড দিয়ে।

উপসংহার

Netlify Graph ফিচার সব ডেভেলপারকে সহজে থার্ড-পার্টি API সার্ভিস তাদের কোডে ইন্টিগ্রেট করতে সক্ষম করবে। Netlify-এর GraphQL এক্সপ্লোরার এবং কোড ইনজেকশন খুব সাহায্য করে।

অন্যদিকে, যদি আপনি API রেসপন্স ক্যাশ করতে চান তবে Upstash গ্লোবাল ডেটাবেস রেসপন্স ক্যাশ করার একটি সমাধান। Upstash রেডিস ডেটাবেস তৈরি করা মাত্র কয়েক ক্লিকের ব্যাপার।

এখানে উদাহরণ অ্যাপ্লিকেশনের সর্বশেষ কোড আছে।