Angular Academy · पाठ

क्लाइंट को अवस्था स्थानांतरित करना

अवस्था स्थानांतरण से दोहराए गए अनुरोधों से बचें

पाठ 4, कुल 4 में से13 चरण

क्लाइंट को अवस्था स्थानांतरित करना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

दो बार डेटा प्राप्त करने की समस्या

SSR के दौरान सर्वर HTML रेंडर करने के लिए डेटा प्राप्त करता है। सहायता के बिना हाइड्रेशन के बाद क्लाइंट वही डेटा फिर से प्राप्त करता है, जिससे एक अनुरोध व्यर्थ होता है और सामग्री झिलमिलाने का जोखिम रहता है।

बचाव के लिए TransferState

Angular का TransferState सर्वर पर डेटा को HTML में क्रमबद्ध करता है, फिर क्लाइंट उसे दोबारा प्राप्त करने के बजाय पढ़ता है। प्रतिक्रिया में यह डेटा स्क्रिप्ट टैग के भीतर जाता है।

यह कैसे स्थानांतरित होता है

सर्वर पर संग्रहीत स्थिति पृष्ठ के भीतर JSON के रूप में जोड़ी जाती है। शुरू होने पर क्लाइंट इसे पुनः क्रमबद्ध करता है, इसलिए पहला रेंडर वही डेटा उपयोग करता है जो सर्वर ने उपयोग किया था।

<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>

makeStateKey का उपयोग

makeStateKey के साथ एक प्रकार-सुरक्षित कुंजी बनाइए, फिर TransferState सेवा के माध्यम से उसे पढ़िए या लिखिए।

import { makeStateKey, TransferState } from '@angular/core';

const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);

पहले पढ़ें, फिर प्राप्त करें पैटर्न

सर्वर और क्लाइंट, दोनों पर: यदि कुंजी TransferState में मौजूद हो, तो उसका उपयोग कीजिए; अन्यथा डेटा प्राप्त कीजिए। सर्वर डेटा प्राप्त करके संग्रहीत करता है; क्लाइंट संग्रहीत मान पाकर कॉल छोड़ देता है।

const state = inject(TransferState);
if (state.hasKey(USERS)) {
  this.users = state.get(USERS, []);
} else {
  this.http.get<User[]>('/api/users')
    .subscribe(u => { this.users = u; state.set(USERS, u); });
}

HttpClient यह अपने-आप करता है

provideClientHydration(withHttpTransferCacheOptions()) को कॉल करने पर (हाइड्रेशन के साथ यह डिफ़ॉल्ट रूप से सक्रिय होता है) HttpClient सर्वर के GET प्रतिसादों को TransferState में कैश करता है। इसलिए समान क्लाइंट अनुरोध मैन्युअल कुंजियों के बिना कैश से पूरे होते हैं।

provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))

झिलमिलाहट से बचना

क्लाइंट स्थानांतरित डेटा का पुनः उपयोग करता है, इसलिए हाइड्रेट किया हुआ दृश्य सर्वर HTML से बिल्कुल मेल खाता है। इससे सामग्री के गायब होकर फिर लोड होने वाली झिलमिलाहट रुकती है।

सुरक्षा संबंधी सूचना

स्थानांतरित स्थिति सार्वजनिक HTML में जोड़ी जाती है। ऐसे रहस्य, टोकन या प्रति-उपयोगकर्ता निजी डेटा को TransferState में कभी न रखें, जिन्हें आप पृष्ठ के स्रोत में उजागर नहीं करना चाहेंगे।

कस्टम बनाम स्वचालित

HTTP ट्रांसफ़र कैश अधिकांश GET-आधारित डेटा प्राप्ति को अपने-आप संभालता है। ऐसे गैर-HTTP परिकलित डेटा के लिए मैन्युअल makeStateKey का उपयोग कीजिए, जिसे आप सर्वर से क्लाइंट तक ले जाना चाहते हैं।

कैश का दायरा

HTTP ट्रांसफ़र कैश प्रति-अनुरोध होता है और क्लाइंट पर एक बार उपयोग किया जाता है। पहला मिलान करने वाला क्लाइंट अनुरोध इसे पढ़ लेने के बाद अगली कॉल सामान्य रूप से नेटवर्क पर जाती हैं।

इसके काम करने की पुष्टि

SSR प्रतिक्रिया का निरीक्षण कीजिए और उसमें जोड़ी गई स्थिति स्क्रिप्ट खोजिए। ब्राउज़र के नेटवर्क टैब में हाइड्रेशन के तुरंत बाद दोबारा होने वाली प्राप्ति रुकती हुई दिखाई देनी चाहिए।

त्वरित जाँच

स्थिति स्थानांतरण से जुड़े अपने ज्ञान की जाँच कीजिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने TransferState और makeStateKey के साथ सर्वर से क्लाइंट तक डेटा ले जाना, स्वचालित HTTP ट्रांसफ़र कैश का उपयोग करना, दो बार डेटा प्राप्त करने और झिलमिलाहट से बचना तथा निजी डेटा को सार्वजनिक रूप से जोड़ी गई स्थिति से बाहर रखना सीखा।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “क्लाइंट को अवस्था स्थानांतरित करना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “क्लाइंट को अवस्था स्थानांतरित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“क्लाइंट को अवस्था स्थानांतरित करना” में मैं क्या सीखूँगा?

अवस्था स्थानांतरण से दोहराए गए अनुरोधों से बचें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“क्लाइंट को अवस्था स्थानांतरित करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ