---
title: "<NuxtIsland>"
description: "Nuxt provides `<NuxtIsland>` component to render a non-interactive component without any client JS"
---

# `<NuxtIsland>`

Nuxt provide `<NuxtIsland>` to render components only server side.

When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.
Changing the island component props triggers a refetch of the island component to re-render it again.

::alert{type=warning}
This component is experimental and in order to use it you must enable the `experimental.componentIslands` option in your `nuxt.config`.
::

::alert{type=info}
Global styles of your application are sent with the response
::

::alert{type=info}
Server only components use `<NuxtIsland>` under the hood
::

## Props

- **name** : Name of the component to render.
  - **type**: `string`
  - **required**
- **lazy**: Make the component non-blocking.
  - **type**: `boolean`
  - **default**: `false`
- **props**: Props to send to the component to render.
  - **type**: `Record<string, any>`
- **source**: Remote source to call the island to render.
  - **type**: `string`

::alert{type=warning}
Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
::

## `Slots`

Slots can be passed to an island component if declared.

Every slot is interactive since the parent component is the one providing it.

Some slots are reserved to `NuxtIsland` for special cases.

- **fallback**: Specify the content to be rendered before the island loads (if the component is lazy) or if `NuxtIsland` fails to fetch the component.