Cả hai đều bọc route con, khác nhau ở vòng đời khi điều hướng:
layout.tsx: giữ nguyên instance khi chuyển giữa các route con. State bên trong không mất, effect không chạy lại, DOM không remount.template.tsx: tạo instance mới mỗi lần điều hướng. State reset,useEffectchạy lại, animation mount phát lại.
app/
layout.tsx // sidebar, header — không muốn reset
(dash)/
template.tsx // wrapper animation fade-in mỗi trang
page.tsxDùng template.tsx khi:
- Cần animation vào/ra mỗi lần đổi trang.
- Có useEffect phải chạy lại mỗi lần xem trang (ghi log pageview, focus input).
- Muốn state trong wrapper bị reset (ví dụ form bộ lọc không mang sang trang khác).
Mặc định nên dùng layout.tsx vì giữ được state là điểm mạnh của App Router. Nếu có cả hai trong cùng thư mục, thứ tự bọc là layout bên ngoài, template bên trong.