Merge pull request #5 from skryukov/update-the-protocol

Add Request Lifecycle Diagram

Author: joetannenbaum

images/checks-passed.png

@@ -49,6 +49,26 @@ When the server detects the `X-Inertia` header, instead of responding with a ful
 }
 ```
 
+## Request Lifecycle Diagram
+
+The diagram below illustrates the request lifecycle within an Inertia application. The initial visit generates a standard request to the server, which returns an HTML application skeleton containing a root element with hydrated data. For subsequent user interactions and navigation, Inertia sends XHR requests that return JSON data. Inertia uses this response to dynamically hydrate and swap the page component without a full page reload.
+
+```mermaid
+sequenceDiagram
+    participant Client
+    participant Server
+
+    Client->>Server: First Visit
+    Server-->>Client: Returns HTML Skeleton
+
+    Note over Client: Inertia.js is loaded
+
+    Client->>Server: Inertia Request (X-Inertia: true)
+    Server-->>Client: Returns JSON Payload (Component Name, Props, etc.)
+
+    Note over Client: Inertia.js swaps components
+```
+
 ## Request Headers
 
 The following headers are automatically sent by Inertia when making requests. You don't need to set these manually, they're handled by the Inertia client-side adapter.