---
schema_version: "1"
id: b6c5413433ffb6854fa71ad85ca067345f4cc74d6c4176e4c5dfc1273a2275d4
title: Understanding Islands
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-understanding-islands.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-understanding-islands.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 7758c56a60917c51ed19b3c4a8783f498e93cc39643fa0a8e118c753309bcb37
products:
  - Lightning Web Runtime
---
# Understanding Islands

With SSR, HTML is rendered on the server and then sent to the client along with any JavaScript needed to hydrate it. **Hydration** refers to the process of adding interactivity to the component on the client side.

However, there’s a performance cost associated with loading and executing excess JavaScript. To counteract this issue, **islands architecture** lets you create islands of interactivity on a server-rendered page. Rather than an all-or-nothing approach where SSR or CSR is controlled at the page level, you have granular control over which components require hydration, with the remainder of the page being static HTML.

![Diagram of a simple LWR on Node.js page with islands.](https://developer.salesforce.com/docs/media/simple-islands-page.png)

**important:** To use islands architecture, you have to [enable SSR for your site](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-enable-ssr-site.md).

Note that a component must be hydrated if it contains dynamic content or is interactive, including:

- Overriding the render method of `LightningElement`
- Implementing the `renderedCallback` lifecycle hook (this function isn’t called during SSR)
- Using dynamically bound text or attributes that can change on the client (for example, `<h2>{dynamicText}</h2>`)
- Attaching events
- Composing other components that need to be hydrated (for example, `<template><c-form></c-form></template>`)

For LWR on Node.js, you can create custom components that use the following configurations.

## SSR with Hydration

Components render on the server side and get hydrated on the client side. They produce hydrated islands. This configuration is suitable for interactive components, like a carousel.

## SSR only

Components render on the server side. This configuration is suitable for static components (like images) that don't require hydration.

## CSR only

Components render on the client side. This configuration is suitable for components that rely on client-side APIs and data.

## Next Steps

Ready to set up islands architecture for an LWR on Node.js-only site? Follow the steps in [Implement SSR Using Islands Architecture](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-ssr-islands-implementation.md).

**See Also**

- [patterns.dev: Islands Architecture](https://www.patterns.dev/vanilla/islands-architecture)