app router vs pages router next js: chọn lộ trình migrate khi sản phẩm đang chạy
· Tác giả: Trường — Founder Webchốt
app router vs pages router next js không phải cuộc đua chọn một bên để xóa bên kia ngay lập tức; đó là quyết định vận hành theo độ tuổi codebase, nợ kỹ thuật và áp lực tính năng 2026. App Router đưa layout lồng nhau, Server Components mặc định và metadata khai báo gần route; Pages Router quen thuộc với getStaticProps, getServerSideProps và file-based API cũ. Khi team cần ship nhanh mà chưa chủ động TypeScript và boundary server/client, nhảy toàn bộ có thể làm chậm release hơn là tăng tốc. app router vs pages router next js nên được nhìn như hai vùng có thể coexist: giao diện mới, blog, hoặc khu vực cần streaming HTML là ứng viên App; checkout, integração legacy giữ Pages cho đến khi có test end-to-end. Cần đối tác triển khai: dịch vụ, bảng giá, liên hệ — 0905 151 701, hi@webchot.com.
So blueprint routing trước khi chốt nextjs migration trên nhánh production | Nguồn: webchot.com
nextjs migration: rủi ro, đội ngũ và thứ tự module ưu tiên
nextjs migration hiệu quả bắt đầu từ inventory: liệt kê route Pages, API phụ thuộc, middleware, internationalized path và các plugin webpack tùy chỉnh. Mỗi mục gắn nhãn effort và rủi ro regression; ưu tiên vùng có coverage test tốt hoặc traffic thấp hơn để học convention App. Đội cần thống nhất quy tắc đặt tên segment, cách tổ chức loading.tsx, error.tsx và not-found boundary — tránh mỗi dev một kiểu trong cùng monorepo.
Khi có CMS headless hoặc storefront, hãy tách rõ lớp fetch: Server Component gọi trực tiếp service nội bộ, Client Component chỉ nhận props serializable. Ghi chép ADR ngắn mỗi lần bẻ pattern cũ sang mới để onboard người mới không đoán mò. Nếu CI chưa có typecheck và lint chung, sửa CI trước khi mở hàng loạt PR đổi router — lỗi import vòng hoặc use client nhầm chỗ sẽ tràn vào main.
Kiến trúc routing: nested layout, loading và streaming so với _app
App Router tách layout theo segment; Pages gom Provider trong _app. Ảnh hưởng thực tế: theme, i18n provider, analytics — phải quyết định ranh giới client boundary sao cho không bubble use client lên toàn cây. Với dashboard nhiều tầng, App thường gọn hơn vì skeleton từng nhánh; với site marketing đơn giản, lợi ích tương đối nhỏ nếu team đã tối ưu SSG tốt.
- Điểm 1: Kiểm tra xung đột CSS global giữa hai hệ khi chạy song song.
- Điểm 2: Xác định route nào cần dynamicParams hoặc revalidate cụ thể.
- Điểm 3: Bản đồ redirect cũ từ next.config phải khớp cả hai vùng.
- Điểm 4: Giám sát bundle analyzer sau khi tách server và client tree.
Bảng quyết định nhanh giữa App segment và Pages legacy
Dùng bảng dưới đây trong họp kỹ thuật để tránh tranh luận dài; số liệu qualitative phản ánh kinh nghiệm triển khai thực tế chứ không thay thế profiling của riêng bạn.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Trang marketing ít động | Pages SSG | App RSC | Giữ Pages nếu ổn định; App khi cần metadata động theo tenant |
| Dashboard authenticated | Pages + CSR nặng | App layouts + server fetch | App thường giảm JS client khi tách đúng |
| API BFF nội bộ | pages/api | route handlers app | Chuẩn hóa dần handlers mới ở app; giữ api cũ đến khi thay xong |
| Đội mới với Next | Pages quen sách vở cũ | App convention mới | Training song song; coexist cho tới khi confidence cao |
Kết luận bảng không cố định vĩnh viễn: một release có thể đẩy ưu tiên sang App sau khi đo LCP và TBT cải thiện trên thiết bị thật 4G Việt Nam. Hãy đính kèm link Lighthouse CI trong ticket merge.
Quy trình 5 bước mở route App đầu tiên cạnh Pages
- Bước 1: Fork nhánh feature, tạo segment thử trong app/ trùng path trial nhưng chỉ mount trên staging domain; cấu hình env để analytics tách dataset.
- Bước 2: Port layout gốc: font, metadata base, viewport; đảm bảo favicon và manifest không đổi URL công khai.
- Bước 3: Chuyển page đích sang Server Component; bọc widget tương tác trong client leaf nhỏ nhất có thể.
- Bước 4: Viết test regression so sánh HTML snapshot hoặc data-testid quan trọng; so redirect và status code 200/404 với bản Pages.
- Bước 5: Canary traffic 5–10% nếu hạ tầng hỗ trợ; quan sát error rate và thời gian backend; rollback bằng feature flag hoặc reverse proxy path.
Sau khi ổn, lập lịch xóa code duplicate trong Pages chỉ khi không còn backlink nội bộ trỏ tới component cũ — tránh hai nguồn sự thật cho cùng một section.
Phương án Webchốt cho dự án coexist và tối ưu chi phí sprint
Studio Webchốt thường đề xuất hợp đồng theo milestone: audit router, PoC một nhánh App, rồi mở rộng dần. Chi phí phụ thuộc độ phức tạp auth và số integration bên thứ ba; trang dịch vụ mô tả gói landing, SaaS portal và headless commerce có checklist riêng. Khách có thể ghé mục giá để ước lượng giai đoạn; với scope chưa rõ, book call 0905 151 701 để chốt backlog ngắn hạn trước khi cam kết dài hạn.
Chúng tôi ưu tiên giữ uptime: mọi thay router đều có plan rollback và logging request id thống nhất giữa edge và origin. Tài liệu bàn giao gồm sơ đồ segment, ma trận risk và lịch xóa code chết trong Pages sau Q3.
Sai lầm phổ biến khi tranh luận app router vs pages router next js
Nhận diện sớm các lỗi sau giúp giảm họp lặp và tránh refactor vòng.
- Sai lầm 1: Coi Server Component như substitute hoàn hảo cho mọi getServerSideProps mà không đo TTFB downstream — database chậm vẫn là nút thắt dù UI ở server.
- Sai lầm 2: Nhét use client vào layout cao vì tiện, khiến toàn subtree mất lợi RSC và phình bundle như Pages CSR nặng.
- Sai lầm 3: Bỏ qua kiểm tra cookie/session khi dùng fetch server có cache mặc định; người dùng B có thể thấy dữ liệu gợn từ người A nếu nhầm public cache.
- Sai lầm 4: Không cập nhật doc nội bộ khiến dev mới sửa nhầm file trong pages/ lẫn app/ cùng slug, gây hành vi không dự đoán ở middleware.
FAQ — app router vs pages router next js
Monorepo Turborepo có ảnh hưởng gì?
Cache build và task boundary thay đổi khi thư mục app mới xuất hiện; pipeline cần include pattern app/**/*.tsx. Kiểm tra shared UI package: peer React phù hợp và không import server-only vào package đánh dấu client. Document graph dependency để tránh vòng khi barrel export.
i18n subdomain có giữ được?
Có, với rewrite hoặc middleware; kiểm tra lại locale prefix trong App segment và map so với Pages oldrewrites. QA nên bấm thử mọi locale trên mobile Safari vì cookie SameSite khác desktop. Ghi log missing translation keys trước khi bật build fail.
Có nên đổi toàn bộ trong một release lớn?
Thường không, trừ codebase nhỏ và test E2E đầy đủ. Chia theo domain bounded context: ví dụ blog và docs trước, sau đến account. Mỗi wave có chỉ số KPI: crash free, LCP p75, conversion funnel nếu là commerce.
Storybook với App Router?
Cập nhật plugin và meta theo docs mới; tách story pure presentational khỏi fetch. Có thể mock server props bằng loader tùy biến. Nếu stuck, isolate design system package trước khi ép story import trực tiếp layout app.
Webchốt có đào tạo nội bộ?
Có workshop ngắn và review PR pair trong tuần đầu coexist; kèm template trong repo mẫu. Liên hệ hi@webchot.com để nhận outline buổi và checklist bài tập về nhà cho team backend phối hợp.
Liên Hệ Webchốt
app router vs pages router next js là chủ đề sống cùng sản phẩm vài quarter, không kết thúc sau một sprint. Webchốt giúp bạn giữ SEO, auth và hiệu năng ổn định trong lúc đội học convention mới — từ audit đến cờ feature và quan sát log thực tế. Khi cần lộ trình cụ thể cho domain của bạn, gọi 0905 151 701 hoặc email hi@webchot.com; chúng tôi phản hồi trong giờ hành chính và sắp lịch khảo sát nhanh.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
