Skip to content

Conversation

@bknoles
Copy link
Collaborator

@bknoles bknoles commented Nov 19, 2025

Deferred props allows you to defer the loading of certain page data until after the initial page render. This can be useful for improving the perceived performance of your app by allowing the initial page render to happen as quickly as possible.

Steps

  1. Visit /topics. Notice how the page takes a long time to load.
  2. Open TopicsController to see why. The code to calculate trending topics is simulating an expensive calculation, thanks to a sleep call.
  3. Comment out the current trending_tropics prop and uncomment the line below with InertiaRails.defer.
  4. Visit /topics again. Notice how much faster it loads now. The "trending" icons will appear ~2 seconds after the page loads.

What's happening?

When you mark a prop as "deferred", the Rails renderer will not compute it on the page load. The Inertia.js client side code will then immediately make a partial reload request to load the deferred data. Having the "trending icon" appear immediately is not critical for our UX, so we get a huge perceived performance boost from deferring it. Complicated dashboard data are a great candidate for deferred props.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants