WIP branch: history-state
Currently, when traversing the history in an Inertia app, each page is reloaded. Meaning, a new Inertia request is made to the endpoint, and then the page is shown.
One one hand this is nice, since you always get the current, most up-to-date content. However, it's not really how the web works by default. When you traverse history in a standard server-side rendered app, you see the previously loaded from cache. It's not reloaded. To do that you have to hit refresh.
Further, since each page is being reloaded via ajax, there is a delay while waiting for those requests. Generally this isn't an issue, but on iOS it definitely is (see #5).
I want to revisit caching each page visit in history state. One one hand this easy. After each Inertia visit, we simply grab the response and put it into history. The problem is when changes are made to the page. Those state changes not saved, since they happen after we've already updated the history state. Ideally we'd update the history state before navigating away, but this isn't really possible, since we don't have insight into the internal, local state of the page component. All we have is the response data (props).
One idea I am considering is a way to manually update the history state when the component state changes. For example, consider an edit organization page that has a form containing all the fields. We could setup a watcher to catch state changes:
watch: {
form: {
handler: () => Inertia.state('organization', this.form),
deep: true,
},
},
Basically you just give Inertia.state()
a key/value pair that automatically replaces (merges?) the current page history state.
Alternatively, it would be cool to attach this directly to the page component data. Something like this:
data() {
return {
form: Inertia.state('organization', {
name: this.organization.name,
email: this.organization.email,
phone: this.organization.phone,
address: this.organization.address,
city: this.organization.city,
region: this.organization.region,
country: this.organization.country,
postal_code: this.organization.postal_code,
}),
}
},
Not really sure if that's possible, while keeping everything reactive, but I think it's worth exploring. The key with Inertia.state()
is that it wouldn't return state from that function call, it would just update the history state. That history state would be automatically "applied" to the page component as a prop when it's reloaded (during a history visit).