Nuxt کے ساتھ server-side rendering کیا شامل کرتا ہے؟

Question

Accepted Answer

**Nuxt** Vue کے لیے meta-framework ہے (React کے لیے Next.js کے برابر)۔ یہ **server-side rendering (SSR)**، file-based routing، اور full-stack صلاحیتیں Vue کے اوپر شامل کرتا ہے — Vue کو ایک client-side لائبریری سے ایک مکمل application framework میں تبدیل کرتے ہوئے۔ ## SSR جو بنیادی مسئلہ حل کرتا ہے ```text Plain Vue SPA: server sends an empty

+ JS bundle → browser downloads JS, runs Vue, THEN renders content → slow first paint, and crawlers may see a blank page (bad SEO) Nuxt SSR: server renders the full HTML and sends it ready-to-view → fast first paint, content visible immediately, great SEO → Vue then "hydrates" it to make it interactive ``` SSR کا مطلب ہے کہ server ہر درخواست کے لیے مکمل HTML بناتا ہے، اس لیے صارفین اور سرچ انجنیں فوری طور پر اصل مواد حاصل کرتے ہیں، پھر Vue (hydration) سے interactivity کے لیے سنبھال لیتا ہے۔ ## Nuxt کیا فراہم کرتا ہے ```text ✓ Rendering modes per route: SSR, SSG (static), ISR, or SPA — your choice ✓ File-based routing — pages/ folder = routes (no manual router config) ✓ Auto-imports — components/composables imported automatically ✓ Server routes / API — server/api/ for backend endpoints (full-stack) ✓ Data fetching — useFetch / useAsyncData that work on server AND client ✓ SEO helpers — useHead/useSeoMeta for meta tags ``` ## File-based routing کی مثال ```text pages/index.vue → / pages/about.vue → /about pages/users/[id].vue → /users/:id (dynamic) ``` ## Universal data fetching ```vue ``` `useFetch`/`useAsyncData` SSR کے دوران server پر fetch کرتے ہیں (تاکہ ڈیٹا ابتدائی HTML میں ہو) اور hydration پر double-fetch سے بچتے ہیں — Nuxt کی اہم سہولت۔ ## Rendering mode لچک ```text SSR → fresh HTML per request (dynamic, personalized, SEO) SSG → pre-rendered at build (fastest, for mostly-static content) Hybrid → choose per route via routeRules ``` ## اس کی اہمیت Nuxt Vue کو وہ کچھ دیتا ہے جو Next.js React کو دیتا ہے: **SEO اور تیز first paint** کے لیے SSR/SSG، file-based routing، full-stack apps کے لیے ایک server layer، اور معقول conventions (auto-imports، universal data fetching)۔ مواد کی سائٹوں، e-commerce، یا کسی بھی چیز کے لیے جس کو SEO اور تیز لوڈز کی ضرورت ہو، ایک سادہ Vue SPA ناکافی ہے — Nuxt کا server rendering جواب ہے، جبکہ آپ کو ہر route کے لیے بہترین rendering mode منتخب کرنے دیتے ہوئے۔