On this page
What changed?
In 0.10, React components became plain HTML at build time. In 0.11, you can also make one interactive, in an MDX page or a React layout:
<PriceCalculator client:visible pricePerSeat={12} />The component is still turned into HTML first, so visitors see it straight away, and then it starts working in the browser: when the page loads, when it scrolls into view, or when the browser is idle.
Why does it matter?
Most of a content site never changes after it loads, but some parts need to react to a visitor: a price calculator, a filter, a small form. Before 0.11 that meant writing your own script. Now it's one word on a component, and only the pages that use one load JavaScript.
That JavaScript isn't hidden from you. Each page with an interactive component loads React, about 215 KB, and vage audit counts it against your JavaScript budget. vage check explains, by name, anything it can't turn into a working component.
Where to go next
- Build a working price calculator: add an interactive React component to a static site
- What components can and can't do: React, Vue and MDX
- Every rule: interactive components docs
Interactive components are React only for now. Vue components work in layouts, as HTML. The full list of changes is in the changelog.
