Nuxt ਨਾਲ server-side rendering ਕੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

**Nuxt** Vue ਲਈ meta-framework ਹੈ (React ਲਈ Next.js ਦੇ ਬਰਾਬਰ)। ਇਹ Vue ਦੇ ਸਿਖਰ 'ਤੇ **server-side rendering (SSR)**, file-based routing, ਅਤੇ full-stack ਸਮਰੱਥਾਵਾਂ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ — Vue ਨੂੰ client-side library ਤੋਂ ਇੱਕ ਸੰਪੂਰਨ 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 ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਰਵਰ ਹਰ request ਲਈ ਸੰਪੂਰਨ HTML ਤਿਆਰ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਉਪਯੋਗਕਰਤਾ ਅਤੇ ਸਰਚ ਇੰਜਨ ਨੂੰ ਤੁਰੰਤ ਅਸਲੀ ਸਮਗ੍ਰੀ ਮਿਲਦੀ ਹੈ, ਫਿਰ Vue ਇੰਟਰਕਿਰਿਆਸ਼ੀਲਤਾ ਲਈ ਸੂਖਮ ਹਿਸਾਬ (hydration) ਕਰਦਾ ਹੈ। ## 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) ``` ## ਯੂਨੀਵਰਸਲ ਡੇਟਾ ਫੈਚਿੰਗ ```vue ``` `useFetch`/`useAsyncData` SSR ਦੌਰਾਨ ਸਰਵਰ 'ਤੇ ਫੈਚ ਕਰਦਾ ਹੈ (ਇਸ ਲਈ ਡੇਟਾ ਸ਼ੁਰੂਆਤੀ HTML ਵਿੱਚ ਹੈ) ਅਤੇ hydration 'ਤੇ ਦੋਹਰੀ-ਫੈਚ ਤੋਂ ਬਚਦਾ ਹੈ — ਇੱਕ ਮੁੱਖ Nuxt ਸੁਵਿਧਾ। ## ਰੈਂਡਰਿੰਗ ਮੋਡ ਲਚਕ ```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 ਅਤੇ ਤੇਜ਼ ਪਹਿਲੀ ਪੇਂਟ** ਲਈ SSR/SSG, file-based routing, full-stack ਐਪਾਂ ਲਈ ਸਰਵਰ ਲੇਅਰ, ਅਤੇ ਸਮਝਦਾਰੀ ਨਿਯਮ (auto-imports, ਯੂਨੀਵਰਸਲ ਡੇਟਾ ਫੈਚਿੰਗ)। ਸਮਗ੍ਰੀ ਸਾਈਟਾਂ, e-commerce, ਜਾਂ ਕੁੱਝ ਵੀ ਜਿਸ ਨੂੰ SEO ਅਤੇ ਤੇਜ਼ ਲੋਡਿੰਗ ਦੀ ਲੋੜ ਹੈ, ਇੱਕ ਸਾਦਾ Vue SPA ਕਾਫ਼ੀ ਨਹੀਂ ਹੈ — Nuxt ਦੀ ਸਰਵਰ ਰੈਂਡਰਿੰਗ ਜਵਾਬ ਹੈ, ਜਦੋਂ ਕਿ ਤਿਵੀ ਹਰੇਕ route ਲਈ ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ ਮੋਡ ਚੁਣ ਸਕਦੇ ਹੋ।