Upstash Redis और Next.js का उपयोग करके उच्च-प्रदर्शन सर्वे ऐप बनाएं

परिचय

आजकल, Redis डेटाबेस के बिना IT दुनिया की कल्पना करना कठिन है। 2021 में प्रकाशित Stackoverflow के डेवलपर सर्वे में, इन-मेमोरी डेटाबेस को 70000 से अधिक डेवलपर्स द्वारा सबसे पसंदीदा डेटाबेस के रूप में चुना गया था। एक इन-मेमोरी डेटाबेस के रूप में, Redis मजबूत प्रदर्शन प्रदान करता है, जो इसे उन परिदृश्यों में आदर्श बनाता है जिनमें कम प्रतिक्रिया समय और न्यूनतम विलंबता की आवश्यकता होती है। हालांकि, Redis के उपयोग के मामलों को अक्सर गलत तरीके से कैशिंग और मैसेज-ब्रोकिंग तक सीमित समझा जाता है। आज हम देखेंगे कि यह गलत क्यों है और Redis का उपयोग प्राथमिक डेटाबेस की भूमिका में करेंगे।

विचार

हम एक छोटा ऐप बनाना चाहते हैं जो उपयोगकर्ताओं को ऑनलाइन सर्वे के रूप में प्रतिक्रिया छोड़ने की अनुमति देता है। इस विशिष्ट मामले में, आइए कल्पना करें कि हम एक कंपनी के लिए प्रतिक्रिया एकत्र करना चाहते हैं। इसे सरल रखने के लिए, हम ऐप की कार्यक्षमता पर ध्यान केंद्रित करेंगे जो निम्न होनी चाहिए:

एक उपयोगकर्ता तीन सवालों का जवाब दे सकता है।
- आप हमारे उत्पादों/सेवाओं के बारे में कैसा महसूस करते हैं? 1 - 10 अंक
- क्या आप हमें अपने सहयोगियों को सुझाएंगे? हां/नहीं (सही/गलत)
- कृपया अपने विचार साझा करें... मुक्त टेक्स्ट
एक उपयोगकर्ता फॉर्म सबमिट कर सकता है।
प्रत्येक व्यक्तिगत सर्वे परिणाम को डेटाबेस में एक रिकॉर्ड के रूप में संग्रहीत किया जाता है (हैश)।
एक उपयोगकर्ता सर्वे परिणाम देख सकता है।

यहां आप डेमो ऐप देख सकते हैं।

टेक स्टैक

हमारा छोटा सर्वे ऐप सर्वरलेस आर्किटेक्चर की पूरी क्षमता का लाभ उठाने का एक आदर्श उदाहरण है। सर्वरलेस न्यूनतम लागत रखते हुए अधिकतम स्केलेबिलिटी सुनिश्चित करता है और निम्नलिखित तकनीकों के साथ प्राप्त किया जा सकता है:

Next.js

Next.js एक ओपन-सोर्स डेवलपमेंट फ्रेमवर्क है जो पारंपरिक React वेब एप्लिकेशन को सर्वर-साइड रेंडरिंग, स्टेटिक पेज जनरेशन और सबसे महत्वपूर्ण API रूट्स जैसी सुविधाओं के साथ बढ़ाता है। हम अपने ऐप का फ्रंटएंड और API दोनों बनाने के लिए Next.js का उपयोग करने जा रहे हैं।

Upstash Redis

Upstash फुल-सर्वरलेस, लगातार Redis डेटाबेस प्रदान करता है जो उपयोग करने में आश्चर्यजनक रूप से आसान हैं और बहुत कम प्रति-अनुरोध मूल्य निर्धारण प्रदान करते हैं। पारंपरिक Redis के शीर्ष पर निर्मित, Upstash Redis के अजेय प्रदर्शन को डिस्क स्टोरेज की स्थायित्व के साथ जोड़ता है जो इसे हमारे उपयोग के मामले के लिए एकदम उपयुक्त बनाता है।

प्रोजेक्ट सेटअप

Next.js ऐप बनाएं: npx create-next-app survey-app।
Upstash कंसोल में एक Upstash Redis डेटाबेस बनाएं और UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN दोनों को कॉपी करें।

प्रोजेक्ट दो API एंडपॉइंट के साथ एक सिंगल-पेज एप्लिकेशन होगा:

pages/api/submit.js एक सर्वे एंट्री स्टोर करता है
pages/api/results.js सभी सर्वे एंट्री प्राप्त करता है

Upstash के साथ अधिक आसानी से संवाद करने के लिए, आइए npm install @upstash/redis के माध्यम से @upstash/redis npm पैकेज इंस्टॉल करें।

कोड

नीचे के रूप में एक नई फाइल pages/api/submit.js बनाएं:

// pages/api/submit.js
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "INSERT_YOUR_URL_HERE",
  token: "INSERT_YOUR_TOKEN_HERE",
});

const submitHandler = async (req, res) => {
  const body = req.body;

  // DB में डालने के लिए डेटा तैयार करें
  const data = {
    rating: String(body.rating) || "0",
    recommendation: String(body.recommendation) || "false",
    comment: String(body.comment) || "",
  };

  // सर्वे एंट्री के तहत स्टोर करने के लिए एक रैंडम आईडी जनरेट करें
  const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

  // डेटा को Upstash Redis में डालें
  try {
    // सर्वे डेटा स्टोर करें
    await redis.hset(`entries:${id}`, data);
    // बाद में इसे प्राप्त करने के लिए सर्वे की आईडी स्टोर करें
    await redis.sadd("entries", `entries:${id}`);
  } catch (error) {
    console.error("Redis में डेटा डालने में विफल", error);
    return res.status(500).json({
      success: false,
      message: "Redis में डेटा डालने में विफल",
    });
  }

  return res.status(200).json({
    success: true,
    message: "डेटा सफलतापूर्वक डाला गया",
  });
};

export default submitHandler;

हम यहां तीन चीजें करते हैं:

अनुरोध बॉडी से सर्वे डेटा लें और इसे Redis के लिए तैयार करें
सर्वे एंट्री को Redis में हैश के रूप में डालें
सर्वे एंट्री की आईडी को एक सेट में जोड़ें

आप सोच रहे होंगे कि हम सर्वे एंट्री के लिए एक हैश क्यों बना रहे हैं और फिर उसकी आईडी को एक सेट में डाल रहे हैं। यह चरण महत्वपूर्ण होगा जैसे ही हम Redis से इवेंट को फिर से प्राप्त करना चाहेंगे। Redis एक की-वैल्यू स्टोर के रूप में काम करता है जिसका मतलब है कि SQL डेटाबेस के विपरीत, Redis डेटा ढूंढने के लिए नहीं बना है जब तक कि हम एक सटीक कुंजी निर्दिष्ट न करें जिसके तहत यह संग्रहीत है। एक क्वेरी जैसे SELECT * FROM SurveyResults; SQL में समर्थित होगी लेकिन Redis के साथ हमें एक और ट्रिक का उपयोग करना होगा। इसके लिए हम एक सेट बनाते हैं और इसमें सर्वे परिणाम प्रविष्टियों की सभी Redis कुंजियों को जोड़ते हैं। एक बार जब हम सभी सर्वे प्रविष्टियों को प्राप्त करना चाहते हैं, तो हम बस सेट में उनकी कुंजियों को देख सकते हैं। लेकिन आइए कोडिंग पर वापस जाएं और देखें कि यह व्यवहार में कैसा दिखता है।

नीचे के रूप में एक नई फाइल pages/api/results.js बनाएं:

// pages/api/results.js
import { Redis } from "@upstash/redis";

const resultsHandler = async (req, res) => {
  // Redis से डेटा प्राप्त करें
  const redis = new Redis({
    url: "INSERT_YOUR_URL_HERE",
    token: "INSERT_YOUR_TOKEN_HERE",
  });

  try {
    // सेट में सभी प्रविष्टियों को खोजें
    const entries = await redis.smembers("entries");
    // आईडी/कुंजी द्वारा सभी सर्वे प्रविष्टियां प्राप्त करें
    // एक साथ कई क्वेरी चलाने के लिए, Upstash पाइपलाइन कमांड के उपयोग का समर्थन करता है। इस तरह हम एक साथ कई क्वेरी चला सकते हैं और एक ही कॉल में परिणाम प्राप्त कर सकते हैं।
    const p = redis.pipeline();
    entries.forEach((id) => {
      p.hgetall(id);
    });
    const results = await p.exec();

    return res.status(200).json({
      success: true,
      message: "डेटा सफलतापूर्वक प्राप्त किया गया",
      data: results,
    });
  } catch (error) {
    console.error("Redis से डेटा प्राप्त करने में विफल", error);
    return res.status(500).json({
      success: false,
      message: "Redis से डेटा प्राप्त करने में विफल",
    });
  }
};

export default resultsHandler;

हमारा बैकएंड अब काम कर रहा है और हम फ्रंटएंड के साथ अपना ऐप समाप्त कर सकते हैं।

नीचे के रूप में एक नई फाइल pages/index.js बनाएं:

// pages/index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = {
      rating: form.rating.value,
      recommendation: form.recommendation.value,
      comment: form.comment.value,
    };
    // डेटा को बैकएंड भेजें
    await fetch("/api/submit", {
      body: JSON.stringify(data),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    alert("आपकी प्रतिक्रिया के लिए धन्यवाद!");
  };

  const RatingOption = ({ value }) => (
    <div>
      <input type="radio" name="rating" value={value} required />{" "}
      <label>{value}</label>
    </div>
  );

  return (
    <div className={styles.container} onSubmit={handleSubmit}>
      <form>
        <div>
          <label>आप हमारे उत्पादों/सेवाओं के बारे में कैसा महसूस करते हैं?</label>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
            <RatingOption key={value} value={value} />
          ))}
        </div>
        <div>
          <label>क्या आप हमें अपने सहयोगियों को सुझाएंगे?</label>
          <div>
            <input type="radio" name="recommendation" value="true" required />{" "}
            <label>हां</label>
          </div>
          <div>
            <input type="radio" name="recommendation" value="false" required />{" "}
            <label>नहीं</label>
          </div>
        </div>
        <div>
          <label>कृपया अपने विचार साझा करें... (वैकल्पिक)</label>
          <textarea name="comment" placeholder="यह वह है जो मुझे सबसे ज्यादा पसंद आया/यह वह है जिसे आप सुधार सकते हैं..."></textarea>
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

अब स्टाइल काम करने के लिए, styles/Home.styles.css की सामग्री को निम्न के साथ बदलें:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.container form > div {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.container form > div > label {
  margin-bottom: 10px;
}

अब हम सर्वे प्रविष्टियां प्राप्त करने के लिए तैयार हैं! लेकिन रुकिए, अभी और भी है। हमें अभी भी फ्रंटएंड में सर्वे परिणाम लागू करने की आवश्यकता है।

नीचे के रूप में एक नई फाइल pages/results.js बनाएं:

import { useEffect, useState } from "react";
import styles from "../styles/Results.module.css";

export default function Results() {
  const [surveyData, setSurveyData] = useState([]);

  useEffect(() => {
    fetch("/api/results")
      .then((res) => res.json())
      .then((response) => setSurveyData(response.data));
  }, []);

  return (
    <div className={styles.container}>
      {" "}
      {surveyData.map((data) => (
        <div key={data.id}>
          <p> <strong> रेटिंग: </strong> {data.rating}{" "} </p>{" "}
          <p> <strong> सिफारिश: </strong> {data.recommendation}{" "} </p>{" "}
          <p> <strong> टिप्पणी: </strong> {data.comment}{" "} </p>{" "}
        </div>
      ))}
      {" "}
    </div>
  );
}

और अंत में styles/Results.module.css फाइल बनाएं जिसकी सामग्री निम्न हो:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 100vh;
  margin: 50px 0;
}
.container > div {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.container p { margin: 0; }

अब आप localhost:3000/results पर सभी सर्वे प्रविष्टियों का अवलोकन पा सकते हैं।

एप्लिकेशन का पूरा सोर्स कोड GitHub रिपॉजिटरी upstash-survey-app पर उपलब्ध है।

निष्कर्ष

इस पोस्ट में हमने एक Next.js फुलस्टैक वेब एप्लिकेशन विकसित किया जो फॉर्म प्रविष्टियों को संभालता है और भरे हुए फॉर्म को Upstash सर्वरलेस Redis में संग्रहीत करता है। हमने देखा कि Redis का उपयोग प्राथमिक डेटाबेस के रूप में कैसे किया जा सकता है और अन्य डेटाबेस (जैसे SQL) से Redis पर स्विच करते समय आपको कौन से डिज़ाइन परिवर्तन करने होंगे।

अपने आसानी से सेटअप होने वाले सर्वरलेस Redis डेटाबेस के साथ Upstash ने फॉर्म डेटा को क्लाउड में संग्रहीत करना अविश्वसनीय रूप से आसान बना दिया है।

मुझे उम्मीद है कि यह पोस्ट आपको Redis को समझने, Upstash Redis के लिए एक अनुभव प्राप्त करने और अपने एप्लिकेशन को डेटा संग्रहीत करने की नई संभावनाओं के साथ बनाना शुरू करने में मदद करता है।