We’re excited to announce the stable release of Inertia 2.0, bringing significant improvements to how you build software with Laravel. This release is part of our continued investment in making the frontend development experience with Laravel as productive and enjoyable as possible.
New features in Inertia 2.0 include async requests, deferred props, prefetching, polling. Follow this guide to upgrade. For a quick overview, check out Josh Cirre’s 3 minute video walk through.
Inertia was created so backend developers can easily use popular frontend frameworks such as React, Vue, and Svelte without needing to build an API. Inertia acts as a bridge between your server-side application and your JavaScript frontend, enabling you to build single-page applications while still enjoying Laravel’s robust server-side routing and ORM.
What’s New in Inertia 2.0
At the core of Inertia 2.0 is a completely rewritten request handling layer that enables asynchronous requests. This foundational change unlocks several powerful new features while maintaining Inertia’s seamless integration between Laravel backends and the frontend frameworks React, Vue, and Svelte.
Asynchronous Requests
Previously, all Inertia requests were synchronous. With 2.0, you now have full support for asynchronous operations, opening new possibilities for building responsive interfaces.
The new async request system allows multiple requests to happen simultaneously without canceling each other. For example, the existing reload method is now async by default, providing a more fluid user experience, especially when dealing with background data updates or form submissions.
// Disables progress indicator
// Doesn’t cancel other outgoing requests
router.reload({ only: ['users'] })
Async requests enable features like lazy loading via the WhenVisible component, which optimizes initial page load times by deferring data fetching until components are actually visible to the user.
Deferred Props
Load non-critical data after the initial page render, reducing time to first byte in your applications, improving Core Web Vitals like Largest Contentful Paint. Applications with the following attributes will especially benefit:
- Pages with expensive database queries
- Sections requiring external API calls
- Large data sets that aren’t immediately visible
- Components consuming multiple data sources
Prefetching
Prefetch data for pages that are likely to be visited next. This can be useful for improving the perceived performance of your app by allowing the data to be fetched in the background while the user is still interacting with the current page.
- Hover prefetching: Pages are prefetched when users hover over links, making them load instantly when clicked
- Mount prefetching: Pages can be prefetched as soon as the original page loads
- Stale-while-revalidate pattern: Pages can be served instantly from cache and then gracefully updated with fresh data in the background
Polling
Keep your UI in sync with server state using the new polling helpers. The usePoll helper makes it simple to implement automatic data refreshing with smart features like:
- Automatic start/stop when components mount/unmount
- Throttling when browser tabs are inactive
- Manual polling control with start/stop callbacks
- Configurable polling intervals
Getting Started
We’ve made upgrading as smooth as possible with virtually no breaking changes between Inertia 1.x and 2.0.
Check out our Upgrade Guide for detailed information about these new features and how to implement them in your app.
What’s Next
This release is just the beginning. We’re already working on Inertia 2.1, which will introduce infinite scrolling capabilities and other exciting features. Stay tuned for more updates.
Feedback on our docs, 2.0, or anything else Inertia? Let us know at @laravelphp & @inertiajs. For peer support, join the Laravel Discord and post in #help.
The post Announcing Inertia 2.0: Redefining Frontend Development for Laravel appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest
Laravel articles like this directly in your inbox.
Source: Read MoreÂ
