Frontend बनाम Backend: अंतर क्या है?
Frontend ऐप का वह हिस्सा है जो यूज़र के ब्राउज़र में चलता है — पेज, बटन, फ़ॉर्म और एनिमेशन जिन्हें वे देखते और क्लिक करते हैं। Backend वह हिस्सा है जो एक सर्वर पर चलता है जिसे यूज़र कभी नहीं देखता: वह डेटा सेव और वापस लाता है, बिज़नेस नियम लागू करता है, जाँचता है कि कौन क्या कर सकता है, और पेमेंट व ईमेल जैसी दूसरी सेवाओं से बात करता है। दोनों एक API के ज़रिए संवाद करते हैं, और डेटाबेस के साथ मिलकर ये “full-stack” ऐप बनाते हैं।
AI से ऐप बनाते समय यह क्यों मायने रखता है
जब आप किसी AI बिल्डर को ऐप समझाते हैं, तो आप चाहे जानें या न जानें, दोनों हिस्सों का वर्णन कर रहे होते हैं। “ग्राहक एक स्लॉट बुक कर सकते हैं” का मतलब है एक बुकिंग फ़ॉर्म (frontend), यह नियम कि कौन-से स्लॉट खाली हैं (backend), और बुकिंग सेव करने की जगह (डेटाबेस)।
इस बँटवारे को समझने से तीन व्यावहारिक फ़ायदे होते हैं:
- सुरक्षा। Frontend में जो भी है, उसे यूज़र देख और बदल सकता है। नियम और सीक्रेट backend में रहने चाहिए।
- डिबगिंग। “बटन काम नहीं कर रहा” और “बटन काम कर रहा है, पर कुछ सेव नहीं हो रहा” अलग-अलग हिस्सों की ओर इशारा करते हैं, और बताना कि आप क्या देख रहे हैं, AI को कारण जल्दी ढूँढने में मदद करता है।
- होस्टिंग और लागत। सिर्फ़ frontend वाली साइट सस्ती और आसानी से होस्ट होती है। Backend को कहीं चलना पड़ता है, और इससे तय होता है कि आप कितना भुगतान करते हैं और ऐप निष्क्रिय होने पर कैसा व्यवहार करता है।
रोज़मर्रा की एक मिसाल
एक रेस्टोरेंट को सोचिए।
Frontend डाइनिंग हॉल है: मेन्यू, मेज़ें, सजावट, और वेटर जो आपका ऑर्डर लेता है। यह ग्राहकों के लिए बनाया गया है और वे इसका सब कुछ देख और छू सकते हैं।
Backend किचन और ऑफ़िस है: शेफ़ जो खाना बनाते हैं, स्टॉक रूम, कैश काउंटर, और मैनेजर के नियम कि किसे डिस्काउंट मिलेगा। ग्राहक वहाँ नहीं जाते, और उन्हें जाना भी नहीं चाहिए।
API उन दोनों के बीच का पास है — वह काउंटर जहाँ ऑर्डर अंदर जाता है और प्लेट बाहर आती है, एक तय फ़ॉर्मैट में। डेटाबेस स्टॉक रूम और ऑर्डर बुक है।
ग्राहक अपनी ऑर्डर पर्ची बदल सकता है (frontend उसके नियंत्रण में है), पर किचन अब भी तय करता है कि क्या पकाना है और कितना चार्ज करना है। इसीलिए ज़रूरी जाँचें backend में होनी चाहिए।
हर हिस्सा क्या करता है
| Frontend | Backend | |
|---|---|---|
| कहाँ चलता है | यूज़र के डिवाइस पर, ब्राउज़र में | एक सर्वर पर जिसे आप (या आपका होस्ट) नियंत्रित करते हैं |
| मुख्य काम | चीज़ें दिखाना, इनपुट लेना, क्लिक पर प्रतिक्रिया देना | डेटा स्टोर करना, नियम लागू करना, अनुमतियाँ तय करना, दूसरी सेवाएँ कॉल करना |
| यूज़र कोड देख और बदल सकते हैं? | हाँ — यह उनके ब्राउज़र में डाउनलोड होता है | नहीं |
| सीक्रेट API keys रख सकता है? | नहीं | हाँ, environment variables में |
| आम तकनीकें | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| क्या गड़बड़ होता है | मोबाइल पर लेआउट टूटना, बटन काम न करना, धीमा पेज | डेटा सेव न होना, गलत डेटा दिखना, errors, सुरक्षा छेद |
कुछ frameworks इस रेखा को धुंधला कर देते हैं। उदाहरण के लिए Next.js एक ही प्रोजेक्ट में browser वाला और server वाला, दोनों तरह का कोड रखने देता है। विचार वही रहता है: सवाल हमेशा यह है कि यह हिस्सा कहाँ चलता है?
एक उदाहरण: क्लास बुक करना
जब कोई योगा क्लास बुक करता है, तो कदम-दर-कदम यह होता है।
| चरण | कहाँ | क्या होता है |
|---|---|---|
| 1 | Frontend | शेड्यूल पेज लोड होता है और backend से इस हफ़्ते की क्लासें माँगता है। |
| 2 | Backend | डेटाबेस से क्लासें और बुकिंग पढ़ता है, खाली सीटें गिनता है, और सूची JSON में लौटाता है। |
| 3 | Frontend | हर क्लास को समय, टीचर और खाली सीटों के साथ दिखाता है। |
| 4 | Frontend | यूज़र एक क्लास चुनता है और नाम व ईमेल भरता है। फ़ॉर्म जाँचता है कि ईमेल सही लगता है (सुविधा के लिए, गारंटी के लिए नहीं)। |
| 5 | Frontend → Backend | API के ज़रिए POST /api/bookings अनुरोध भेजता है। |
| 6 | Backend | इनपुट दोबारा जाँचता है, देखता है कि क्लास भरी तो नहीं, बुकिंग सेव करता है, और एक सीक्रेट key से ईमेल सेवा को पुष्टि-ईमेल भेजने को कहता है। |
| 7 | Backend → Frontend | “बुक हो गया” या “माफ़ कीजिए, भर गई है” लौटाता है। |
| 8 | Frontend | पुष्टि की स्क्रीन दिखाता है। |
चरण 4 और 6 पर ध्यान दीजिए: इनपुट दो बार जाँचा जाता है। Frontend की जाँच तुरंत प्रतिक्रिया देती है; असली मायने backend की जाँच के होते हैं, क्योंकि कोई ज़िद्दी यूज़र frontend को पूरी तरह बायपास कर सकता है।
आम शब्द, समझाए गए
| शब्द | मतलब |
|---|---|
| Client / server | Client वह ब्राउज़र (या ऐप) है जो अनुरोध भेजता है; server उनका जवाब देता है। |
| UI | User interface — स्क्रीन और नियंत्रण। |
| API | वह तय तरीका जिससे frontend backend से डेटा या कोई काम माँगता है। |
| Endpoint | API पर एक खास URL, जैसे /api/bookings। |
| Full stack | Frontend + backend + डेटाबेस मिलकर। देखें full-stack ऐप क्या है। |
| Static site | Frontend जिसका अपना कोई backend नहीं है; सबके लिए एक ही फ़ाइलें। |
| SPA | Single-page application: एक frontend जो नए पेज लोड करने के बजाय ब्राउज़र में ही पेज अपडेट करता है। |
| Server-side rendering (SSR) | सर्वर भेजने से पहले पेज का HTML बनाता है, जो गति और SEO में मदद कर सकता है। |
| Environment variables | Backend को रनटाइम पर दी गई सेटिंग्स और सीक्रेट, जो कोड से बाहर रखे जाते हैं। |
क्या आपके ऐप को backend चाहिए?
| अगर आपका ऐप… | Backend चाहिए? |
|---|---|
| सबके लिए एक जैसी जानकारी दिखाता है | नहीं |
| सिर्फ़ आपको ईमेल भेजने वाला contact फ़ॉर्म रखता है | आमतौर पर एक छोटा backend, या फ़ॉर्म सेवा |
| ऐसा डेटा सेव करता है जो दूसरे लोग देखेंगे | हाँ |
| लॉगिन और निजी डेटा रखता है | हाँ |
| पेमेंट लेता है | हाँ — कम से कम checkout बनाने और पेमेंट webhooks प्राप्त करने के लिए |
| सीक्रेट key वाली पेड AI या दूसरी API इस्तेमाल करता है | हाँ, key को browser से दूर रखने के लिए |
आम गलतियाँ और गलतफ़हमियाँ
- Secret keys को frontend में रखना। ब्राउज़र के developer tools खोलने वाला कोई भी इसे देख सकता है। AI से बने ऐप्स में यह सबसे आम गंभीर गलती है।
- नियम सिर्फ़ frontend में लागू करना। गैर-एडमिन यूज़र के लिए “delete” बटन छिपा देना सुरक्षा नहीं है; backend को अनुरोध ठुकराना होगा।
- यह मान लेना कि backend “सिर्फ़ डेटाबेस” है। डेटाबेस डेटा स्टोर करता है। Backend तय करता है कि कौन उसे पढ़ और बदल सकता है, और कैसे।
- यह सोचना कि JavaScript मतलब frontend। JavaScript और TypeScript Node.js के साथ सर्वर पर भी चलते हैं।
- गलत हिस्से पर दोष डालना। अगर पेज सही दिख रहा है पर डेटा गलत है, तो समस्या आमतौर पर backend या डेटाबेस में होती है, डिज़ाइन में नहीं।
- ज़रूरत से ज़्यादा बनाना। पोर्टफ़ोलियो को कस्टम backend की ज़रूरत नहीं होती। उसे जोड़ने से लागत और चलने वाले हिस्से बढ़ते हैं।
अपने AI बिल्डर से क्या माँगें
- “इस ऐप का कौन-सा हिस्सा browser में चलता है और कौन-सा server पर?”
- “सभी API keys backend में ले जाओ और उन्हें environment variables से पढ़ो।”
- “हर फ़ॉर्म को browser के साथ-साथ server पर भी जाँचो।”
- “Backend पर लागू करो कि सिर्फ़ एडमिन बुकिंग delete कर सकें।”
- “पेज सही दिख रहा है पर डेटा सेव नहीं हो रहा — backend logs में यह अनुरोध देखो।”
- “यह एक सिंपल मार्केटिंग साइट है; जब तक ज़रूरत न हो, इसे सिर्फ़ frontend रखो।”
Mythex में frontend और backend
नया Mythex प्रोजेक्ट Vite, React, TypeScript और Tailwind frontend से शुरू होता है, और जब आपके ऐप को backend चाहिए तो एजेंट उसे जोड़ देता है। आप चाहें तो उसी प्रोजेक्ट में, frontend के साथ, Node, Python (FastAPI), C# या Java में अलग API सर्वर भी माँग सकते हैं। प्रीव्यू में आप वेबसाइट और API सर्वर के बीच बदल सकते हैं, और पब्लिश करने पर दोनों डिप्लॉय होते हैं, ज़रूरत पड़ने पर डेटाबेस और फ़ाइल स्टोरेज के साथ। मल्टी-सर्विस ऐप के बारे में docs में पढ़ें, वेब होस्टिंग गाइड बताती है कि लाइव होने पर दोनों हिस्से कहाँ चलते हैं, और ऐप टेम्पलेट full-stack उदाहरण देखने का तेज़ तरीका हैं.
सवाल
Frontend और backend में क्या अंतर है?
Frontend ऐप का वह हिस्सा है जो यूज़र के ब्राउज़र में चलता है — वे पेज, बटन और फ़ॉर्म जो वे देखते हैं। Backend एक सर्वर पर चलता है जिसे यूज़र नहीं देखता; वह डेटा स्टोर करता है, बिज़नेस नियम लागू करता है, अनुमतियाँ जाँचता है और दूसरी सेवाओं से बात करता है।
क्या हर ऐप को backend की ज़रूरत होती है?
नहीं। मार्केटिंग साइट, पोर्टफ़ोलियो या सिंपल लैंडिंग पेज केवल frontend हो सकते हैं। जैसे ही ऐप को साझा डेटा सेव करना हो, लॉगिन करवाना हो, पेमेंट लेना हो या सीक्रेट API keys इस्तेमाल करनी हों, उसे किसी न किसी तरह का backend चाहिए।
क्या HTML frontend है या backend?
ब्राउज़र में चलने वाले HTML, CSS और JavaScript frontend हैं। JavaScript Node.js के ज़रिए सर्वर पर भी चल सकता है, और तब वह backend कोड होता है। भाषा यह तय नहीं करती; तय यह होता है कि कोड कहाँ चलता है।
Full stack का क्या मतलब है?
Full stack का मतलब है frontend और backend दोनों (और आमतौर पर डेटाबेस) को कवर करना। Full-stack ऐप वह है जिसमें तीनों हिस्से हों; और full-stack developer इन सभी पर काम करता है।