---
schema_version: "1"
id: 30e16c062fcfc95d9e55b011edcc137a26f7c0fc7fea13efc7a993d9ca264c01
title: Implement SSR Using Islands Architecture
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-ssr-islands-implementation.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-ssr-islands-implementation.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 65422b2287c1c03a3842ff9d9620da042bca9ffa65d5565fed95f836d7cbc3b9
products:
  - Lightning Web Runtime
---
# Implement SSR Using Islands Architecture

Learn how to use the LWR hydration directive `lwr:hydrate` to create islands of component interactivity.
**Islands architecture** lets you pick which parts of your page you want to hydrate and make interactive. The rest of the page is static HTML. By only hydrating specific components instead of the entire page, your page loads more efficiently.

This method of implementing server-side rendering (SSR) only works for a server-rendered, **LWR on Node.js-only** site.

## Opt into Islands with `lwr:hydrate`

**Hydrating** a component starts its [component lifecycle](https://developer.salesforce.com/docs/platform/lwc/guide/create-lifecycle-hooks.html) and makes it interactive.

With the `lwr:hydrate` directive, you can create islands that use SSR with hydration or CSR.

### lwr:hydrate Limitations

- You can only apply `lwr:hydrate` to root components, which are Lightning web components (LWC) in a route's [LWR content templates, layout templates](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-templates.md), or `rootComponent` configuration.
  - If you add `lwr:hydrate` to an LWC component template, it won't work.

**note:** You have to [enable SSR](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-enable-ssr-site.md) for an app before you can configure islands architecture.

## Island Configurations

You can choose from these different configuration options for an islands architecture.

### SSR with Hydration

To opt-in to hydration and create an island for a **server-rendered** root component, add the `lwr:hydrate` directive to the component.

```
<!-- hydrated -->
<my-contact lwr:hydrate></my-contact>

<!-- NOT hydrated -->
<my-about></my-about>
```

| Resulting page HTML                                                                                           |
| ------------------------------------------------------------------------------------------------------------- |
| ![Server-rendered and hydrated component.](https://developer.salesforce.com/docs/media/lwr-node-ssr-hydration.png '{"class": "image-xs"}') |

### CSR only

Root components can use CSR instead of SSR by setting the `lwr:hydrate` directive to `client-only` and creating a client-rendered island. On the client-side, LWC `createElement()` API fully renders root components that opt-out of SSR.

```
<!-- SSRed -->
<my-info></my-info>

<!-- NOT SSRed -->
<my-map lwr:hydrate="client-only"></my-map>
```

| Resulting page HTML                                                                    |
| -------------------------------------------------------------------------------------- |
| ![Client-rendered component.](https://developer.salesforce.com/docs/media/lwr-node-csr.png '{"class": "image-xs"}') |

**tip:** For more information and guidance on island types, see [Understanding Islands](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-understanding-islands.md).

## SSR Warnings and Errors

After you implement SSR, review your output for the following SSR-related issues.

### Hydration Warnings

If the server-rendered component HTML doesn't match the output of its **first rendering cycle** on the client, Lightning Web Components (LWC) logs a hydration warning. To avoid hydration warnings, ensure that only asynchronous actions (like user interaction, data updates, or [eventing](https://developer.salesforce.com/docs/platform/lwc/guide/events.html)) cause template updates.

### Timeouts

By default, if SSR takes longer than five seconds, LWR times out and returns a 500 error. The timeout length includes [loading data](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-enable-ssr-site.md#load-data-during-ssr). You can override the timeout length by setting the `SSR_TIMEOUT` environment variable to a number in milliseconds before running the app.

```bash
# set the timeout to 10 seconds
SSR_TIMEOUT=10000 npm run start
```