Frontend system design cho sản phẩm production

Frontend cũng cần system design

Khi sản phẩm còn nhỏ, component chạy được là đủ. Khi sản phẩm có nhiều route, nhiều trạng thái, nhiều người cùng sửa và nhiều lần release, frontend cần được thiết kế như một hệ thống. Nếu không, UI sẽ nhanh chóng thành tập hợp các quyết định ngắn hạn.

System design ở frontend không phải vẽ sơ đồ phức tạp. Nó là cách trả lời nhất quán cho các câu hỏi: dữ liệu sống ở đâu, ai sở hữu logic nghiệp vụ, route nào chịu trách nhiệm SEO, component nào được phép có state, và thay đổi được kiểm chứng bằng gì.

Ownership trước abstraction

Một cấu trúc dễ vận hành thường chia rõ:

• app giữ routing, layout, metadata và route handlers.
• features giữ business logic, services, hooks và component theo domain.
• components giữ UI primitive hoặc shared layout thật sự dùng lại.
• content giữ dữ liệu tĩnh, markdown và JSON.
• lib giữ utility cross-feature.

Khi ownership rõ, abstraction mới có cơ hội đúng. Nếu ownership mơ hồ, abstraction thường chỉ che đi sự lẫn lộn.

Data flow càng ngắn càng tốt

Với Next.js App Router, hãy ưu tiên Server Component và server utility trước. TanStack Query hoặc Zustand chỉ nên xuất hiện khi bài toán thật sự cần client cache, optimistic update, polling hoặc UI state chia sẻ.

Một rule thực dụng:

Content/static data -> Server Component -> props -> small Client Component

Nếu dữ liệu có thể render ở server, đừng đưa nó vào global store. Nếu state chỉ dùng trong một component, đừng tạo store. Nếu API chỉ phục vụ chính page server, hãy gọi service trực tiếp.

Performance nằm ở quyết định kiến trúc

Tối ưu frontend không chỉ là memo. Nhiều vấn đề performance đến từ việc biến component server thành client quá rộng, fetch trùng dữ liệu, import thư viện nặng vào route phổ biến hoặc render lại danh sách lớn không cần thiết.

Memo chỉ nên dùng khi có lý do rõ: component nhận props ổn định, render tốn chi phí, và profiling hoặc ngữ cảnh cho thấy nó đáng làm. Với Server Component, memo thường không phải công cụ chính.

Verification là một phần của thiết kế

Một hệ thống tốt phải dễ kiểm tra. Với thay đổi UI, tối thiểu nên có lint, build và kiểm tra responsive ở các viewport chính. Với route public, cần xem metadata, sitemap, trạng thái 404 và nội dung render trên mobile.

Nếu mỗi thay đổi đều cần người khác đoán cách verify, system design chưa đủ rõ.

Kết luận

Frontend production tốt là sự kết hợp giữa ownership, data flow, UI consistency và verification. Component đẹp giúp người dùng tin sản phẩm; kiến trúc rõ giúp đội ngũ tiếp tục giao hàng mà không tự làm chậm mình.