Building Fast SPAs with Inertia.js React and Wayfinder

The Power of Inertia.js v3

Inertia.js allows you to build single-page React applications using classic server-side routing and controllers. With version 3, we gain instant visits, prefetching, and layout props.

Type-Safe Routing with Laravel Wayfinder

Hardcoded URLs such as href="/courses/42/lessons/5" are brittle. Laravel Wayfinder scans your routes and generates typed functions:

import { show } from '@/actions/App/Http/Controllers/LessonController';
import { Link } from '@inertiajs/react';

export function LessonCard({ courseId, lessonId }) {
    return (
        <Link href={show.url({ course: courseId, lesson: lessonId })} prefetch>
            Continue Lesson
        </Link>
    );
}

Optimistic Updates and Flash States

Inertia v3 supports instant visits and deferred props for heavy sections. Combine this with Shadcn UI skeletons for seamless loading states!