Help us improve
Share bugs, ideas, or general feedback.
From inertia-rails-skills
Provides Rails controller patterns for Inertia.js: render inertia with props (defer, optional, merge, scroll), shared data, flash, PRG redirects, validation errors. Use for data-loading actions serving Inertia responses.
npx claudepluginhub inertia-rails/skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/inertia-rails-skills:inertia-rails-controllersThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Server-side patterns for Rails controllers serving Inertia responses.
Guides Inertia Rails page components, persistent layouts, Link/router navigation, Head, Deferred, InfiniteScroll, and URL-driven state. React examples; Vue/Svelte refs. Use for pages, nav, lazy loading, infinite scroll in Rails SPAs.
Builds SPAs with Inertia.js and Rails using React, Vue, or Svelte. Handles Inertia pages, useForm, shared props, flash messages, and client-side routing.
Provides Rails Action Controller patterns for routing, before_action filters, strong parameters, and REST conventions. Useful for building robust MVC controllers.
Share bugs, ideas, or general feedback.
Server-side patterns for Rails controllers serving Inertia responses.
Before adding a prop, ask:
inertia_share in a base controller (InertiaController), not a per-action propInertiaRails.defer — page loads fast, data streams in afterInertiaRails.optional — skipped on initial loadInertiaRails.once — cached across navigationsNEVER:
redirect_to for external URLs (Stripe, OAuth, SSO) — it returns 302 but the Inertia client tries to parse the response as JSON, causing a broken redirect. Use inertia_location (returns 409 + X-Inertia-Location header).errors.full_messages for validation errors — it produces flat strings without field keys, so errors can't be mapped to the corresponding input fields on the frontend. Use errors.to_hash(true).inertia.defer, Inertia.defer, or inertia_rails.defer — the correct syntax is InertiaRails.defer { ... }. All prop helpers are module methods on the InertiaRails constant.alba-inertia gem is configured). Every action that passes props to the frontend MUST call render inertia: { key: data }.success/error as flash keys without updating config.flash_keys — Rails defaults to notice/alert. Custom keys must be added to both the initializer config and the FlashData TypeScript type.
default_render: trueTRAP: This setting only auto-infers the component name from controller/action — it does NOT auto-pass instance variables as props. Writing@posts = Post.allin an action withdefault_render: truerenders the correct component but sends zero data to the frontend. Instance variables are only auto-serialized as props whenalba-inertiagem is configured — checkGemfilebefore relying on this. Without it, you MUST userender inertia: { posts: data }to pass any data to the page.Empty actions (
def index; end) are correct ONLY for pages that need no data (e.g., a static dashboard page, a login form). If the action queries the database, it MUST callrender inertia:with data.
| Situation | Syntax | Component path |
|---|---|---|
| Action loads data | render inertia: { users: data } | Inferred from controller/action |
| Action loads NO data (static page) | Empty action or render inertia: {} | Inferred from controller/action |
| Rendering a different page | render inertia: 'errors/show', props: { error: e } | Explicit path |
Rule of thumb: If your action touches the database, it MUST call render inertia: with data.
If the action body is empty, the page receives only shared props (from inertia_share).
# CORRECT — data passed as props
def index
render inertia: { users: users_data, stats: InertiaRails.defer { ExpensiveQuery.run } }
end
# CORRECT — static page, no data needed
def index; end
# WRONG — @posts is NEVER sent to the frontend (without alba-inertia)
def index
@posts = Post.all
end
Note: If the project uses the
alba-inertiagem (checkGemfile), instance variables are auto-serialized as props and explicitrender inertia:is not needed. See thealba-inertiaskill for that convention.
InertiaRails.defer — NOT inertia.defer, NOT Inertia.defer. All prop helpers are module methods on InertiaRails.
| Type | Syntax | Behavior |
|---|---|---|
| Regular | { key: value } | Always evaluated, always included |
| Lazy | -> { expensive_value } | Included on initial page render, lazily evaluated on partial reloads |
| Optional | InertiaRails.optional { ... } | Only evaluated on partial reload requesting it |
| Defer | InertiaRails.defer { ... } | Loaded after initial page render |
| Defer (grouped) | InertiaRails.defer(group: 'name') { ... } | Grouped deferred — fetched in parallel |
| Once | InertiaRails.once { ... } | Resolved once, remembered across navigations |
| Merge | InertiaRails.merge { ... } | Appended to existing array (infinite scroll) |
| Deep merge | InertiaRails.deep_merge { ... } | Deep merged into existing object |
| Always | InertiaRails.always { ... } | Included even in partial reloads |
| Scroll | InertiaRails.scroll { ... } | Scroll-aware prop for infinite scroll |
def index
render inertia: {
filters: filter_params,
messages: -> { messages_scope.as_json },
stats: InertiaRails.defer { Dashboard.stats },
chart: InertiaRails.defer(group: 'analytics') { Dashboard.chart },
countries: InertiaRails.once { Country.pluck(:name, :code) },
posts: InertiaRails.merge { @posts.as_json },
csrf: InertiaRails.always { form_authenticity_token },
}
end
Server defers slow data, client shows fallback then swaps in content:
# Controller
def show
render inertia: {
basic_stats: Stats.quick_summary,
analytics: InertiaRails.defer { Analytics.compute_slow },
}
end
// Page component — child reads deferred prop from page props
import { Deferred, usePage } from '@inertiajs/react'
export default function Dashboard({ basic_stats }: Props) {
return (
<>
<QuickStats data={basic_stats} />
<Deferred data="analytics" fallback={<div>Loading analytics...</div>}>
<AnalyticsPanel />
</Deferred>
</>
)
}
function AnalyticsPanel() {
const { analytics } = usePage<{ analytics: Analytics }>().props
return <div>{analytics.revenue}</div>
}
Use inertia_share in controllers — it needs controller context (current_user,
request). The initializer only handles config.* settings (version, flash_keys).
class ApplicationController < ActionController::Base
# Static
inertia_share app_name: 'MyApp'
# Using lambdas (most common)
inertia_share auth: -> { { user: current_user&.as_json(only: [:id, :name, :email, :role]) } }
# Conditional
inertia_share if: :user_signed_in? do
{ notifications: -> { current_user.unread_notifications_count } }
end
end
Lambda and action-scoped variants are in references/configuration.md.
Evaluation order: Multiple inertia_share calls merge top-down. If a child
controller shares the same key as a parent, the child's value wins. Block and lambda
shares are lazily evaluated per-request — they don't run for non-Inertia requests.
Flash is automatic. Configure exposed keys if needed:
# config/initializers/inertia_rails.rb
InertiaRails.configure do |config|
config.flash_keys = %i[notice alert toast] # default: %i[notice alert]
end
Use standard Rails flash in controllers:
redirect_to users_path, notice: "User created!"
# or
flash.alert = "Something went wrong"
redirect_to users_path
After create/update/delete, always redirect (Post-Redirect-Get). Standard Rails
redirect_to works. The Inertia-specific part is validation error handling:
def create
@user = User.new(user_params)
if @user.save
redirect_to users_path, notice: "Created!"
else
redirect_back_or_to new_user_path, inertia: { errors: @user.errors.to_hash(true) }
end
end
to_hash vs to_hash(true): to_hash gives { name: ["can't be blank"] },
to_hash(true) gives { name: ["Name can't be blank"] }. Keys must match input
name attributes — mismatched keys mean errors won't display next to the right field.
NEVER use errors.full_messages — it produces flat strings without field keys,
so errors can't be mapped to the corresponding input fields on the frontend.
Pass permissions as per-resource can hash — frontend controls visibility,
server enforces access. See inertia-rails-controllers + inertia-rails-pages skills.
MANDATORY — READ ENTIRE FILE when implementing authorization props:
references/authorization.md (~40 lines) — full-stack
can pattern with Action Policy/Pundit/CanCanCan examples.
Do NOT load if not passing permission data to the frontend.
inertia_location)CRITICAL: redirect_to for external URLs breaks Inertia — the client
receives a 302 but tries to handle it as an Inertia response (JSON), not a
full page redirect. inertia_location returns 409 with X-Inertia-Location
header, which tells the client to do window.location = url.
# Stripe checkout — MUST use inertia_location, not redirect_to
def create
checkout_session = Current.user.payment_processor.checkout(
mode: "payment",
line_items: "price_xxx",
success_url: enrollments_url,
cancel_url: course_url(@course),
)
inertia_location checkout_session.url
end
Use inertia_location for any URL outside the Inertia app: payment
providers, OAuth, external services.
Encrypts page data in browser history state — config.encrypt_history = Rails.env.production?.
Use redirect_to path, inertia: { clear_history: true } on logout/role change.
Full setup with server-side and client-side examples is in
references/configuration.md.
See references/configuration.md for all
InertiaRails.configure options (version, encrypt_history, flash_keys, etc.).
| Symptom | Cause | Fix |
|---|---|---|
| 302 loop on Stripe/OAuth redirect | redirect_to for external URL | Use inertia_location — it returns 409 + X-Inertia-Location header |
| Errors don't display next to fields | Error keys don't match input name | to_hash keys must match input name attributes exactly |
TS2305: postsPath not found in @/routes | js-routes not regenerated after adding routes | Run rails js_routes:generate after changing config/routes.rb |
inertia-rails-formsinertia-rails-pages (access) + shadcn-inertia (Sonner)inertia-rails-pages (<Deferred> component)inertia-rails-typescript or alba-inertia (serializers)inertia-rails-testingMANDATORY — READ ENTIRE FILE when using advanced prop types (merge,
scroll, deep_merge) or combining multiple prop options:
references/prop-types.md (~180 lines) — detailed behavior,
edge cases, and combination rules for all prop types.
Do NOT load prop-types.md for basic defer, optional, once, or always
usage — the table above is sufficient.
Load references/configuration.md (~180 lines) only when
setting up InertiaRails.configure for the first time or debugging configuration
issues. Do NOT load for routine controller work.