inertia-rails-performance_skill

Overview

This skill helps optimize Inertia + Rails applications for faster navigation, smaller payloads, and smoother UX. It provides patterns and code snippets for props minimization, deferred props, code splitting, prefetching, infinite scroll, polling, caching, and query optimization. Use the techniques to reduce server work, network latency, and client rendering time.

How this skill works

The skill inspects server-side rendering and client-side navigation flows to recommend changes: minimize props payloads, lazy-evaluate shared props, and mark non-critical data as deferred or optional. It also outlines frontend techniques: Vite-based code splitting, prefetch strategies, partial reloads, WhenVisible/Deferred components, and controlled polling. Together these reduce initial bundle size, defer work, and fetch only what the user needs.

When to use it

• When page loads are slow due to large JSON props or N+1 queries
• When you want faster perceived performance by deferring non-critical data
• When building long lists or feeds that need infinite scrolling or merge behavior
• When deploying code-split SPA pages to reduce initial bundle size
• When real-time updates are required without full WebSockets infrastructure

Best practices

• Return only required fields from controllers (select + as_json only: []) to shrink payloads
• Wrap expensive or rarely used props in lambdas or InertiaRails.defer to avoid unnecessary queries
• Group deferred props to fetch related data in parallel and use Deferred/WhenVisible on the frontend
• Use import.meta.glob with Vite to lazy-load non-critical pages and hybrid eager loads for critical routes
• Use partial reloads (router.reload only/except) and InertiaRails.optional/always/once for precise control
• Cache expensive computations (Rails.cache, ETags) and monitor slow requests to target hotspots

Example use cases

• Dashboard: load user core info immediately, defer analytics and recommendations with Deferred components
• Users index: partial reload of 'users' on search or pagination to avoid full page reload
• Feed: server returns paginated items and pagination metadata, client uses IntersectionObserver for infinite scroll
• Prefetching: prefetch heavy pages on hover or mount and invalidate cached prefetched pages after writes
• Polling: use usePoll with visibility-based throttling for notifications, and disable for background tabs