Frontend và backend khác nhau thế nào?

Frontend là phần của ứng dụng chạy trên trình duyệt của người dùng: các trang, nút bấm, biểu mẫu và hiệu ứng chuyển động mà họ thấy và nhấp vào. Backend là phần chạy trên một máy chủ mà người dùng không bao giờ nhìn thấy: nó lưu và truy xuất dữ liệu, áp dụng các quy tắc nghiệp vụ, kiểm tra ai được phép làm gì, và giao tiếp với các dịch vụ khác như thanh toán và email. Hai phần giao tiếp với nhau qua một API, và cùng với cơ sở dữ liệu, chúng tạo nên một ứng dụng "full-stack".

Vì sao điều này quan trọng khi bạn xây dựng bằng AI

Khi bạn mô tả một ứng dụng cho công cụ xây dựng bằng AI, bạn đang mô tả cả hai phần cùng lúc, dù có nhận ra hay không. Câu "Khách hàng có thể đặt lịch" nghĩa là một biểu mẫu đặt lịch (frontend), các quy tắc về khung giờ còn trống (backend) và một nơi để lưu các lịch đã đặt (cơ sở dữ liệu).

Hiểu được cách phân chia này giúp ích theo ba cách thực tế:

1. Bảo mật. Mọi thứ trong frontend đều có thể bị người dùng xem và thay đổi. Quy tắc và khóa bí mật phải nằm ở backend.
2. Gỡ lỗi. "Nút không phản hồi" và "nút phản hồi nhưng không có gì được lưu" chỉ về hai phần khác nhau, và nói rõ bạn đang thấy điều nào sẽ giúp AI tìm nguyên nhân nhanh hơn.
3. Lưu trữ và chi phí. Một trang chỉ có frontend thì rẻ và đơn giản để lưu trữ. Backend phải chạy ở đâu đó, và điều này ảnh hưởng đến số tiền bạn trả cũng như cách ứng dụng hoạt động khi không có người dùng.

Một ví dụ đời thường

Hãy nghĩ đến một nhà hàng.

Frontend là phòng ăn: thực đơn, bàn ghế, cách trang trí, người phục vụ nhận gọi món. Được thiết kế cho khách hàng, và họ có thể nhìn thấy và chạm vào tất cả.

Backend là bếp và văn phòng: đầu bếp nấu ăn, kho hàng, quầy thu ngân, các quy tắc của quản lý về ai được giảm giá. Khách hàng không bao giờ vào đó, và họ cũng không nên làm vậy.

API là cửa sổ giữa hai bên: quầy nơi phiếu gọi món đi vào và món ăn đi ra, theo một định dạng đã thống nhất. Cơ sở dữ liệu là kho hàng và sổ gọi món.

Khách hàng có thể viết lại phiếu gọi món của mình (frontend nằm trong tầm kiểm soát của họ), nhưng bếp vẫn quyết định sẽ nấu gì và tính giá bao nhiêu. Đó là lý do các kiểm tra quan trọng phải nằm ở phía sau.

Mỗi bên làm gì

Một số framework làm mờ ranh giới này. Ví dụ, Next.js cho phép một dự án chứa cả mã chạy trên trình duyệt lẫn mã chạy trên máy chủ. Ý tưởng vẫn như vậy: câu hỏi luôn là phần này chạy ở đâu?

Ví dụ thực tế: đặt lịch một lớp học

Đây là những gì xảy ra khi có người đặt một lớp yoga, từng bước một.

Hãy để ý bước 4 và bước 6: dữ liệu nhập vào được kiểm tra hai lần. Kiểm tra ở frontend cho phản hồi tức thì; kiểm tra ở backend mới là kiểm tra thực sự có giá trị, vì một người dùng quyết tâm có thể bỏ qua hoàn toàn frontend.

Giải thích các thuật ngữ thường gặp

Ứng dụng của bạn có cần backend không?

Những sai lầm và hiểu nhầm thường gặp

• Đặt khóa bí mật trong frontend. Khóa sẽ hiển thị với bất kỳ ai mở công cụ dành cho nhà phát triển của trình duyệt. Đây là sai lầm nghiêm trọng phổ biến nhất trong các ứng dụng xây bằng AI.
• Chỉ thực thi quy tắc ở frontend. Ẩn nút "xóa" với người không phải quản trị viên không phải là bảo vệ; backend phải từ chối yêu cầu.
• Cho rằng backend "chỉ là cơ sở dữ liệu". Cơ sở dữ liệu chỉ lưu dữ liệu. Backend quyết định ai được đọc và thay đổi dữ liệu, và bằng cách nào.
• Nghĩ JavaScript đồng nghĩa với frontend. JavaScript và TypeScript cũng chạy trên máy chủ với Node.js.
• Đổ lỗi nhầm phần. Nếu trang trông đúng nhưng dữ liệu sai, vấn đề thường nằm ở backend hoặc cơ sở dữ liệu, không phải ở thiết kế.
• Xây dựng quá mức. Một portfolio không cần backend tùy chỉnh. Thêm vào chỉ làm tăng chi phí và số bộ phận phải vận hành.

Nên yêu cầu công cụ xây dựng bằng AI của bạn điều gì

• "Phần nào của ứng dụng này chạy trong trình duyệt và phần nào chạy trên máy chủ?"
• "Chuyển mọi khóa API về backend và đọc chúng từ biến môi trường."
• "Kiểm tra mọi biểu mẫu trên máy chủ, không chỉ trong trình duyệt."
• "Đảm bảo ở backend rằng chỉ quản trị viên mới được xóa lịch đặt."
• "Trang trông ổn nhưng dữ liệu không được lưu — hãy kiểm tra nhật ký backend cho yêu cầu đó."
• "Đây là một trang giới thiệu đơn giản; giữ nó chỉ có frontend trừ khi chúng ta cần backend."

Frontend và backend trong Mythex

Một dự án Mythex mới bắt đầu từ frontend Vite, React, TypeScript và Tailwind, và agent sẽ thêm backend khi ứng dụng của bạn cần đến. Hoặc bạn có thể yêu cầu một API riêng bằng Node, Python (FastAPI), C# hay Java chạy song song với frontend trong cùng dự án. Trong phần xem trước, bạn có thể chuyển đổi giữa trang web và máy chủ API, và khi xuất bản, cả hai đều được triển khai, cùng với cơ sở dữ liệu và lưu trữ tệp khi cần. Tài liệu hướng dẫn về ứng dụng nhiều dịch vụ, hướng dẫn lưu trữ web giải thích mỗi phần chạy ở đâu khi đã đưa lên mạng, và các mẫu ứng dụng là cách nhanh để xem các ví dụ full-stack.

Câu hỏi thường gặp