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.
Previous
How do you optimize performance in a Nuxt.js application?
Next
How do you implement custom Nuxt.js modules?
More Nuxt.js Questions
View all →- Advanced How does Nuxt.js universal rendering (SSR + CSR hydration) work?
- Advanced How do you optimize performance in a Nuxt.js application?
- Advanced How do you implement custom Nuxt.js modules?
- Advanced How does Nuxt.js handle edge rendering?
- Advanced What are Nuxt layers and how do they enable code sharing?