वेबसाइट या वेब ऐप विकसित करते समय, कोई भी अपना समय केवल गति अनुकूलन पर खर्च नहीं करना चाहता है। समस्या यह है कि एक तेज़ वेबसाइट अविश्वसनीय रूप से महत्वपूर्ण है और प्रदर्शन अक्सर इसकी सफलता के लिए एक निर्णायक कारक होता है। रीमिक्स रन जैसे वेब ढांचे को वेब प्रदर्शन को अनुकूलित करने के लक्ष्य के साथ बनाया गया था, जबकि उनके कॉन्फ़िगरेशन को न्यूनतम ("शून्य-कॉन्फ़िगरेशन") रखा गया था। आजकल, दर्जनों फ्रेमवर्क उपलब्ध हैं, जो आपको उच्च गति प्राप्त करने में मदद करते हैं।
दुर्भाग्य से, सबसे अच्छा वेबसाइट लोड समय हमारे लिए बहुत कम काम का होता है जब तक कि हमारे ऐप्स के डेटाबेस भी तेज़ नहीं होते।
आज, हम देखेंगे कि कैसे उत्कृष्ट वेबसाइट लोडिंग गति प्राप्त की जाए और उन्हें सर्वोच्च डेटाबेस प्रदर्शन के साथ जोड़ा जाए Upstash Redis Global Databases का।
वैश्विक डेटाबेस क्यों?
जब वे किसी वेबसाइट को ऑनलाइन परिनियोजित करते हैं तो अधिकांश व्यक्ति सामग्री वितरण नेटवर्क (सीडीएन) का उपयोग करते हैं। एक सामग्री वितरण नेटवर्क (सीडीएन) सर्वरों का एक वैश्विक नेटवर्क है। क्योंकि वेबसाइट फ़ाइलों को कैश किया जा सकता है और क्लाइंट को निकटतम भौगोलिक स्थान से परोसा जा सकता है, एक सीडीएन एकल सर्वर सिस्टम की तुलना में काफी कम विलंबता प्रदान करता है। यह सुनिश्चित करेगा कि आपकी वेबसाइट पूरी दुनिया में तेजी से लोड हो। जब हम अपस्टैश के ग्लोबल डेटाबेस के बारे में बात करते हैं तो सीडीएन की वही अवधारणा रेडिस डेटाबेस पर लागू होती है। वैश्विक डेटाबेस के साथ, आपके डेटाबेस की प्रतिकृतियां दुनिया भर के कई क्षेत्रों में वितरित की जाती हैं। अब, ग्राहकों को निकटतम क्षेत्र में भेजा जाता है और <10ms विलंबता तक का अनुभव होता है।
आरंभ करना
अब जबकि मैंने पहले ही बहुत कुछ वादा कर लिया है, आइए एक नज़र डालते हैं कि व्यवहार में पूरी चीज़ कैसे काम करती है।
हम क्या बनाने जा रहे हैं
हम रीमिक्स रन के साथ एक वेब ऐप बनाएंगे जो अपस्टैश रेडिस ग्लोबल डेटाबेस का उपयोग करता है और इसे क्लाउडफ्लेयर वर्कर्स पर तैनात करता है।
क्लाउडफ्लेयर वर्कर्स को सीडीएन के समान विश्व स्तर पर तैनात होने का फायदा है। इसका मतलब है कि हमारे रीमिक्स ऐप का सर्वर-साइड रेंडरिंग क्लाइंट के जितना संभव हो उतना करीब होता है, जिसके परिणामस्वरूप न्यूनतम विलंबता होती है। Upstash के ग्लोबल डेटाबेस के साथ मिलकर यह प्रदर्शन के लिहाज से आदर्श सेटअप है।
सेटअप रीमिक्स
अपनी पसंद के फोल्डर में जाएं और रन करें
npx create-remix@latest
आपका स्वागत एक डायलॉग से किया जाएगा जो आपको आपके रीमिक्स रन ऐप के सेटअप के बारे में बताएगा।
क्लाउडफ्लेयर वर्कर्स . का चयन करना सुनिश्चित करें परिनियोजन लक्ष्य के रूप में। इस पूर्वाभ्यास में मैं एक जावास्क्रिप्ट . के साथ आगे बढ़ने जा रहा हूँ ऐप लेकिन टाइपस्क्रिप्ट चुनने के लिए स्वतंत्र महसूस करें। सेटअप इस तरह दिखना चाहिए।
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 chang
e 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/ पर जाएं और लॉग इन करें या अकाउंट बनाएं। कंसोल में, "डेटाबेस बनाएं" पर क्लिक करें, एक नाम दर्ज करें और डेटाबेस प्रकार के रूप में "ग्लोबल" चुनें। अंत में "बनाएं" दबाएं और डेटाबेस बनने की प्रतीक्षा करें। अब UPSTASH_REDIS_REST_URL को कॉपी करें और UPSTASH_REDIS_REST_TOKEN ।
अपने प्रोजेक्ट में .env . नाम की एक फाइल बनाएं प्रोजेक्ट रूट में और दोनों वेरिएबल को इस तरह जोड़ें:
UPSTASH_REDIS_REST_TOKEN=<INSERT YOUR UPSTASH_REDIS_REST_TOKEN HERE>
UPSTASH_REDIS_REST_URL=<INSERT YOUR UPSTASH_REDIS_REST_URL HERE>
हमारे डेटाबेस के साथ बातचीत करने के लिए आइए @upstash/redis . इंस्टॉल करें npm पैकेज के साथ npm install @upstash/redis ।
रीमिक्स रन एप्लिकेशन को लिखना
अब जब आपका डेटाबेस सेट हो गया है, तो फ़ाइल खोलें 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 (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
<h1>Record speeds with Remix on Cloudflare and Upstash Redis</h1>
<p>The button below was clicked {count} times already.</p>
<form method="post" action="/?index">
<button type="submit">Click me!</button>
</form>
<p>
It took <b>{loadingTime} ms</b> to read the number of button clicks from{" "}
<a href="https://upstash.com/redis">Upstash Redis</a>{" "}
<a href="https://docs.upstash.com/redis/features/globaldatabase">
Global Database
</a>
.
</p>
</div>
);
}
इसके अतिरिक्त, एक फ़ाइल बनाएँ 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() से आते हैं। अंकुश। इस रीमिक्स रन विशिष्ट हुक का उपयोग loader . के साथ किया जाता है शीर्ष पर कार्य करता है। वहां, हम एक कुंजी counter पढ़ते हैं डेटाबेस से, लगने वाले समय को मापें और हमारे useLoaderData() . दोनों पर वापस लौटें function.The loader जब भी हम रीमिक्स रन ऐप लोड करते हैं, तो फ़ंक्शन हर बार चलेगा, इसलिए हर बार जब कोई वेबसाइट का अनुरोध करता है, तो वह वर्तमान counter पढ़ेगा। वैल्यू, सर्वर-साइड वेबसाइट को रेंडर करता है और क्लाइंट को वापस भेजता है।
2. जब कोई "मुझे क्लिक करें!" पर क्लिक करता है तो काउंटर वैरिएबल बढ़ाना बटन।
रीमिक्स रन हमें बिल्ड फॉर्म को बहुत आसानी से अनुमति देता है। हमारे JSX में, आप एक <form/> . पा सकते हैं टैग जो एक POST सबमिट करता है /?index . के लिए अनुरोध जब कोई सबमिट बटन पर क्लिक करता है। रीमिक्स रन के साथ आश्चर्यजनक बात यह है कि हमें केवल एक action जोड़ना है फ़ाइल में काम करेगा और स्पष्ट रूप से एक एपीआई बनाए बिना एक फ्रंटएंड-बैकएंड इंटरैक्शन तैयार होगा। action में फ़ंक्शन, हम केवल काउंटर को बढ़ाते हैं और क्लाइंट को परिवर्तनों को दर्शाने के लिए वेबसाइट को फिर से लोड करने के लिए कहते हैं।
🥳 आप जाने के लिए तैयार हैं
स्थानीय रूप से चल रहा है
अब, आप शायद यह देखना चाहेंगे कि आपने अभी-अभी क्या बनाया है। ऐसा करने के लिए, npm run dev चलाएं और ऐप को अपने ब्राउज़र में देखें।
- "मुझे क्लिक करें!" पर क्लिक करें बटन पर क्लिक करें और देखें कि गिनती कैसे बढ़ती है
- मापे गए लोडिंग समय पर एक नज़र डालें। जर्मनी में, मुझे आमतौर पर <20ms की विलंबता दिखाई देती है, लेकिन Cloudflare में तैनात किए जाने के बाद इसे आधा करने के लिए तैयार रहें।
क्लाउडफ्लेयर में तैनाती
आइए Cloudflare के साथ पूरी गति से आगे बढ़ें और अब सिंगल डिजिट मिलीसेकंड लेटेंसी हासिल करें!
सबसे पहले, यदि आपने नहीं किया है, तो क्लाउडफ्लेयर वर्कर्स सीएलआई रैंगलर को दस्तावेज़ में वर्णित के रूप में स्थापित करें:https://developers.cloudflare.com/workers/cli-wrangler/install-update/। सीएलआई को भी प्रमाणित करना सुनिश्चित करें।
यदि आपके पास पहले से खाता नहीं है, तो यहां एक क्लाउडफ्लेयर खाता बनाएं और क्लाउडफ्लेयर के साथ अपना ईमेल पता सत्यापित करने के बाद, अपने डैशबोर्ड पर जाएं और अपना मुफ्त कस्टम क्लाउडफ्लेयर वर्कर्स उपडोमेन सेट करें।
.env . से अपने रहस्य सेट करना न भूलें Cloudflare के लिए भी
wrangler secret put UPSTASH_REDIS_REST_TOKEN
...
wrangler secret put UPSTASH_REDIS_REST_URL
...
एक बार यह हो जाने के बाद, आपको अपना ऐप परिनियोजित करने में सक्षम होना चाहिए:
npm run deploy
रैंगलर आपके ऐप के लागू होने के बाद आपको उसका लिंक देगा। इसे खोलें और देखें कि आपका ऐप कितना तेज़ होगा।
लिंक्स
https://remix-cloudflare-workers.soenkep.workers.dev/ पर एक उदाहरण परिनियोजन देखें।
https://github.com/zunkelty/upstash-remix-run पर पूरा कोड (पर्यावरण चर के बिना) पर एक नज़र डालें।