वेबसाइट या वेब ऐप विकसित करते समय, कोई भी अपनी वेबसाइट की गति अनुकूलन पर घंटों खर्च नहीं करना चाहता। समस्या यह है कि एक तेज़ वेबसाइट अविश्वसनीय रूप से महत्वपूर्ण है और प्रदर्शन अक्सर इसकी सफलता का निर्णायक कारक होता है। Remix Run जैसे वेब फ्रेमवर्क को उनकी कॉन्फ़िगरेशन को न्यूनतम रखते हुए ("जीरो-कॉन्फिग") वेब प्रदर्शन को अनुकूलित करने के लक्ष्य के साथ बनाया गया था। आजकल, दर्जनों फ्रेमवर्क उपलब्ध हैं जो आपको उच्च गति प्राप्त करने में मदद करते हैं।
दुर्भाग्य से, सर्वोत्तम वेबसाइट लोड समय हमारे लिए कम उपयोगी हैं जब तक कि हमारे ऐप्स के डेटाबेस भी बिजली की तरह तेज़ न हों।
आज, हम देखेंगे कि उत्कृष्ट वेबसाइट लोडिंग गति कैसे प्राप्त करें और इसे Upstash Redis ग्लोबल डेटाबेस के पीक डेटाबेस प्रदर्शन के साथ कैसे जोड़ें।
ग्लोबल डेटाबेस क्यों?
अधिकांश व्यक्ति जब वेबसाइट को ऑनलाइन डेप्लॉय करते हैं तो कंटेंट डिलीवरी नेटवर्क (CDN) का उपयोग करते हैं। एक कंटेंट डिलीवरी नेटवर्क (CDN) सर्वरों का एक वैश्विक नेटवर्क है। चूंकि वेबसाइट फ़ाइलों को कैश किया जा सकता है और क्लाइंट के निकटतम भौगोलिक स्थान से सर्व किया जा सकता है, एक CDN एकल सर्वर सिस्टम की तुलना में काफी कम लेटेंसी प्रदान करता है। यह सुनिश्चित करेगा कि आपकी वेबसाइट दुनिया भर में तेज़ी से लोड हो। जब हम Upstash के ग्लोबल डेटाबेस के बारे में बात करते हैं, तो Redis डेटाबेस पर CDN की वही अवधारणा लागू होती है। ग्लोबल डेटाबेस के साथ, आपके डेटाबेस की प्रतियां दुनिया भर के कई क्षेत्रों में वितरित की जाती हैं। अब, क्लाइंट को निकटतम क्षेत्र में रूट किया जाता है और < 10ms लेटेंसी का अनुभव करते हैं।
शुरुआत करना
अब जब मैंने बहुत कुछ वादा कर लिया है, तो आइए देखें कि वास्तव में पूरी चीज कैसे काम करती है।
हम क्या बनाने जा रहे हैं
हम Remix Run के साथ एक वेब ऐप बनाएंगे जो Upstash Redis ग्लोबल डेटाबेस का उपयोग करता है और इसे Cloudflare Workers पर डेप्लॉय करता है।
Cloudflare Workers का लाभ यह है कि वे वैश्विक स्तर पर डेप्लॉय होते हैं, CDN के समान। इसका मतलब है कि हमारे Remix ऐप का सर्वर-साइड रेंडरिंग क्लाइंट के जितना संभव हो उतना करीब होता है, जिसके परिणामस्वरूप न्यूनतम लेटेंसी होती है। Upstash के ग्लोबल डेटाबेस के साथ संयुक्त यह प्रदर्शन की दृष्टि से आदर्श सेटअप है।
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 ग्लोबल डेटाबेस बनाएं
Upstash Redis ग्लोबल डेटाबेस के लिए, 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.
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(); यह दो काम करता है। आइए दोनों को देखें।
1. useLoaderData के साथ सर्वर-साइड रेंडरिंग डेटा
बहुत नीचे हमारे रिटर्न स्टेटमेंट में हमारे पास एक सरल यूज़र इंटरफ़ेस है जो प्रदर्शित करता है
countनामक एक काउंटर वेरिएबल औरloadingTimeनामक एक वेरिएबल।
यदि हम थोड़ा और ऊपर देखते हैं, तो हम देखते हैं कि वे दो वेरिएबल useLoaderData() हुक से आते हैं। यह Remix Run विशिष्ट हुक शीर्ष पर loader फ़ंक्शन के साथ उपयोग किया जाता है। वहां, हम डेटाबेस से एक कुंजी counter पढ़ते हैं, लगने वाले समय को मापते हैं और दोनों को अपने useLoaderData() फ़ंक्शन पर लौटाते हैं। loader फ़ंक्शन तब हर बार चलेगा जब हम Remix Run ऐप लोड करेंगे, इसलिए हर बार जब कोई वेबसाइट का अनुरोध करता है, तो यह वर्तमान counter मान पढ़ेगा, वेबसाइट को सर्वर-साइड रेंडर करेगा और इसे क्लाइंट को वापस भेज देगा।
2. जब कोई "Click me!" बटन पर क्लिक करता है तो काउंटर वेरिएबल बढ़ाना।
Remix Run हमें फॉर्म बहुत आसानी से बनाने की अनुमति देता है। हमारे JSX में, आप एक <form/> टैग पा सकते हैं जो कोई सबमिट बटन पर क्लिक करता है तो /?index पर POST रिक्वेस्ट सबमिट करता है। Remix Run के साथ अद्भुत बात यह है कि हमें केवल फ़ाइल में एक action फ़ंक्शन जोड़ना होगा और एक्सप्लिसिटली API बनाए बिना फ्रंटएंड-बैकएंड इंटरैक्शन तैयार हो जाएगा। action फ़ंक्शन में, हम बस काउंटर बढ़ाते हैं और क्लाइंट को वेबसाइट को रीलोड करने के लिए कहते हैं ताकि परिवर्तन प्रतिबिंबित हों।
🥳 आप जाने के लिए तैयार हैं
स्थानीय रूप से चलाना
अब, आप शायद देखना चाहेंगे कि आपने अभी क्या बनाया है। ऐसा करने के लिए, npm run dev चलाएं और ब्राउज़र में ऐप देखें।
- "Click me!" बटन पर क्लिक करें और देखें कि काउंट कैसे बढ़ता है
- मापी गई लोडिंग समय पर एक नज़र डालें। जर्मनी में, मुझे आमतौर पर < 20ms की लेटेंसी दिखाई देती है लेकिन Cloudflare पर डेप्लॉय होने के बाद इसे आधा करने के लिए तैयार रहें।
Cloudflare पर डेप्लॉय करना
आइए Cloudflare के साथ पूर्ण गति प्राप्त करें और अब सिंगल-डिजिट मिलीसेकंड लेटेंसी प्राप्त करें!
सबसे पहले, यदि आपने नहीं किया है, तो Cloudflare Workers CLI Wrangler को दस्तावेज़ में वर्णित अनुसार इंस्टॉल करें: https://developers.cloudflare.com/workers/cli-wrangler/install-update/. 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।
