Angular Academy · पाठ

Angular SSR सेट अप करना

Angular CLI से SSR जोड़ें

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

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

SSR जोड़ना

SSR सक्षम करने का सबसे तेज़ तरीका ng add @angular/ssr स्कीमैटिक है। यह आपके लिए सर्वर निर्माण, Express-आधारित सर्वर और हाइड्रेशन को जोड़ देता है।

// terminal
// ng add @angular/ssr

नई परियोजनाएँ

नया ऐप बनाते समय आप SSR फ़्लैग के साथ सीधे इसे चुन सकते हैं, जिससे परियोजना शुरुआत से ही SSR के लिए तैयार हो जाती है।

// ng new my-app --ssr

स्कीमैटिक क्या जोड़ता है

यह server.ts (Express सर्वर), main.server.ts बूटस्ट्रैप और app.config.server.ts जोड़ता है, सर्वर विकल्पों के साथ angular.json को अपडेट करता है और ऐप कॉन्फ़िगरेशन में हाइड्रेशन सक्षम करता है।

provideServerRendering

सर्वर ऐप कॉन्फ़िगरेशन provideServerRendering() के माध्यम से SSR इंजन उपलब्ध कराता है और इसे आपके ब्राउज़र कॉन्फ़िगरेशन के साथ मिला दिया जाता है।

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

क्लाइंट पर हाइड्रेशन

ब्राउज़र कॉन्फ़िगरेशन हाइड्रेशन सक्षम करता है, ताकि क्लाइंट सर्वर HTML को फिर से रेंडर करने के बजाय उसका पुनः उपयोग करे। स्कीमैटिक इसे अपने-आप जोड़ देता है।

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Express सर्वर

server.ts एक Express ऐप बनाता है, जो स्थिर संसाधन परोसता है और अन्य सभी मार्गों के लिए HTML रेंडरिंग Angular SSR इंजन को सौंप देता है।

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

डेव सर्वर

विकास के दौरान ng serve एप्लिकेशन बिल्डर के साथ SSR अपने-आप चलाता है, इसलिए आपको अतिरिक्त चरणों के बिना सर्वर द्वारा रेंडर किया गया आउटपुट और हाइड्रेशन दिखाई देते हैं।

// ng serve

उत्पादन के लिए निर्माण

उत्पादन निर्माण से browser बंडल और server बंडल बनते हैं। उत्पादन में SSR परोसने के लिए Node सर्वर एंट्री चलाइए।

// ng build
// node dist/my-app/server/server.mjs

केवल-ब्राउज़र API

कोड सर्वर पर भी चलता है, जहाँ window, document और localStorage मौजूद नहीं होते। ऐसे अभिगम को सुरक्षित कीजिए, वरना SSR के दौरान ऐप क्रैश हो जाएगा।

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

HTTP के लिए पूर्ण URL

सर्वर पर सापेक्ष API URL का कोई मूल स्थान नहीं होता। पूर्ण URL का उपयोग कीजिए या कोई आधार कॉन्फ़िगर कीजिए, ताकि सर्वर-साइड HttpClient कॉल सही तरह हल हों।

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

SSR की पुष्टि करने के लिए किसी पृष्ठ का अनुरोध कीजिए और कच्ची प्रतिक्रिया का निरीक्षण कीजिए, उदाहरण के लिए curl से। HTML में रेंडर की गई सामग्री दिखनी चाहिए, केवल खाली ऐप रूट नहीं।

// curl http://localhost:4000/ | grep "<h1>"

त्वरित जाँच

अपने SSR सेटअप से जुड़े ज्ञान की जाँच कीजिए।

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

पुनरावलोकन

आपने ng add @angular/ssr से SSR सेट अप किया: इससे Express सर्वर, provideServerRendering() और क्लाइंट हाइड्रेशन जुड़ते हैं। केवल-ब्राउज़र API को सुरक्षित करना, सर्वर पर पूर्ण URL का उपयोग करना और कच्ची प्रतिक्रिया में रेंडर किया हुआ HTML सत्यापित करना याद रखिए।

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

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

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

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

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

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

क्या “Angular SSR सेट अप करना” पाठ निःशुल्क है?

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

“Angular SSR सेट अप करना” में मैं क्या सीखूँगा?

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

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

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

“Angular SSR सेट अप करना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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