Cad é an difríochtaí idir an App Router agus an Pages Router?

Question

Accepted Answer

Tá **dhá chóras ródúil** ag Next.js. Is é an **Pages Router** (`pages/`) an ceann bunaidh; is é an **App Router** (`app/`, ó Next 13) an ceann níos nuaí, an ceann a bhíonn tugtha le geal agus a tógadh timpeall ar React Server Components. ## Difríochtaí comhaid agus coinbhinsiúin ```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 ``` ## An t-athrú coincheapúil príomha: 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}

; } ``` San App Router, is **Server Components iad na comhpháirteanna de réir réamhshocrú** — ritheanns siad ar an bhfreastalaí, is féidir leo `await` sonraí go díreach, agus cuirid siad nialas JS don chomhpháirt sin chuig an brabhsálaí. Bhí an Pages Router ag úsáid feidhmeanna speisialta (`getServerSideProps`) in ionad sin chun sonraí a chur ar leathanach a raibh siad á léiriú ar an taobh an chliaint. ## Cad a chuireann an App Router leis - **Leabharlanna foluaineacha** a fhanann i bhfeidhm ar an iomlán (`layout.tsx`). - **Server Components** (níos lú JS ar an taobh an chliaint, rochtain dhíreach ar shonraí). - **Streaming** le `loading.tsx` / Suspense. - **Server Actions** do athruithe gan bealaí API. ## Cé acu a úsáid Baineadh úsáid as an **App Router** do thionscadail nua — sin an áit ar a bhfuil forbairt Next.js dírithe. Tá an Pages Router fós á thacú (agus is féidir an dá rud a bheith ann sa chéad aip) ach is gnáth-bhealach an choimeádachta a bhíonn ann. ## Cén fáth a bhíonn sé tábhachtach Is ionadaíonn an App Router ailtireacht reatha Next.js (Server Components, leabharlanna foluaineacha, streaming). Bheith agat ar thuiscint ar an bhealach ar a dhifríonn sé ó shean-Pages Router — go háirithe an réamhshocrú server-first agus an tsamhail leabharlainne — tá sé riachtanach do dhul i ngleic le aon bhunbhealach Next.js nua-aimseartha.