बैकएंड के बिना React डेटा पर्सिस्टेंस: काम करने वाले पैटर्न

अगर आपने React data persistence without a backend खोजा है, तो आपको काम करते हुए कोड से सार्वजनिक URL तक का सबसे छोटा, भरोसेमंद रास्ता चाहिए — बिना सर्वर सेट अप किए, विशाल क्लाउड डैशबोर्ड सीखे, या एक भी यूज़र होने से पहले क्रेडिट कार्ड डाले। यह गाइड बताती है कि jsdeck से यह कैसे करें, ट्रेड-ऑफ़ क्या हैं, और कब कोई दूसरा टूल वाकई बेहतर विकल्प है। हम इसे व्यावहारिक रखेंगे: असली कदम, असली कमांड, और ईमानदार चेतावनियाँ।

jsdeck का datastore वास्तव में क्या है

यह प्रति-ऐप JSON key-value store है। हर रिकॉर्ड में स्ट्रिंग key, मनमाना JSON value, फ़िल्टरिंग के लिए तीन वैकल्पिक स्ट्रिंग इंडेक्स कॉलम (idx1–idx3), और updatedAt टाइमस्टैम्प होता है। आप इसे छोटे REST API से सीधे स्टैटिक फ्रंटएंड से, या @jsdeck/toolkit npm क्लाइंट से पढ़ते और लिखते हैं। आपको चलाने, पैच करने या स्केल करने के लिए कोई सर्वर नहीं।

बैकएंड के बिना React डेटा पर्सिस्टेंस के लिए यह क्यों मायने रखता है

ज़्यादातर प्रोटोटाइप को Postgres नहीं चाहिए। उन्हें सेटिंग्स ऑब्जेक्ट सेव करना, हाई स्कोर रखना, सबमिशन की सूची स्टोर करना, या याद रखना चाहिए कि यूज़र पिछली बार क्या किया। JSON स्टोर यही सही जगह है: डेटा ठीक ऐप स्थिति जैसा रहता है, पूर्ण डेटाबेस की schema, migration या connection-pool औपचारिकता के बिना।

मोड और एक्सेस नियंत्रण

datastore दो मोड में से एक में चलता है। public_read में कोई भी रिकॉर्ड पढ़ सकता है लेकिन लिखने के लिए आपकी store_ key चाहिए। private में पढ़ने और लिखने दोनों के लिए key चाहिए। PUT अनुरोध प्रति IP rate-limited हैं। key गैर-संवेदनशील ऐप डेटा के लिए उपयुक्त साझा रहस्य है — वास्तविक secrets कभी client-side कोड में न डालें।

उदाहरण: JSON सेव और लोड करें

// Save
await fetch('https://jsdeck.com/api/v1/public/data/YOUR-SLUG/records/settings', {
  method: 'PUT',
  headers: {
    'Authorization': 'Bearer store_YOUR_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ value: { theme: 'dark', lang: 'en' } }),
});

// Load
const res = await fetch('https://jsdeck.com/api/v1/public/data/YOUR-SLUG/records/settings');
const { value } = await res.json();

owner rows के साथ प्रति-यूज़र डेटा

हर visitor का अपना निजी डेटा चाहिए? datastore को visitor auth से जोड़ें। visitor लॉग इन करने के बाद session token मिलता है; visibility: "owner" वाला रिकॉर्ड लिखें और वह पंक्ति केवल उस यूज़र द्वारा पढ़ी और लिखी जा सकती है। केवल store_ key से पढ़ा नहीं जा सकता। इसी से gated डेमो और सरल प्रति-यूज़र ऐप बिना पूर्ण बैकएंड के संभव हैं।

जब यह फ़िट नहीं बैठता

डेटा मॉडल के प्रति ईमानदार रहें। datastore joins, schema migrations या transactions वाले relational डेटा के लिए सही टूल नहीं है; realtime subscriptions, server-side functions या triggers, full-text search, और file/blob storage नहीं देता। इसकी query मॉडल "key प्लस अधिकतम तीन स्ट्रिंग इंडेक्स (AND-संयुक्त)" है, मनमाना SQL नहीं। अगर ये चाहिए, तो Postgres/Supabase या पूर्ण बैकएंड लें।

यह किसके लिए है, और jsdeck कब नहीं

अच्छा विकल्प: स्टैटिक फ्रंटएंड, सिंगल-पेज ऐप्स, डेमो, पोर्टफ़ोलियो, MVP, AI-जनित एक्सपोर्ट, और थोड़ी JSON पर्सिस्टेंस या हल्का visitor login चाहने वाले ऐप।

उपयुक्त नहीं: लंबे समय तक चलने वाला Node सर्वर, रिक्वेस्ट समय पर server-side rendering, WebSocket बैकएंड, निजी server-side secrets, बैकग्राउंड जॉब, या पूर्ण relational डेटाबेस चाहने वाले ऐप। उनके लिए हमारे तुलना हब में चर्चित विकल्प बेहतर होंगे — और जानबूझकर चुनना यही सही है, समझौता नहीं।

अक्सर पूछे जाने वाले प्रश्न

क्या बैकएंड के बिना React डेटा पर्सिस्टेंस वाकई मुफ़्त है?

हाँ। jsdeck इस तरह के प्रोजेक्ट्स के लिए HTTPS सहित मुफ़्त स्टैटिक होस्टिंग देता है, शुरू करने के लिए क्रेडिट कार्ड की ज़रूरत नहीं। datastore और visitor auth जैसी वैकल्पिक सुविधाएँ ज़रूरत पड़ने पर उपलब्ध हैं।

क्या datastore के लिए सर्वर चाहिए?

नहीं। datastore होस्टेड REST API है जिसे आप सीधे स्टैटिक फ्रंटएंड से कॉल करते हैं। चलाने, स्केल करने या पैच करने के लिए कुछ नहीं।

हर यूज़र का डेटा निजी कैसे रखूँ?

visitor auth इस्तेमाल करें और visibility: "owner" वाले रिकॉर्ड लिखें। वे पंक्तियाँ केवल owner के token से एक्सेस होती हैं, साझा datastore key से नहीं।

अगले कदम

• datastore हब में और गाइड देखें
• पहला ऐप डिप्लॉय करने के लिए शुरुआत गाइड अनुसरण करें
• datastore, सुरक्षित अकाउंट (auth API), और CLI डिप्लॉय विवरण के लिए डेवलपर दस्तावेज़ पढ़ें