# Inertia.js

Inertia.js is a modern framework that allows you to build single-page applications (SPAs) using classic server-side routing and controllers. It eliminates the need for a separate API by allowing your server-side framework (Laravel, Rails, etc.) to render pages as JavaScript components (React, Vue, or Svelte) while maintaining the benefits of server-side routing, controllers, and middleware.

The library provides a seamless bridge between server-side and client-side code, offering features like automatic page transitions, form handling with validation, prefetching, polling, infinite scroll, and deferred props loading. It supports React, Vue 3, and Svelte adapters, each providing framework-specific components and hooks that integrate naturally with the respective ecosystem.

## Core API

### createInertiaApp - Application Bootstrap

The `createInertiaApp` function initializes an Inertia application, setting up component resolution, page rendering, and optional progress indicators. It handles both client-side rendering (CSR) and server-side rendering (SSR) configurations.

```tsx
// React CSR Setup (main.tsx)
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
    return pages[`./Pages/${name}.tsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
  progress: {
    delay: 250,
    color: '#29d',
    includeCSS: true,
    showSpinner: false,
  },
  defaults: {
    form: {
      recentlySuccessfulDuration: 2000,
    },
    prefetch: {
      cacheFor: '30s',
      hoverDelay: 75,
    },
  },
})

// React SSR Setup (ssr.tsx)
import { createInertiaApp } from '@inertiajs/react'
import { renderToString } from 'react-dom/server'

export default function render(page) {
  return createInertiaApp({
    page,
    render: renderToString,
    resolve: (name) => {
      const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
      return pages[`./Pages/${name}.tsx`]
    },
    setup({ App, props }) {
      return <App {...props} />
    },
  })
}
```

### router - Navigation and Visits

The `router` object provides methods for programmatic navigation, including `visit`, `get`, `post`, `put`, `patch`, `delete`, `reload`, and `prefetch`. It manages page transitions, history, and request lifecycle events.

```tsx
import { router } from '@inertiajs/react'

// Basic navigation
router.visit('/users', {
  method: 'get',
  data: { search: 'john' },
  preserveState: true,
  preserveScroll: true,
  only: ['users'], // Partial reload - only fetch 'users' prop
  except: ['notifications'], // Exclude specific props
  replace: true, // Replace history entry
  headers: { 'X-Custom-Header': 'value' },
  onBefore: (visit) => confirm('Navigate away?'),
  onStart: (visit) => console.log('Starting...'),
  onProgress: (progress) => console.log(`${progress.percentage}%`),
  onSuccess: (page) => console.log('Success!', page),
  onError: (errors) => console.error('Errors:', errors),
  onCancel: () => console.log('Cancelled'),
  onFinish: (visit) => console.log('Finished'),
})

// HTTP method shortcuts
router.get('/users', { page: 1 })
router.post('/users', { name: 'John', email: 'john@example.com' })
router.put('/users/1', { name: 'John Updated' })
router.patch('/users/1', { status: 'active' })
router.delete('/users/1')

// Reload current page with specific props
router.reload({ only: ['notifications'] })

// Prefetch a page for faster navigation
router.prefetch('/dashboard', {}, { cacheFor: '5m', cacheTags: ['dashboard'] })

// Flush prefetch cache
router.flush('/dashboard')
router.flushAll()
router.flushByCacheTags(['dashboard'])

// Cancel in-flight requests
router.cancelAll({ async: true, prefetch: true, sync: true })

// History management
router.remember({ scroll: 100 }, 'scroll-position')
const saved = router.restore('scroll-position')
router.clearHistory()

// Client-side state manipulation
router.replace({ props: (current) => ({ ...current, count: current.count + 1 }) })
router.push({ url: '/new-url', props: { data: 'value' } })
router.replaceProp('user.name', 'New Name')
router.appendToProp('items', newItem)
router.prependToProp('items', newItem)

// Flash messages
router.flash('success', 'Operation completed!')
router.flash({ success: 'Saved!', error: null })

// Global event listeners
const removeListener = router.on('navigate', (event) => {
  console.log('Navigated to:', event.detail.page.url)
})
// Later: removeListener()

// Polling
const poll = router.poll(5000, { only: ['notifications'] }, { keepAlive: false })
poll.stop()
poll.start()
```

## React Components

### Link - Client-Side Navigation

The `Link` component creates links that perform client-side navigation without full page reloads. It supports prefetching, preserve options, and all standard anchor attributes.

```tsx
import { Link } from '@inertiajs/react'

function Navigation() {
  return (
    <nav>
      {/* Basic link */}
      <Link href="/dashboard">Dashboard</Link>

      {/* With query parameters */}
      <Link href="/users" data={{ search: 'john', page: 1 }}>
        Search Users
      </Link>

      {/* POST request link */}
      <Link href="/logout" method="post" as="button">
        Logout
      </Link>

      {/* Preserve scroll and state */}
      <Link
        href="/users/1"
        preserveScroll
        preserveState
        only={['user']}
      >
        View User
      </Link>

      {/* Prefetch on hover (default) */}
      <Link href="/about" prefetch>
        About (prefetched on hover)
      </Link>

      {/* Prefetch on mount with custom cache duration */}
      <Link href="/pricing" prefetch="mount" cacheFor="5m">
        Pricing
      </Link>

      {/* Prefetch on click for instant navigation */}
      <Link href="/contact" prefetch="click">
        Contact
      </Link>

      {/* Multiple prefetch strategies */}
      <Link href="/features" prefetch={['mount', 'hover']}>
        Features
      </Link>

      {/* With callbacks */}
      <Link
        href="/protected"
        onBefore={() => confirm('Are you sure?')}
        onStart={() => console.log('Loading...')}
        onSuccess={(page) => console.log('Loaded:', page.url)}
        onError={(errors) => alert('Error occurred')}
      >
        Protected Page
      </Link>

      {/* Async link (non-blocking) */}
      <Link href="/background-task" async>
        Run in Background
      </Link>

      {/* With View Transitions API */}
      <Link href="/animated" viewTransition>
        Animated Transition
      </Link>
    </nav>
  )
}
```

### useForm - Form State Management

The `useForm` hook provides comprehensive form state management with validation, error handling, progress tracking, and submission. It supports both standard Inertia forms and precognitive (real-time) validation.

```tsx
import { useForm } from '@inertiajs/react'

function CreateUserForm() {
  const form = useForm({
    name: '',
    email: '',
    password: '',
    avatar: null as File | null,
    roles: [] as string[],
  })

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    form.post('/users', {
      onSuccess: () => form.reset(),
      onError: (errors) => console.log('Validation errors:', errors),
      forceFormData: true, // Force FormData for file uploads
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={form.data.name}
        onChange={(e) => form.setData('name', e.target.value)}
      />
      {form.errors.name && <span className="error">{form.errors.name}</span>}

      <input
        type="email"
        value={form.data.email}
        onChange={(e) => form.setData('email', e.target.value)}
      />
      {form.errors.email && <span className="error">{form.errors.email}</span>}

      <input
        type="password"
        value={form.data.password}
        onChange={(e) => form.setData('password', e.target.value)}
      />

      <input
        type="file"
        onChange={(e) => form.setData('avatar', e.target.files?.[0] ?? null)}
      />

      {/* Progress indicator for file uploads */}
      {form.progress && (
        <progress value={form.progress.percentage} max="100" />
      )}

      <button type="submit" disabled={form.processing}>
        {form.processing ? 'Saving...' : 'Create User'}
      </button>

      {/* Status indicators */}
      {form.wasSuccessful && <span>Saved!</span>}
      {form.recentlySuccessful && <span>Just saved!</span>}
      {form.isDirty && <span>Unsaved changes</span>}
      {form.hasErrors && <span>Please fix errors</span>}

      <button type="button" onClick={() => form.reset()}>
        Reset
      </button>
      <button type="button" onClick={() => form.reset('name', 'email')}>
        Reset Name & Email
      </button>
      <button type="button" onClick={() => form.clearErrors()}>
        Clear Errors
      </button>
      <button type="button" onClick={() => form.cancel()}>
        Cancel Request
      </button>
    </form>
  )
}

// With remember key (persists form state across page visits)
function RememberedForm() {
  const form = useForm('create-user-form', {
    name: '',
    email: '',
  })

  // Exclude sensitive fields from being remembered
  form.dontRemember('password')

  return <form>{/* ... */}</form>
}

// With precognitive (real-time) validation
function PrecognitiveForm() {
  const form = useForm('post', '/users', {
    name: '',
    email: '',
  })
    .withPrecognition('post', '/users')
    .setValidationTimeout(500)
    .validateFiles()

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.submit() }}>
      <input
        value={form.data.name}
        onChange={(e) => form.setData('name', e.target.value)}
        onBlur={(e) => form.validate('name')}
      />
      {form.invalid('name') && <span>{form.errors.name}</span>}
      {form.valid('name') && <span>Valid!</span>}
      {form.validating && <span>Validating...</span>}

      <input
        value={form.data.email}
        onChange={(e) => form.setData('email', e.target.value)}
        onBlur={(e) => form.validate('email')}
      />
      {form.touched('email') && form.errors.email && (
        <span>{form.errors.email}</span>
      )}

      <button disabled={form.processing || form.validating}>
        Submit
      </button>
    </form>
  )
}

// Using transform to modify data before submission
function TransformExample() {
  const form = useForm({ date: new Date() })

  form.transform((data) => ({
    ...data,
    date: data.date.toISOString(),
  }))

  return <form>{/* ... */}</form>
}
```

### Form - Declarative Form Component

The `Form` component provides a declarative way to handle forms with automatic data collection from native form elements, built-in validation, and submission handling.

```tsx
import { Form, useFormContext } from '@inertiajs/react'

function ContactForm() {
  return (
    <Form
      action="/contact"
      method="post"
      resetOnSuccess
      setDefaultsOnSuccess
      disableWhileProcessing
      validateFiles
      validationTimeout={500}
    >
      {({ errors, processing, isDirty, wasSuccessful, validate, submit }) => (
        <>
          <input
            name="name"
            onBlur={(e) => validate('name')}
          />
          {errors.name && <span>{errors.name}</span>}

          <input
            name="email"
            type="email"
            onBlur={(e) => validate('email')}
          />
          {errors.email && <span>{errors.email}</span>}

          <textarea name="message" />
          {errors.message && <span>{errors.message}</span>}

          <button type="submit" disabled={processing}>
            {processing ? 'Sending...' : 'Send Message'}
          </button>

          {isDirty && <span>You have unsaved changes</span>}
          {wasSuccessful && <span>Message sent!</span>}
        </>
      )}
    </Form>
  )
}

// Access form context from child components
function SubmitButton() {
  const form = useFormContext()

  return (
    <button type="submit" disabled={form?.processing}>
      {form?.processing ? 'Processing...' : 'Submit'}
    </button>
  )
}

// With custom transform and callbacks
function AdvancedForm() {
  return (
    <Form
      action="/api/submit"
      method="post"
      transform={(data) => ({ ...data, timestamp: Date.now() })}
      options={{ preserveScroll: true }}
      onBefore={() => confirm('Submit form?')}
      onSuccess={(page) => console.log('Success!')}
      onError={(errors) => console.error('Errors:', errors)}
      onSubmitComplete={({ reset, defaults }) => {
        defaults() // Set current values as new defaults
      }}
      resetOnSuccess={['password']} // Only reset password field
    >
      {/* Form fields */}
    </Form>
  )
}
```

### Head - Document Head Management

The `Head` component manages the document's `<head>` section, allowing you to set titles, meta tags, and other head elements from any component in your application.

```tsx
import { Head } from '@inertiajs/react'

function UserProfile({ user }) {
  return (
    <>
      <Head>
        <title>{user.name} - Profile</title>
        <meta name="description" content={`Profile page for ${user.name}`} />
        <meta property="og:title" content={user.name} />
        <meta property="og:image" content={user.avatar} />
        <link rel="canonical" href={`https://example.com/users/${user.id}`} />
      </Head>

      <div>
        <h1>{user.name}</h1>
        {/* ... */}
      </div>
    </>
  )
}

// Simple title shorthand
function SimplePage() {
  return (
    <>
      <Head title="Dashboard" />
      <div>Dashboard content</div>
    </>
  )
}

// With head-key for deduplication
function Layout({ children }) {
  return (
    <>
      <Head>
        <meta head-key="theme-color" name="theme-color" content="#ffffff" />
      </Head>
      {children}
    </>
  )
}

// Child can override parent's head-key
function DarkPage() {
  return (
    <>
      <Head>
        <meta head-key="theme-color" name="theme-color" content="#000000" />
      </Head>
      <div>Dark themed page</div>
    </>
  )
}
```

### usePage - Access Page Props

The `usePage` hook provides access to the current page's props, component name, URL, and version information.

```tsx
import { usePage } from '@inertiajs/react'

interface PageProps {
  auth: {
    user: { id: number; name: string; email: string } | null
  }
  flash: {
    success?: string
    error?: string
  }
}

function Layout({ children }) {
  const { props, url, component } = usePage<PageProps>()

  return (
    <div>
      <nav>
        {props.auth.user ? (
          <span>Welcome, {props.auth.user.name}!</span>
        ) : (
          <Link href="/login">Login</Link>
        )}
      </nav>

      {props.flash.success && (
        <div className="alert success">{props.flash.success}</div>
      )}
      {props.flash.error && (
        <div className="alert error">{props.flash.error}</div>
      )}

      <main>{children}</main>

      <footer>
        <small>Current page: {component} | URL: {url}</small>
      </footer>
    </div>
  )
}
```

### Deferred - Lazy Loading Props

The `Deferred` component displays a fallback while waiting for deferred props to load from the server. This enables loading non-critical data after the initial page render.

```tsx
import { Deferred } from '@inertiajs/react'

function Dashboard({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>

      {/* Analytics data loads after initial render */}
      <Deferred data="analytics" fallback={<AnalyticsSkeleton />}>
        <AnalyticsWidget />
      </Deferred>

      {/* Multiple deferred props */}
      <Deferred
        data={['recentOrders', 'recommendations']}
        fallback={<LoadingSpinner />}
      >
        <OrdersAndRecommendations />
      </Deferred>

      {/* With render function */}
      <Deferred data="notifications" fallback={() => <p>Loading...</p>}>
        {() => <NotificationsList />}
      </Deferred>
    </div>
  )
}

// Server-side (Laravel example):
// return Inertia::render('Dashboard', [
//     'user' => $user,
//     'analytics' => Inertia::defer(fn () => $this->getAnalytics()),
//     'recentOrders' => Inertia::defer(fn () => $this->getOrders()),
// ]);
```

### WhenVisible - Load Data on Visibility

The `WhenVisible` component loads data when an element becomes visible in the viewport, perfect for lazy-loading content below the fold.

```tsx
import { WhenVisible } from '@inertiajs/react'

function ProductPage({ product }) {
  return (
    <div>
      <ProductDetails product={product} />

      {/* Load reviews when scrolled into view */}
      <WhenVisible
        data="reviews"
        fallback={<ReviewsSkeleton />}
        buffer={200} // Start loading 200px before visible
      >
        <ProductReviews />
      </WhenVisible>

      {/* With custom reload params */}
      <WhenVisible
        data={['relatedProducts', 'recommendations']}
        params={{ only: ['relatedProducts', 'recommendations'] }}
        fallback={<LoadingSpinner />}
      >
        <RelatedProductsSection />
      </WhenVisible>

      {/* Always reload when visible (for live data) */}
      <WhenVisible
        data="stockLevel"
        always
        fallback={<span>Checking stock...</span>}
      >
        {({ fetching }) => (
          <StockIndicator loading={fetching} />
        )}
      </WhenVisible>

      {/* Custom wrapper element */}
      <WhenVisible data="footer" as="footer" fallback={null}>
        <FooterContent />
      </WhenVisible>
    </div>
  )
}
```

### InfiniteScroll - Automatic Pagination

The `InfiniteScroll` component provides automatic or manual infinite scrolling for paginated data, handling loading states and scroll position preservation.

```tsx
import { InfiniteScroll } from '@inertiajs/react'

function PostsFeed({ posts }) {
  return (
    <InfiniteScroll
      data="posts"
      buffer={100}
      preserveUrl
    >
      {({ loading, loadingNext, loadingPrevious }) => (
        <>
          {posts.data.map((post) => (
            <PostCard key={post.id} post={post} />
          ))}
          {loading && <LoadingSpinner />}
        </>
      )}
    </InfiniteScroll>
  )
}

// Manual loading with custom buttons
function ManualPagination({ items }) {
  return (
    <InfiniteScroll
      data="items"
      manual
      previous={({ fetch, hasMore, loading }) =>
        hasMore && (
          <button onClick={fetch} disabled={loading}>
            {loading ? 'Loading...' : 'Load Previous'}
          </button>
        )
      }
      next={({ fetch, hasMore, loading }) =>
        hasMore && (
          <button onClick={fetch} disabled={loading}>
            {loading ? 'Loading...' : 'Load More'}
          </button>
        )
      }
      loading={<div className="spinner" />}
    >
      {items.data.map((item) => (
        <ItemCard key={item.id} item={item} />
      ))}
    </InfiniteScroll>
  )
}

// Auto-load initially, then manual after 3 pages
function HybridScroll({ comments }) {
  return (
    <InfiniteScroll
      data="comments"
      manualAfter={3}
      next={({ fetch, loading, manualMode }) =>
        manualMode && (
          <button onClick={fetch} disabled={loading}>
            Show More Comments
          </button>
        )
      }
    >
      {comments.data.map((comment) => (
        <Comment key={comment.id} {...comment} />
      ))}
    </InfiniteScroll>
  )
}

// Chat-style reverse scrolling
function ChatMessages({ messages }) {
  const scrollRef = useRef<InfiniteScrollRef>(null)

  return (
    <InfiniteScroll
      ref={scrollRef}
      data="messages"
      reverse
      autoScroll
      onlyPrevious // Only load older messages
    >
      {messages.data.map((message) => (
        <ChatBubble key={message.id} {...message} />
      ))}
    </InfiniteScroll>
  )
}
```

## React Hooks

### usePoll - Automatic Data Refresh

The `usePoll` hook sets up automatic polling to refresh page data at specified intervals.

```tsx
import { usePoll } from '@inertiajs/react'

function NotificationBell({ notifications }) {
  // Poll every 30 seconds
  const { stop, start } = usePoll(30000, {
    only: ['notifications'],
  })

  // Stop polling when component unmounts (automatic)
  // Manually control polling:
  const handleFocus = () => start()
  const handleBlur = () => stop()

  return (
    <div
      onFocus={handleFocus}
      onBlur={handleBlur}
    >
      <BellIcon />
      {notifications.length > 0 && (
        <span className="badge">{notifications.length}</span>
      )}
    </div>
  )
}

// Keep polling even when tab is hidden
function LiveDashboard({ metrics }) {
  usePoll(5000, { only: ['metrics'] }, { keepAlive: true })

  return <MetricsDisplay data={metrics} />
}

// Don't auto-start polling
function ConditionalPoll({ data, isActive }) {
  const { start, stop } = usePoll(
    10000,
    { only: ['data'] },
    { autoStart: false }
  )

  useEffect(() => {
    isActive ? start() : stop()
  }, [isActive])

  return <DataDisplay data={data} />
}
```

### usePrefetch - Prefetch Status

The `usePrefetch` hook provides information about the current page's prefetch status and allows flushing the cache.

```tsx
import { usePrefetch } from '@inertiajs/react'

function PageWithPrefetchStatus() {
  const {
    isPrefetching,
    isPrefetched,
    lastUpdatedAt,
    flush,
  } = usePrefetch({ only: ['heavyData'] })

  return (
    <div>
      {isPrefetching && <span>Loading in background...</span>}
      {isPrefetched && (
        <span>
          Cached at: {new Date(lastUpdatedAt!).toLocaleTimeString()}
          <button onClick={flush}>Clear Cache</button>
        </span>
      )}
    </div>
  )
}
```

### useRemember - Persistent State

The `useRemember` hook persists state across page visits using the browser's history state.

```tsx
import { useRemember } from '@inertiajs/react'

function FilterableList() {
  // State persists when navigating away and back
  const [filters, setFilters] = useRemember({
    search: '',
    sortBy: 'created_at',
    sortDir: 'desc',
  }, 'list-filters')

  return (
    <div>
      <input
        value={filters.search}
        onChange={(e) => setFilters({ ...filters, search: e.target.value })}
        placeholder="Search..."
      />
      <select
        value={filters.sortBy}
        onChange={(e) => setFilters({ ...filters, sortBy: e.target.value })}
      >
        <option value="created_at">Date</option>
        <option value="name">Name</option>
      </select>
    </div>
  )
}

// Exclude sensitive fields
function FormWithRemember() {
  const [data, setData] = useRemember({
    email: '',
    password: '',
    remember: false,
  }, 'login-form', { exclude: ['password'] })

  return <form>{/* ... */}</form>
}
```

## Global Events

The router emits global events that can be listened to from anywhere in your application for logging, analytics, or UI updates.

```tsx
import { router } from '@inertiajs/react'
import { useEffect } from 'react'

function App({ children }) {
  useEffect(() => {
    // Navigation events
    const removeBefore = router.on('before', (event) => {
      console.log('About to visit:', event.detail.visit.url)
      // Return false to cancel navigation
      if (hasUnsavedChanges) return false
    })

    const removeStart = router.on('start', (event) => {
      NProgress.start()
    })

    const removeProgress = router.on('progress', (event) => {
      if (event.detail.progress?.percentage) {
        NProgress.set(event.detail.progress.percentage / 100)
      }
    })

    const removeFinish = router.on('finish', (event) => {
      NProgress.done()
    })

    const removeSuccess = router.on('success', (event) => {
      analytics.pageView(event.detail.page.url)
    })

    const removeError = router.on('error', (event) => {
      toast.error('Validation errors occurred')
    })

    const removeInvalid = router.on('invalid', (event) => {
      // Non-Inertia response received
      console.error('Invalid response:', event.detail.response)
    })

    const removeException = router.on('exception', (event) => {
      Sentry.captureException(event.detail.exception)
    })

    const removeNavigate = router.on('navigate', (event) => {
      // Page component has changed
      window.scrollTo(0, 0)
    })

    const removeFlash = router.on('flash', (event) => {
      const { success, error } = event.detail.flash
      if (success) toast.success(success)
      if (error) toast.error(error)
    })

    // Prefetch events
    const removePrefetching = router.on('prefetching', (event) => {
      console.log('Prefetching:', event.detail.visit.url)
    })

    const removePrefetched = router.on('prefetched', (event) => {
      console.log('Prefetched:', event.detail.visit.url)
    })

    return () => {
      removeBefore()
      removeStart()
      removeProgress()
      removeFinish()
      removeSuccess()
      removeError()
      removeInvalid()
      removeException()
      removeNavigate()
      removeFlash()
      removePrefetching()
      removePrefetched()
    }
  }, [])

  return children
}
```

## TypeScript Configuration

Inertia.js supports TypeScript configuration for custom error types, flash data, and shared page props through declaration merging.

```tsx
// types/inertia.d.ts
import '@inertiajs/core'

declare module '@inertiajs/core' {
  export interface InertiaConfig {
    // Custom error value type (default: string)
    errorValueType: string[]

    // Custom flash data structure
    flashDataType: {
      success?: string
      error?: string
      warning?: string
      toast?: {
        type: 'success' | 'error' | 'info'
        message: string
      }
    }

    // Shared props available on every page
    sharedPageProps: {
      auth: {
        user: {
          id: number
          name: string
          email: string
          avatar?: string
        } | null
      }
      appName: string
      currentLocale: string
    }
  }
}

// Usage with proper typing
import { usePage } from '@inertiajs/react'

function Component() {
  const { props } = usePage()
  // props.auth.user is typed correctly
  // props.flash.toast?.type is typed as 'success' | 'error' | 'info'
}
```

## Summary

Inertia.js excels at building modern, reactive single-page applications while leveraging existing server-side frameworks. The primary use cases include building admin panels, dashboards, and content management systems where you want the SPA experience without the complexity of a separate API. It's particularly well-suited for teams already proficient in server-side frameworks like Laravel, Rails, or Django who want to add modern frontend capabilities without learning REST/GraphQL API design patterns.

Integration patterns typically involve using `createInertiaApp` for bootstrap, `Link` and `router` for navigation, `useForm` or `Form` for data submission, and `usePage` for accessing shared data. For performance optimization, leverage prefetching on links, use `Deferred` and `WhenVisible` for lazy-loading heavy data, and implement `InfiniteScroll` for paginated content. The framework adapters (React, Vue, Svelte) provide consistent APIs, making it easy to switch between frontend frameworks while maintaining the same server-side codebase.