---
layout: layout.html
title: Preact Islands
---
<h1><a href="/">is-land</a> using <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpreactjs.com%2F/" alt="IndieWeb avatar for https://preactjs.com/" width="28" height="28" decoding="async" loading="lazy">Preact</h1>

<h2>Scroll down</h2>

<hr style="height: 100vh">

<h2>Client-rendered Preact</h2>

<p>Example from <a href="https://preactjs.com/guide/v10/getting-started#no-build-tools-route"><code>https://preactjs.com/guide/v10/getting-started#no-build-tools-route</code></a></p>

<is-land on:visible autoinit="preact" import="/lib/preact/preact-component-js-only.js"></is-land>

<is-land on:visible>
	<div id="preact-app"></div>

	<template data-island>
		<script type="module">
		import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'

		function App (props) {
			return html`<p><strong>Hello ${props.name}!</strong></p>`;
		}

		render(html`<${App} name="from Preact" />`, document.getElementById("preact-app"));
		</script>
	</template>
</is-land>

{% assign componentHydration = "./lib/preact/preact-component.js" | preact %}
<is-land on:visible>
	<div id="preact-app-client"></div>

	<template data-island>
		<script type="module">
		import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
		import Counter from '{{ componentHydration.clientJsUrl }}';

		render(Counter(), document.getElementById("preact-app-client"));
		</script>
	</template>
</is-land>

<h2>Server-rendered Preact (SSR)</h2>

<h3>No hydration, HTML only</h3>

<p>Without hydration, the island is unnecessary.</p>

<div class="demo-component">
	{% assign component = "./lib/preact/preact-component-html-only.js" | preact %}
	{{ component.html }}
</div>

<h3>With Hydration</h3>

<is-land on:visible>
	<div id="preact-app-ssr">{{ componentHydration.html }}</div>

	<template data-island>
		<script type="module">
		import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
		import Counter from '{{ componentHydration.clientJsUrl }}';

		render(Counter(), document.getElementById("preact-app-ssr"));
		</script>
	</template>
</is-land>