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 library இலிருந்து முழுமையான பயன்பாட்டு 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 ஆனது interactivity (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) ``` ## உலகளாவிய தரவு fetching ```vue ``` `useFetch`/`useAsyncData` SSR இன் போது சேவையகத்தில் தரவைப் பெறுகிறது (எனவே தரவு ஆரம்ப HTML இல் உள்ளது) மற்றும் hydration க்குறையாக இரட்டை-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 க்கு கொண்டு வருவது போல் கொண்டு வருகிறது: SSR/SSG **SEO மற்றும் வேகமான முதல் பைண்ட் க்கு**, file-based routing, full-stack பயன்பாடுகளுக்கான சேவையக স்তரம் மற்றும் அர்த்தமுள்ள மரபுகள் (auto-imports, உலகளாவிய தரவு fetching). Pure content sites, e-commerce அல்லது SEO மற்றும் வேகமான loads தேவையான எதற்கும், தெளிந்த Vue SPA போதுமானதல்ல — Nuxt ஆனது server rendering என்பது பதில் ஆகும், ஆனால் இன்னும் ஒவ்வொரு route க்கும் optimal rendering mode ஐத் தேர்ந்தெடுக்க அனுமதிக்கிறது.