Some info might be different, but this is what I learnt.
InertiaJS need both a server-side adapter as well as a client-side adapter.
On server routes & controllers is needed. It also includes setting up a root template and updating your endpoints to return Inertia responses.
On server if we use Laravel, it already provides routes, controller & views.
So it fits the requirements of InertiaJS, and they also have existing adapter for it: https://github.com/inertiajs/inertia-laravel
InertiaJS expects HTML response on first page load, which is similar to this markup (Root Template):
All subsequent request to the site are made via XHR with a special X-Inertia header set to true.
And expects JSON response such as (Route Endpoint which returns JSON response):
For WP we have to have our own router (if we use http browsering), if we use WP Rest API, it already provides routes capability.
Docs Note:
The page object
Inertia shares data between the server and client via a page object. This object includes the necessary information required to render the page component, update the history state, and track the site's asset version. The page object includes the following four properties:
**component**: The name of the JavaScript page component.
**props**: The page props (data).
**url**: The page url.
**version**: The current asset version.
On standard full page visits, the page object is JSON encoded into the data-page attribute in the root <div>. On Inertia visits, the page object is returned as the JSON payload.
If we are to not use this approach or modify it, we have to override setPage method of inertia and provide our own implementation.
Key methods:
resolveComponentupdatePageupdatePage
ReactJS adapter can be converted to WebComponents, not sure literally or not, as WebComponent can provide Component element, which receives page.props, also update page using updatePage method etc.
Laravel can be avoided by using WP Rest API if not, then will have to utilize Routes Library for WP. Serving required data from WP is not complex problem. But doing it correct to avoid incompatibilities can be tricky.
My assessment it can be done, but I don't have relevant skills to implement it on time & budget.
Some info might be different, but this is what I learnt.
InertiaJS need both a server-side adapter as well as a client-side adapter.
On server routes & controllers is needed. It also includes setting up a root template and updating your endpoints to return Inertia responses.
On server if we use Laravel, it already provides routes, controller & views. So it fits the requirements of InertiaJS, and they also have existing adapter for it: https://github.com/inertiajs/inertia-laravel
InertiaJS expects HTML response on first page load, which is similar to this markup (Root Template):
All subsequent request to the site are made via XHR with a special X-Inertia header set to true. And expects JSON response such as (Route Endpoint which returns JSON response):
For WP we have to have our own router (if we use http browsering), if we use WP Rest API, it already provides routes capability.
Docs Note:
Here are couple of WP Routes related packages: https://github.com/Brain-WP/Cortex/ https://github.com/Upstatement/routes https://github.com/lucatume/wp-routes
More info regarding routes: https://developer.wordpress.org/rest-api/extending-the-rest-api/routes-and-endpoints/ https://carlalexander.ca/designing-system-wordpress-routing/
https://sebastiandedeyne.com/handling-routes-in-a-laravel-inertia-application/
WordPress part of it is not blocking issue, where InertiaJS is. As by default it works on the premise of:
1) First page load (html response) 2) Subsequent pages (JSON response)
Html response as above snippet also have data-page attributes which also holds JSON object.
Which InertiaJS takes and pass onto Component (it can be ReactJS, ViewJS or Svelte Component).
resolveComponent executes here https://github.com/inertiajs/inertia/blob/f09716e4d783c9f5ef2682d8c0d32f8977bce892/src/inertia.js#L118
once resolved, it passes said executed component and passes page.props to component: https://github.com/inertiajs/inertia/blob/master/src/inertia.js#L122
If we are to not use this approach or modify it, we have to override setPage method of inertia and provide our own implementation.
Key methods: resolveComponent updatePage updatePage
ReactJS adapter can be converted to WebComponents, not sure literally or not, as WebComponent can provide Component element, which receives page.props, also update page using updatePage method etc. Laravel can be avoided by using WP Rest API if not, then will have to utilize Routes Library for WP. Serving required data from WP is not complex problem. But doing it correct to avoid incompatibilities can be tricky.
My assessment it can be done, but I don't have relevant skills to implement it on time & budget.