Sử dụng các công cụ bạn yêu thích
Với Inertia, bạn xây dựng ứng dụng theo đúng cách quen thuộc với framework web phía máy chủ mà mình lựa chọn. Bạn tiếp tục sử dụng các chức năng sẵn có của framework cho routing, controller, middleware, xác thực, phân quyền, truy xuất dữ liệu và nhiều tác vụ khác. Tuy nhiên, Inertia thay thế view layer của ứng dụng. Thay vì server-side rendering bằng template PHP hoặc Ruby, các view mà ứng dụng trả về là JavaScript page component. Nhờ đó bạn có thể xây dựng toàn bộ frontend bằng React, Vue hoặc Svelte mà vẫn tận dụng năng suất của Laravel hay server-side framework bạn ưa thích.Chặn request
Như bạn có thể hình dung, chỉ chuyển frontend sang JavaScript chưa đủ để tạo trải nghiệm single-page application. Nếu bấm một link, trình duyệt vẫn thực hiện full-page visit, khiến client-side framework phải khởi động lại ở lần tải trang tiếp theo. Đây chính là điểm Inertia thay đổi mọi thứ. Về cốt lõi, Inertia về cơ bản là một thư viện routing phía client. Nó cho phép bạn chuyển trang mà không buộc trình duyệt tải lại toàn bộ trang. Điều này được thực hiện thông qua component<Link>, một lớp bọc nhẹ quanh liên kết anchor thông thường. Khi bạn nhấp vào một liên kết Inertia, Inertia sẽ chặn sự kiện nhấp và thực hiện lần truy cập qua XHR. Bạn cũng có thể chủ động thực hiện các lần truy cập này bằng JavaScript thông qua router.visit().
Khi Inertia thực hiện một lần truy cập XHR, máy chủ nhận biết đây là request của Inertia và thay vì trả về một response HTML đầy đủ, nó trả về response JSON chứa tên page component JavaScript cùng dữ liệu (props). Sau đó Inertia sẽ thay thế động page component trước đó bằng page component mới và cập nhật history state của trình duyệt.
Kết quả cuối cùng là trải nghiệm ứng dụng một trang mượt mà.
Để tìm hiểu các chi tiết kỹ thuật sâu hơn về cách Inertia hoạt động bên dưới, hãy xem trang protocol.