App Router மற்றும் Pages Router இடையே என்ன வித்தியாசம் உள்ளது?

Question

Accepted Answer

Next.js ஆனது **இரண்டு ரூட்டிங் அமைப்புகள்** கொண்டுள்ளது. **Pages Router** (`pages/`) என்பது அசல்; **App Router** (`app/`, Next 13 முதல்) என்பது புதியது, பரிந்துரைக்கப்பட்டது, React Server Components ஐச் சுற்றி கட்டப்பட்டது. ## கோப்பு மற்றும் மரபு வேறுபாடுகள் ```text Pages Router (pages/) App Router (app/) ────────────────────────────────────────────────────── pages/about.tsx → /about app/about/page.tsx → /about Default export = page page.tsx = page, layout.tsx = layout getServerSideProps (SSR) async Server Components (fetch directly) getStaticProps (SSG) fetch() with caching options _app.tsx / _document.tsx Nested layout.tsx files All components client-rendered Server Components by default ``` ## முக்கிய கோட்பாட்டு மாற்றம்: Server Components ```tsx // App Router — a Server Component that fetches data directly, no extra API // app/users/page.tsx export default async function Users() { const res = await fetch("https://api.example.com/users"); // runs on the SERVER const users = await res.json(); return

{u.name}

; } ``` App Router இல், கூறுகள் **முன்னிருப்பாக Server Components** — அவை சேவையகத்தில் இயங்கும், `await` தரவை நேரடியாக இயக்க முடியும், மற்றும் அந்த கூறுக்கான பூஜ்ய JS ஐ உலாவிக்கு அனுப்பும். Pages Router மாறாக சிறப்பு செயல்பாடுகளை (`getServerSideProps`) பயன்படுத்தி ক்লையன்ட்-ரெন்டர் செய்யப்பட்ட பக்கங்களுக்கு தரவை அனுப்பியது. ## App Router என்ன சேர்க்கிறது - **உள்ளமைக்கப்பட்ட தளவமைப்புகள்** நேவிகேஷனில் தொடர்ந்து இருக்கும் (`layout.tsx`). - **Server Components** (குறைந்த ক்লையன்ட் JS, நேரடி தரவு அணுகல்). - **Streaming** `loading.tsx` / Suspense மூலம். - **Server Actions** API பாதைகள் இல்லாமல் பரிமாற்றங்களுக்கு. ## எது பயன்படுத்துவது புதிய திட்டங்களுக்கு **App Router** ஐ பயன்படுத்தவும் — Next.js வளர்ச்சி இங்கு கவனம் செலுத்தப்படுகிறது. Pages Router இன்னும் ஆதரிக்கப்படுகிறது (மற்றும் இரண்டும் ஒரு பயன்பாட்டில் இணைந்து இருக்கலாம்) ஆனால் அடிப்படையில் பராமரிப்பு முறையில் உள்ளது. ## இது ஏன் முக்கியமானது App Router என்பது Next.js இன் தற்போதைய கட்டமைப்பை பிரதிநிதித்துவம் செய்கிறது (Server Components, உள்ளமைக்கப்பட்ட தளவமைப்புகள், streaming). இது மரபுவழி Pages Router விலிருந்து எப்படி வேறுபட்டுள்ளது என்பதை அறிதல் — குறிப்பாக சேவையக-முதல் முன்னிருப்பு மற்றும் தளவமைப்பு மாதிரி — எந்த நவீன Next.js codebase இல் வேலை செய்ய அপরிহார்யமானது.