ওয়েবসাইট বা ওয়েব অ্যাপ ডেভেলপ করার সময়, কেউই স্পিড অপ্টিমাইজেশনের পেছনে ঘন্টার পর ঘন্টা ব্যয় করতে চায় না। সমস্যাটি হলো একটি ফাস্ট ওয়েবসাইট অত্যন্ত গুরুত্বপূর্ণ এবং পারফরম্যান্স প্রায়শই এর সাফল্যের জন্য একটি ডিসাইডিং ফ্যাক্টর। Remix Run-এর মতো ওয়েব ফ্রেমওয়ার্কগুলো ওয়েব পারফরম্যান্স অপ্টিমাইজ করার লক্ষ্যে তৈরি করা হয়েছে তাদের কনফিগারেশন ন্যূনতম রাখते ("zero-config")। আজকাল দर्जন‌ها ফ্রেমওয়ার্ক উপলব্ধ, যা আপনাকে হাই স্পিড অর্জন করতে সাহায্য করে।

দুর্ভাগ্যক্রমে, সেরা ওয়েবসাইট লোড টাইমগুলো আমাদের খুব কাজে আসে না যদি না আমাদের অ্যাপের ডাটাবেসও লাইটনিং ফাস্ট হয়।

আজ, আমরা দেখব কীভাবে চমৎকার ওয়েবসাইট লোডিং স্পিড অর্জন করা যায় এবং সেটিকে Upstash Redis Global Databases-এর পিক ডাটাবেস পারফরম্যান্স-এর সাথে কাঙ্কাণ করতে।

কেন Global Databases?

অধিকাংশ ব্যক্তি একটি ওয়েবসাইট অনলাইন ডিপ্লয় করার সময় একটি Content Delivery Network (CDN) ব্যবহার করে। একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) হলো সার্ভারগুলির একটি গ্লোবাল নেটওয়ার্ক। যেহেতু ওয়েবসাইট ফাইলগুলো ক্যাশ করা যায় এবং ক্লায়েন্টের সবচেয়ে নিকটবর্তী জিওগ্রাফিক লোকেশন থেকে সার্ভ করা যায়, একটি CDN একটি সিঙ্গেল সার্ভার সিস্টেমের চেয়ে উল্লেখযোগ্যভাবে কম লেটেন্সি ডেলিভার করে। এটি নিশ্চিত করে যে আপনার ওয়েবসাইট সারা বিশ্বে দ্রুত লোড হয়। যখন আমরা Upstash-এর Global Databases কথা বলি, CDN-এর একই কনসেপ্ট Redis ডাটাবেসের ক্ষেত্রে প্রযোজ্য। গ্লোবাল ডাটাবেসের সাথে, আপনার ডাটাবেসের রেপ্লিকা বিশ্বের একাধিক অঞ্চলে বিতরণ করা থাকে। এখন, ক্লায়েন্টরা নিকটতম অঞ্চলে রাউট হয় এবং ১০ms-এর নিচে লেটেন্সি অভিজ্ঞতা করে।

শুরু করুন

এখন যেহেতু আমি অনেক কথা обещা করেছি, চলুন প্র্যাক্টিসে পুরো জিনিসটি কীভাবে কাজ করে তা দেখি।

আমরা কী তৈরি করব

আমরা Remix Run-এর সাথে একটি ওয়েব অ্যাপ তৈরি করব যা Upstash Redis Global Databases ব্যবহার করে এবং Cloudflare Workers-এ ডিপ্লয় করব।

Cloudflare Workers-এর সুবিধা হলো এটি গ্লোবালি ডিপ্লয় করা হয়, CDN-এর মতো। এর মানে আমাদের Remix অ্যাপের সার্ভার-সাইড রেন্ডারিং ক্লায়েন্টের যতটা সম্ভব निकট ঘটে, ফলে ন্যূনতম লেটেন্সি। Upstash-এর Global Databases-এর সাথে কম্বাইন করা হলে এটি পারফরম্যান্স-ওয়াইজ আদর্শ সেটআপ।

Remix সেটআপ

আপনার পছন্দের একটি ফোল্ডারে যান এবং রান করুন

npx create-remix@latest

আপনাকে একটি ডায়ালগ দিয়ে স্বাগত করা হবে যা আপনার Remix Run অ্যাপের সেটআপের মাধ্যমে নিয়ে যাবে।

ডিপ্লয়মেন্ট টার্গেট হিসেবে Cloudflare Workers সিলেক্ট করতে ভুলবেন না। এই ওয়াকথ্রুতে আমি JavaScript অ্যাপ নিয়ে आगे যাচ্ছি কিন্তু বিনামূল্যে TypeScript বেছে নেওয়া যাবে। সেটআপটি এরকম দেখাবে।

 R E M I X - v1.2.3 💿 Welcome to Remix! Let's get you set up with a new project. ? Where would you like to create your app? upstash-remix ? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Cloudflare Workers ? TypeScript or JavaScript? JavaScript ? Do you want me to run `npm install`? Yes

ইনস্টলেশন ফিনিশ হলে, আপনার কোড এডিটরে নতুন তৈরি ফোল্ডারটি খুলুন।

আপনার Upstash Redis Global Database তৈরি করুন

Upstash Redis Global Database-এর জন্য, https://upstash.com/-এ যান এবং লগ ইন বা অ্যাকাউন্ট তৈরি করুন। কনসোলে, "Create Database"-এ ক্লিক করুন, একটি নাম লিখুন এবং ডাটাবেস টাইপ হিসেবে "Global" সিলেক্ট করুন। অবশেষে "Create"-এ হিট করুন এবং ডাটাবেস তৈরি হওয়ার জন্য অপেক্ষা করুন। এখন UPSTASH_REDIS_REST_URL এবং UPSTASH_REDIS_REST_TOKEN কপি করুন।

আপনার প্রজেক্টে, প্রজেক্ট রুটে .env নামে একটি ফাইল তৈরি করুন এবং দুটি ভেরিয়েবলটি নিচের মতো যোগ করুন:

UPSTASH_REDIS_REST_TOKEN= UPSTASH_REDIS_REST_URL=

আমাদের ডাটাবেসের সাথে ইন্টারঅ্যাক্ট করার জন্য npm install @upstash/redis দিয়ে @upstash/redis npm প্যাকেজ ইনস্টল করুন।

Remix Run অ্যাপ্লিকেশন লিখুন

এখন যেহেতু আপনার ডাটাবেস সেট আপ হয়েছে, app/routes/index.jsx ফাইলটি খুলুন, বয়লারপ্লেট কোড রিমুভ করুন এবং নিচের কোডটি লিখুন:

import { json, redirect, useLoaderData } from "remix"; import redis from "../utils/redis.server"; export const loader = async () => { const start = new Date(); const count = await redis.get("counter"); return json({ count, loadingTime: new Date() - start }); }; export const action = async () => { await redis.incr("counter"); return redirect("/"); }; export default function Index() { const { count, loadingTime } = useLoaderData(); return ( 
 
Record speeds with Remix on Cloudflare and Upstash Redis
 
The button below was clicked {count} times already.
 
 Click me! 
 
 It took {loadingTime} ms to read the number of button clicks from{" "} Upstash Redis{" "}  Global Database  . 
 
 ); }

অতিরিক্তভাবে, নিচের কন্টেন্টসহ app/utils/redis.server.js ফাইলটি তৈরি করুন:

// app/utils/redis.server.js import { Redis } from "@upstash/redis/cloudflare"; export default Redis.fromEnv();

এটি দুটি কাজ করে। আসুন দুটোই দেখি।

১. useLoaderData-এর সাথে সার্ভার-সাইড রেন্ডারিং ডেটা

বেশ নিচে আমাদের রিটার্ন স্টেটমেন্টে একটি সিম্পল ইউজার ইন্টারফেস আছে যা প্রদর্শন করে

• একটি কাউন্টার ভেরিয়েবল যাকে count বলা হয়েছে এবং
• একটি ভেরিয়েবল যাকে loadingTime বলা হয়েছে।

আপনি একটু উপরে নজর দিলে দেখবেন যে সেই দুটি ভেরিয়েবল useLoaderData() হুক থেকে আসছে। এই Remix Run স্পেসিফিক হুকটি loader ফাংশন সাথে একসাথে ব্যবহার করা হয় টপে। সেখানে, আমরা ডাটাবেস থেকে একটি counter কী পড়ি, সেটি কত সময় নেয় তা মেজার করি এবং দুটোই আমাদের useLoaderData() ফাংশনে রিটার্ন করি। loader ফাংশনটি প্রতিবার আমাদের Remix Run অ্যাপ লোড হলে চলে, তাই প্রতিবার কেউ ওয়েবসাইট রিকোয়েস্ট করলে, এটি বর্তমান counter ভ্যালু পড়ে, সার্ভার-সাইড রেন্ডার করে ওয়েবসাইটটি এবং ক্লায়েন্টকে পাঠিয়ে দেয়।

২. "Click me!" বাটনে কেউ ক্লিক করলে কাউন্টার ভেরিয়েবল ইনক্রিমেন্ট করা

Remix Run আমাদের ফর্ম খুব সহজে বিল্ড করতে দেয়। আমাদের JSX-এ, আপনি একটি <form/> ট্যাগ পাবেন যা কেউ সাবমিট বাটনে ক্লিক করলে /?index-এ একটি POST রিকোয়েস্ট সাবমিট করে। Remix Run-এর চমৎকার ব্যাপার হলো আমাদের শুধু ফাইলে একটি action ফাংশন যোগ করতে হবে এবং আমাদের একটি ফ্রন্টএন্ড-ব্যাকএন্ড ইন্টারঅ্যাকশন রেডি হয়ে যাবে এক্সপ্লিসিটলি একটি API তৈরি না করেই। action ফাংশনে, আমরা সিম্পলি কাউন্টার ইনক্রিমেন্ট করি এবং ক্লায়েন্টকে ওয়েবসাইট রিলোড করতে বলি পরিবর্তনগুলো প্রতিফলিত করার জন্য।

🥳 আপনি প্রস্তুত

লোকালি রান করা

এখন, আপনি সম্ভবত আপনার তৈরি করা জিনিসটি দেখতে চাবেন। তা করতে, npm run dev রান করুন এবং ব্রাউজারে অ্যাপটি দেখুন।

1. "Click me!" বাটনে ক্লিক করুন এবং দেখুন কীভাবে কাউন্ট ইনক্রিমেন্ট হয়
2. মেজার করা লোডিং টাইমে নজর দিন। জার্মানিতে, আমি সাধারণত < 20ms লেটেন্সি দেখি কিন্তু Cloudflare-এ ডিপ্লয় হলে সেটি অর্ধেক হওয়ার জন্য প্রস্তুত থাকুন।

Cloudflare-এ ডিপ্লয় করা

Cloudflare-এ সাথে ফুল স্পিডে এগিয়ে যাই এবং সিঙ্গেল ডিজিট মিলিসেকেন্ড লেটেন্সি অর্জন করি!

সবচেয়ে প্রথমে, যদি আপনি ইতিমধ্যে না করে থাকেন, https://developers.cloudflare.com/workers/cli-wrangler/install-update/-এ বর্ণিত অনুযায়ী Cloudflare Workers CLI Wrangler ইনস্টল করুন। নিশ্চিত করুন CLI অথেন্টিকেট করেছেন।

যদি আপনার ইতিমধ্যে অ্যাকাউন্ট না থাকে, তবে এখানে একটি cloudflare অ্যাকাউন্ট তৈরি করুন এবং Cloudflare-এ আপনার ইমেইল ঠিকানা ভেরিফাই করার পর, আপনার ড্যাশবোর্ডে যান এবং আপনার ফ্রি কাস্টম Cloudflare Workers সাবডোমেন সেট আপ করুন।

.env- থেকে আপনার সিক্রেটগুলো Cloudflare-এও সেট করা ভুলবেন না:

wrangler secret put UPSTASH_REDIS_REST_TOKEN ... wrangler secret put UPSTASH_REDIS_REST_URL ...

এটি হয়ে গেলে, আপনি আপনার অ্যাপ ডিপ্লয় করতে পারবেন:

npm run deploy

Wrangler আপনাকে ডিপ্লয় হওয়ার পর আপনার অ্যাপের একটি লিংক দেবে। সেটি খুলুন এবং দেখুন আপনার অ্যাপ কত ফাস্ট হবে।

লিংক

একটি উদাহরণ ডিপ্লয়মেন্ট চেক আউট করুন https://remix-cloudflare-workers.soenkep.workers.dev/-এ।

পূর্ণ কোড (এনভায়রনমেন্ট ভেরিয়েবল বাদে) দেখুন: https://github.com/zunkelty/upstash-remix-run-এ।