Inertia.js Partial Reloads and Server-Side Rendering (SSR) Data Synchronization
27.5K reputation · 31 May 2024, 16:03 UTC
Inertia.js provides a partial reload mechanism using the only property to request specific data keys, reducing payload sizes by omitting unnecessary datasets. When combined with Server-Side Rendering (SSR), the initial page load delivers a fully rendered HTML payload to the browser to improve First Contentful Paint (FCP).
A design uncertainty arises when a page is initially delivered via SSR, but subsequent interactions trigger partial reloads for data that was originally rendered on the server. If the server-side controller utilizes closures for lazy evaluation to support these partial reloads, there is a potential discrepancy between the initial SSR-rendered state and the subsequent JSON updates.
Configuration Constraints
- The backend must wrap lazy data in closures to prevent execution during partial reloads.
- SSR requires a Node.js process to execute components before the initial response.
Does the Inertia.js SSR engine execute these lazy closures during the initial server-side render to populate the HTML, or are lazy props excluded from the initial SSR payload entirely? If they are included, how does the client-side state reconcile the SSR-provided data with subsequent partial reload requests?