Frontend Academy · पाठ

डिप्लॉयमेंट: स्थिर बनाम SSR

nuxt generate के साथ पूरी तरह स्थिर साइट जनरेट करें, SSR ऐप को Node सर्वर या एज रनटाइम पर डिप्लॉय करें, और Nuxt nitro इंजन कॉन्फ़िगर करें।

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

डिप्लॉयमेंट: स्थिर बनाम SSR, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Nuxt कहीं भी रेंडर होता है

Nuxt 3 चार परिनियोजन मोड का समर्थन करता है: स्थिर (nuxt generate), SSR (Node सर्वर), एज (Cloudflare Workers, Vercel Edge), मिश्रित (प्रति-रूट)।

स्थिर परिनियोजन

nuxt generate हर रूट को पहले से HTML फ़ाइलों में रेंडर करता है। .output/public फ़ोल्डर को किसी भी स्थिर होस्ट (Netlify, Vercel, GitHub Pages, S3) पर परिनियोजित करें।

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

डायनेमिक रूट बनाना

/blog/[slug] जैसे रूट के लिए Nuxt को सभी स्लग पता होने चाहिए। उन्हें कॉन्फ़िगरेशन में nitro.prerender.routes के माध्यम से दें।

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

Node पर SSR परिनियोजन

nuxt build Nitro सर्वर बनाता है। इसे किसी भी Node होस्ट (Render, Railway, Fly.io, आपके VPS) पर node .output/server/index.mjs चलाकर परिनियोजित करें।

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — सार्वभौमिक सर्वर

Nuxt 3 का सर्वर Nitro है — एक पोर्टेबल इंजन, जो किसी भी रनटाइम को लक्षित करता है: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify, AWS Lambda। nitro.preset से लक्ष्य बदलें।

एज परिनियोजन (Cloudflare Workers)

प्रीसेट को cloudflare-pages या cloudflare पर सेट करें। बिल्ड ऐसा Worker आउटपुट बनाता है, जो Cloudflare के एज पर चलता है।

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

एज परिनियोजन (Vercel Edge)

Vercel अपने-आप Nuxt का पता लगाकर सही प्रीसेट का उपयोग करता है। एज रनटाइम को बाध्य करने के लिए: preset: 'vercel-edge'।

मिश्रित रेंडरिंग

अलग-अलग रूट अलग तरीकों से रेंडर किए जा सकते हैं। routeRules से कॉन्फ़िगर करें।

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

स्थिर और SSR में चयन

स्थिर: सामग्री बहुत कम बदलती है, अधिकतम गति चाहिए और CDN होस्टिंग सस्ती है (ब्लॉग, मार्केटिंग, दस्तावेज़)। SSR: प्रति-उपयोगकर्ता सामग्री, डायनेमिक डेटा और खोज परिणाम (डैशबोर्ड, ई-कॉमर्स)। मिश्रित मोड से आप प्रति-रूट दोनों को मिला सकते हैं।

पर्यावरण चर

nuxt.config.ts में runtimeConfig का उपयोग करें। public क्लाइंट के सामने प्रकट होता है; बाकी सर्वर तक ही सीमित रहता है।

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

CI में बिल्ड कैशिंग

बिल्ड को तेज़ करने के लिए CI रन के बीच .nuxt/ और node_modules/ को कैश करें। Vercel/Netlify पर यह स्वचालित होता है।

प्रदर्शन परीक्षण

परिनियोजन के बाद Lighthouse को localhost के बजाय परिनियोजित URL पर चलाएँ। वास्तविक CDN, वास्तविक एज स्थान और वास्तविक CPU थ्रॉटलिंग का उपयोग करें।

त्वरित जाँच

कौन-सा Nuxt 3 कमांड सभी रूट को स्थिर HTML में पहले से रेंडर करता है, ताकि Netlify या Cloudflare Pages जैसे CDN पर परिनियोजित किया जा सके?

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

पुनरावलोकन: Nuxt परिनियोजन

nuxt generate → स्थिर ( .output/public परिनियोजित करें)। nuxt build → SSR (Node के साथ परिनियोजित करें)। Nitro प्रीसेट Cloudflare, Vercel, Netlify, AWS आदि को लक्षित करते हैं। मिश्रित रेंडरिंग के लिए routeRules (प्रति-रूट prerender, isr, ssr, spa)। पर्यावरण चरों के लिए runtimeConfig (public क्लाइंट के सामने प्रकट होता है)। परिनियोजित URL पर Lighthouse से परीक्षण करें।

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

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

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

पाठ्यक्रम: 41
पाठ: 163

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

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

क्या “डिप्लॉयमेंट: स्थिर बनाम SSR” पाठ निःशुल्क है?

हाँ—“डिप्लॉयमेंट: स्थिर बनाम SSR” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“डिप्लॉयमेंट: स्थिर बनाम SSR” में मैं क्या सीखूँगा?

nuxt generate के साथ पूरी तरह स्थिर साइट जनरेट करें, SSR ऐप को Node सर्वर या एज रनटाइम पर डिप्लॉय करें, और Nuxt nitro इंजन कॉन्फ़िगर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“डिप्लॉयमेंट: स्थिर बनाम SSR” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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