DOCSEARCHbyAlgolia
Submit Docs

Inertia.js Documentation

website·Indexed 39 days ago

https://inertiajs.com/

Documentation for Inertia.js, a framework for building modern single-page apps using classic server-side routing. Covers versions v1, v2, and v3, including core concepts, installation, server-side rendering, and integration with Vue, React, and Svelte.

Tokens
72.5K
Snippets
444
Records
528
Agent score
73%

What's inside Inertia.js

  1. Overview of Inertia.js core features

    Inertia.js enables the creation of modern single-page applications (SPAs) while keeping routing, controllers, middleware, authentication, and data fetching on the backend. It acts as a bridge between the server and the frontend, allowing developers to use traditional server-side routing without the complexity of building a separate REST or GraphQL API.

  2. Overview of Inertia.js testing strategies

    v3

    Depending on the goal, there are three primary ways to test an Inertia application:

    1. End-to-End (E2E) Tests: Use browser automation tools like Cypress or Pest to simulate real user interactions. These test the full stack, including JavaScript execution in the browser.
    2. Client-Side Unit Tests: Use frameworks like Vitest, Jest, or Mocha to test JavaScript page components in isolation using Node.js.
    3. Endpoint Tests: Test the server-side Inertia responses by making HTTP requests and asserting the returned data structure and component names.

  3. Overview of Inertia.js Server-Side Rendering (SSR)

    v3
    Server-side rendering pre-renders JavaScript pages on the server to provide fully rendered HTML to visitors, improving SEO and initial load performance. SSR requires Node.js 22 or higher to be installed on the server to run the rendering process in the background.

  4. Overview of Inertia.js

    v3
    Inertia.js is a tool for building classic server-driven web applications as 'modern monoliths'. It enables the creation of client-side-rendered single-page apps (SPAs) without the need for client-side routing or a dedicated API. Instead, it leverages existing server-side patterns (controllers and page views) to connect the backend and frontend.

  5. Overview of Inertia.js and its core value proposition

    v2
    Inertia.js allows developers to build modern, JavaScript-based single-page applications (SPAs) using a classic server-side rendered development workflow. Instead of building a separate REST or GraphQL API and managing client-side state, authentication, and complex deployment strategies, Inertia allows you to continue using server-side controllers and ORMs to retrieve data and render views. The key difference is that Inertia views are JavaScript page components written in React, Vue, or Svelte, providing a full SPA experience without the overhead of a decoupled API architecture.

  6. Overview of new features in Inertia.js v2.0

    v2

    Inertia.js v2.0 introduces several new features enabled by a rewritten core that supports asynchronous requests:

    • Polling: Automatically poll the server at specified intervals to keep data fresh.
    • Prefetching: Prefetch data for links when they become visible to speed up navigation.
    • Deferred props: Improve performance by loading non-essential data after the initial page load.
    • Infinite scrolling: Load more data seamlessly as the user scrolls.
    • Lazy loading data on scroll: Load data only when it enters the viewport.
    • History encryption: Clear page data from browser history state during logout.

  7. Overview of Inertia.js

    v1
    Inertia.js is a tool for building 'modern monoliths'—classic server-driven web applications that behave like fully client-side rendered single-page apps (SPAs). Unlike traditional SPAs, Inertia does not require client-side routing or a dedicated API; instead, it leverages existing server-side patterns (controllers and page views). It acts as 'glue' connecting server-side frameworks to client-side frameworks via adapters.

  8. Overview of Inertia.js testing strategies

    v2

    There are three primary approaches to testing an Inertia application:

    1. End-to-End (E2E) Tests: Use browser automation tools like Cypress or Pest to simulate real user interactions. These test the full stack, including JavaScript execution in the browser.
    2. Client-Side Unit Tests: Use frameworks like Vitest, Jest, or Mocha to test JavaScript page components in isolation using Node.js.
    3. Endpoint Tests: Test the server-side Inertia responses by making HTTP requests and asserting the returned data. For Laravel users, Inertia provides a specialized adapter for these tests.

  9. Route directly to a component using Route::inertia()

    v3
    For pages that do not require a controller method (such as 'About' or 'FAQ' pages), you can use the Route::inertia() method to route directly to a specific component.
    Route::inertia('/about', 'About');

  10. Handle server-side errors in Inertia.js development

    v1
    In local development, Inertia.js automatically intercepts non-Inertia responses (such as server-side exceptions) and displays them in a modal. This allows developers to see formatted stack traces (e.g., from Laravel Ignition) without needing to manually inspect the browser's network tab for XHR request failures.

  11. Prevent privileged data exposure using Inertia history encryption

    v2
    Inertia.js provides history encryption to prevent users from seeing privileged information when using the browser's back button after logging out. It uses the browser's Web Crypto API to encrypt page data before pushing it to the history state, storing the key in session storage. This feature requires a secure environment (SSL enabled) as it relies on window.crypto.subtle.

  12. Understand the Inertia.js architecture

    v2
    Inertia.js acts as a replacement for the view layer of server-side web frameworks (like Laravel). Instead of using server-side templates (e.g., PHP or Ruby), the server returns JavaScript page components. This allows developers to use React, Vue, or Svelte for the frontend while continuing to use the server-side framework for routing, controllers, middleware, authentication, and data fetching.