> ## Documentation Index
> Fetch the complete documentation index at: https://better-router.bansal.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Islands

> Server-render a page as static HTML and hydrate only the components you mark.

Island pages are for mostly static documents with a few interactive widgets.

## Island pages

Name the page with `.island.tsx`:

```
src/routes/blog/index.island.tsx
src/routes/blog/_Counter.tsx
```

The page is rendered to HTML. better-router does not start the SPA router on that page.

## Marking islands

Use an import attribute. The value is the hydration strategy:

```tsx title="src/routes/blog/index.island.tsx" theme={null}
import Counter from "./_Counter" with { island: "load" };
import Comments from "./_Comments" with { island: "visible" };

export default function BlogIndex() {
  return (
    <article>
      <h1>Hello</h1>
      <Counter start={0} />
      <Comments />
    </article>
  );
}
```

You can also wrap a component:

```tsx theme={null}
import { island } from "better-router/react";
import Counter from "./_Counter";

export const InteractiveCounter = island(Counter, "idle");
```

## Strategies

| Strategy        | Hydrates when                   |
| --------------- | ------------------------------- |
| `load`          | The page loads                  |
| `visible`       | The element enters the viewport |
| `idle`          | The browser is idle             |
| `media:(query)` | The media query matches         |

TypeScript needs `"module": "ESNext"` for import attributes. See [TypeScript](/typescript).

## Forms and navigation

Island pages do not run the SPA router. `<Link>` to a non-island page does a full load. Use `useIslandForm` instead of `useForm` — a successful action reloads the document.