Ứng Dụng Javascript Theo Cách Nguyên Khối
Inertia cho phép bạn tạo các ứng dụng một trang, được hiển thị hoàn toàn từ phía client side mà không có nhiều sự phức tạp đi kèm với các SPA hiện đại. Nó thực hiện điều này bằng cách tận dụng các khuôn khổ phía server side hiện có.
Inertia không có định tuyến phía client side, cũng như không yêu cầu API. Đơn giản chỉ cần xây dựng Controller và Views như bạn đã luôn làm!
Inertia Không Phải Là Framework
Inertia không phải là một framework, cũng không phải là một sự thay thế cho các framwork client side hoặc server side hiện có của bạn. Đúng hơn, nó được thiết kế để làm việc với chúng. Hãy coi Inertia như chất keo kết nối 2 phần đó với nhau. Inertia thực hiện điều này thông qua bộ điều hợp (adapters). Hiện có ba bộ điều hợp phía client side (React, Vue và Svelte) và hai bộ điều hợp phía server side (Laravel và Rails).
Inertia.js Dành Cho Ai?
Inertia được thiết kế cho các nhóm phát triển, những người thường xây dựng các ứng dụng được kết xuất phía server side bằng cách sử dụng các khung như Laravel, Ruby on Rails hoặc Django. Họ tạo bộ điều khiển, lấy dữ liệu từ cơ sở dữ liệu (thông qua ORM) và hiển thị các khung nhìn.
Nhưng điều gì sẽ xảy ra khi các nhà phát triển này muốn thay thế các chế độ xem được hiển thị phía server side của họ bằng giao diện người dùng ứng dụng một trang dựa trên JavaScript hiện đại? Câu trả lời luôn là “bạn cần xây dựng một API”. Bởi vì đó là cách các SPA hiện đại được xây dựng.
Điều này có nghĩa là xây dựng API REST hoặc GraphQL. Nó có nghĩa là tìm ra xác thực cho API đó. Nó có nghĩa là quản lý trạng thái phía máy khách. Nó có nghĩa là thiết lập một repo Git mới. Nó có nghĩa là thiết lập một tài khoản lưu trữ khác cho API. Và danh sách này vẫn tiếp tục. Đó là một sự thay đổi hoàn toàn về mô hình.
Inertia cho phép bạn xây dựng một ứng dụng trang đơn hoàn toàn dựa trên JavaScript mà không có tất cả sự phức tạp tăng thêm này.
Inertia hoạt động giống như một ứng dụng được kết xuất phía máy chủ cổ điển hơn. Bạn tạo bộ điều khiển, bạn lấy dữ liệu từ cơ sở dữ liệu (thông qua ORM của bạn) và bạn hiển thị các dạng xem. Ngoại trừ các chế độ xem ở đây là các thành phần trang JavaScript. Có nghĩa là bạn nhận được tất cả sức mạnh của ứng dụng phía client side và trải nghiệm SPA, nhưng bạn không cần phải xây dựng một API.
Sự đơn giản này tạo ra sự kết hợp chặt chẽ giữa back-end và front-end, nhưng đó đã là một thực tiễn được chấp nhận (và được cho là một lợi ích) khi xây dựng các ứng dụng được kết xuất phía server side cổ điển.
Làm Thế Nào Nó Hoạt Động?
Với Inertia, bạn xây dựng các ứng dụng giống như bạn đã luôn làm với khung web phía server side mà bạn lựa chọn. Bạn sử dụng chức năng hiện có của khuôn khổ để định tuyến, bộ điều khiển, phần mềm trung gian, xác thực, ủy quyền, tìm nạp dữ liệu, v.v.
Điều duy nhất khác biệt là lớp Views của bạn. Thay vì sử dụng kết xuất phía máy chủ (ví dụ: mẫu Blade hoặc ERB), các chế độ xem là các thành phần trang JavaScript. Điều này cho phép bạn xây dựng toàn bộ giao diện người dùng của mình bằng cách sử dụng React, Vue hoặc Svelte.
Nhưng chỉ tạo giao diện người dùng của bạn trong JavaScript không mang lại cho bạn trải nghiệm ứng dụng một trang. Nếu bạn nhấp vào một liên kết, trình duyệt của bạn sẽ thực hiện một lượt truy cập trang đầy đủ, điều này sau đó sẽ khiến khuôn khổ phía client side của bạn khởi động lại khi tải trang tiếp theo. Đây là nơi mà Inertia xuất hiện.
Về cơ bản, Inertia là một thư viện định tuyến phía máy khách. Nó cho phép bạn thực hiện các lượt truy cập trang mà không buộc phải tải lại toàn bộ trang. Điều này được thực hiện bằng cách sử dụng thành phần , một trình bao bọc nhẹ xung quanh một liên kết neo thông thường. Khi bạn nhấp vào liên kết Inertia, Inertia sẽ chặn lần nhấp và thay vào đó, thực hiện lượt truy cập qua XHR. Đáng chú ý, bạn cũng có thể thực hiện các lượt truy cập này theo chương trình trong JavaScript bằng Inertia.visit().
Khi Inertia thực hiện một lượt truy cập XHR, máy chủ sẽ phát hiện rằng đó là lượt truy cập Inertia và thay vì trả về phản hồi HTML đầy đủ, nó sẽ trả về phản hồi JSON với tên thành phần trang JavaScript và dữ liệu. Sau đó, Inertia sẽ tự động hoán đổi thành phần trang trước với thành phần trang mới và cập nhật trạng thái lịch sử.