HTML Responses
Request đầu tiên với ứng dụng Inertia chỉ là một yêu cầu trình duyệt toàn trang thông thường, không có tiêu đề hoặc dữ liệu Inertia đặc biệt. Đối với những yêu cầu này, máy chủ trả về một tài liệu HTML đầy đủ.
Phản hồi HTML này bao gồm các nội dung trang web (CSS, JavaScript) cũng như root <div> trong <body>. root <div> đóng vai trò là điểm gắn kết cho ứng dụng phía client side và bao gồm thuộc tính trang dữ liệu với đối tượng trang được mã hóa JSON cho trang đầu tiên. Inertia sử dụng thông tin này để khởi động khuôn khổ phía client side của bạn và hiển thị thành phần trang ban đầu.
REQUEST
GET: http://example.com/events/80
Accept: text/html, application/xhtml+xml
RESPONSE
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<html>
<head>
<title>My app</title>
<link href="/css/app.css" rel="stylesheet">
<script src="/js/app.js" defer></script>
</head>
<body>
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan's 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
</body>
</html>Inertia Responses
Khi ứng dụng Inertia đã được khởi động, tất cả các yêu cầu tiếp theo tới trang web được thực hiện qua XHR với tiêu đề X-Inertia đặc biệt được đặt thành true. Tiêu đề này cho biết rằng yêu cầu đang được thực hiện bởi Inertia và không phải là một lượt truy cập toàn trang tiêu chuẩn.
Khi máy chủ phát hiện tiêu đề X-Inertia, thay vì phản hồi bằng HTML đầy đủ, nó sẽ trả về phản hồi JSON với đối tượng trang được mã hóa.
REQUEST
GET: http://example.com/events/80
Accept: text/html, application/xhtml+xml
X-Requested-With: XMLHttpRequest
X-Inertia: true
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
RESPONSE
HTTP/1.1 200 OK
Content-Type: application/json
Vary: Accept
X-Inertia: true
{
"component": "Event",
"props": {
"event": {
"id": 80,
"title": "Birthday party",
"start_date": "2019-06-02",
"description": "Come out and celebrate Jonathan's 36th birthday party!"
}
},
"url": "/events/80",
"version": "c32b8e4965f418ad16eaebba1d4e960f"
}The Page Object
Inertia chia sẻ dữ liệu giữa server side và client side thông qua một đối tượng trang (Page). Đối tượng này bao gồm thông tin cần thiết được yêu cầu để hiển thị thành phần trang, cập nhật trạng thái lịch sử và theo dõi phiên bản nội dung của trang web. Đối tượng trang bao gồm bốn thuộc tính sau:
- Component: Tên của thành phần trang JavaScript.
- props: props của trang (dữ liệu).
- url: Url của trang.
- Phiên bản: Phiên bản nội dung hiện tại.
Trên các lượt truy cập trang đầy đủ tiêu chuẩn, đối tượng trang được mã hóa JSON thành thuộc tính data-page trong gốc. Trong các lượt truy cập theo Inertia, đối tượng trang được trả về dưới dạng JSON payload.
Asset Versioning
Một thách thức phổ biến với các SPA là làm mới nội dung trang web khi chúng đã được thay đổi. Inertia làm cho việc này trở nên dễ dàng bằng cách tùy chọn theo dõi phiên bản hiện tại của nội dung trang web. Trong trường hợp nội dung thay đổi, Inertia sẽ tự động thực hiện lượt truy cập trang cố định (toàn bộ) thay vì lượt truy cập XHR.
Bao gồm trong Page Object là một số nhận dạng phiên bản. Giá trị nhận dạng phiên bản này được đặt phía server side và có thể là một số, chuỗi, băm tệp, bất cứ thứ gì. Nó không quan trọng, miễn là nó thay đổi khi nội dung của trang web đã được cập nhật.
Bất cứ khi nào yêu cầu Inertia được thực hiện, Inertia sẽ bao gồm phiên bản nội dung hiện tại trong tiêu đề X-Inertia-Version. Khi máy chủ nhận được yêu cầu, nó sẽ so sánh phiên bản nội dung được cung cấp trong tiêu X-Inertia-Version với phiên bản nội dung hiện tại. Điều này thường được xử lý trong một lớp phần mềm trung gian.
Nếu các phiên bản nội dung giống nhau, yêu cầu chỉ tiếp tục như mong đợi. Tuy nhiên, nếu chúng khác nhau, máy chủ ngay lập tức trả về phản hồi Xung đột 409 và bao gồm URL trong tiêu đề X-Inertia-Location. Tiêu đề này là cần thiết, vì chuyển hướng phía máy chủ có thể đã xảy ra. Điều này cho Inertia biết URL đích cuối cùng dự định là gì.
Lưu ý, 409 Conflict chỉ được gửi cho các yêu cầu GET chứ không phải cho các yêu cầu POST / PUT / PATCH / DELETE. Điều đó nói rằng, chúng sẽ được gửi trong trường hợp chuyển hướng GET xảy ra sau một trong những yêu cầu này.
Cuối cùng, trong trường hợp dữ liệu phiên flash tồn tại khi phản hồi Xung đột 409 xảy ra, máy chủ sẽ tự động cập nhật lại dữ liệu này
REQUEST GET: http://example.com/events/80 Accept: text/html, application/xhtml+xml X-Requested-With: XMLHttpRequest X-Inertia: true X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 RESPONSE 409: Conflict X-Inertia-Location: http://example.com/events/80
Tải Lại Một Phần
Khi thực hiện các yêu cầu Inertia, tùy chọn tải lại một phần cho phép bạn yêu cầu một tập hợp con của các props (dữ liệu) từ máy chủ trong các lần truy cập tiếp theo vào cùng một thành phần trang. Đây có thể là một tối ưu hóa hiệu suất hữu ích nếu một số dữ liệu trang trở nên cũ có thể chấp nhận được.
Khi yêu cầu tải lại một phần được thực hiện, Inertia bao gồm hai tiêu đề bổ sung với yêu cầu: X-Inertia-Partial-Data và X-Inertia-Partial-Component.
Tiêu đề X-Inertia-Partial-Data là danh sách được phân tách bằng dấu phẩy gồm các props (dữ liệu) mong muốn sẽ được trả về.
Tiêu đề X-Inertia-Partial-Component bao gồm tên của thành phần (component) đang được tải lại một phần. Điều này là cần thiết, vì tải lại một phần chỉ hoạt động đối với các yêu cầu được thực hiện cho cùng một thành phần trang. Nếu đích cuối cùng khác vì bất kỳ lý do gì (ví dụ: người dùng đã đăng xuất và hiện đang ở trên trang đăng nhập), thì sẽ không có tải lại một phần nào.
REQUEST
GET: http://example.com/events
Accept: text/html, application/xhtml+xml
X-Requested-With: XMLHttpRequest
X-Inertia: true
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
X-Inertia-Partial-Data: events
X-Inertia-Partial-Component: Events
RESPONSE
HTTP/1.1 200 OK
Content-Type: application/json
{
"component": "Events",
"props": {
"auth": {...}, // NOT included
"categories": [...], // NOT included
"events": [...] // included
},
"url": "/events/80",
"version": "c32b8e4965f418ad16eaebba1d4e960f"
}