Offload frontend computation to the server
Note: If you only isolate the buttons as islands, selecting an SKU will not update the displayed price or image, leading to an inconsistent UI.An alternative approach is to transform the buttons into anchor tags, triggering a new page load upon each SKU selection:
usePartial
hook combined with the button
tag.
This hook accepts an href
parameter and enhances the button tag. When the user
clicks the button, it triggers client-side navigation and applies HTML diff
updates. This approach eliminates the need for islands, boosting performance,
while maintaining the scroll position for an improved user experience.
usePartialSection
hook
allows us to override the props that a section uses for rendering, simplifying
the process:
activeIndex
prop is overridden with each
usePartialSection
call, simplifying the use of Partials and eliminating the
need to manage URLs and search parameters within our sections.