What is the island components feature in Nuxt.js?

Answer

Server components and island components are Nuxt's implementation of partial hydration — a technique to reduce the JavaScript sent to the browser. A component suffixed with .server.vue (e.g., components/HeavyChart.server.vue) renders only on the server and sends pure HTML with zero client-side JavaScript. An island component (accessed via <NuxtIsland component="MyComponent" />) renders server-side and can be refreshed independently via a dedicated API endpoint without a full page reload. This is analogous to Astro's island architecture and React Server Components. The benefit is a massively reduced Time to Interactive (TTI) for content-heavy pages where most content is static and only a few interactive widgets need hydration.