preactjs · rschristian · Jan 2, 2024 · Oct 13, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/demo/public/local-fetch-test.txt b/demo/public/local-fetch-test.txt
@@ -0,0 +1 @@
+Local fetch works
diff --git a/demo/src/components/LocalFetch.tsx b/demo/src/components/LocalFetch.tsx
@@ -0,0 +1,32 @@
+import { useState } from "preact/hooks";
+
+const cache = new Map();
+
+async function load(url: string) {
+	const res = await fetch(url);
+	return await res.text();
+}
+
+function useFetch(url: string) {
+	const [_, update] = useState({});
+
+	let data = cache.get(url);
+	if (!data) {
+		data = load(url);
+		cache.set(url, data);
+		data.then(
+			(res: string) => update((data.res = res)),
+			(err: Error) => update((data.err = err)),
+		);
+	}
+
+	if (data.res) return data.res;
+	if (data.err) throw data.err;
+	throw data;
+}
+
+export function LocalFetch() {
+	const data = useFetch("/local-fetch-test.txt");
+
+	return <p>{data.trimEnd()}</p>;
+}
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -1,5 +1,10 @@
-import { render } from "preact";
-import { LocationProvider, Router, Route } from "preact-iso";
+import {
+	LocationProvider,
+	Router,
+	Route,
+	hydrate,
+	prerender as ssr,
+} from "preact-iso";
 
 import { Header } from "./components/Header.jsx";
 import { Home } from "./pages/Home/index.jsx";
@@ -20,4 +25,28 @@ export function App() {
 	);
 }
 
-render(<App />, document.getElementById("app")!);
+if (typeof window !== "undefined") {
+	hydrate(<App />, document.getElementById("app"));
+}
+
+export async function prerender() {
+	const { html, links } = await ssr(<App />);
+	return {
+		html,
+		links,
+		renderTarget: "#app",
+		head: {
+			lang: "en",
+			title: "Prerendered Preact App",
+			elements: new Set([
+				{
+					type: "meta",
+					props: {
+						name: "description",
+						content: "This is a prerendered Preact app",
+					},
+				},
+			]),
+		},
+	};
+}
diff --git a/demo/src/pages/Home/index.tsx b/demo/src/pages/Home/index.tsx
@@ -1,4 +1,5 @@
 import { ReactComponent } from "../../components/Compat";
+import { LocalFetch } from "../../components/LocalFetch";
 
 import preactLogo from "../../assets/preact.svg";
 import "./style.css";
@@ -11,6 +12,7 @@ export function Home() {
 			</a>
 			<h1>Get Started building Vite-powered Preact Apps </h1>
 			<ReactComponent />
+			<LocalFetch />
 			<section>
 				<Resource
 					title="Learn Preact"

diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -3,5 +3,9 @@ import preact from "../src/index";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [preact()],
+	plugins: [
+		preact({
+			prerender: { enabled: true, additionalPrerenderRoutes: ["/404"] },
+		}),
+	],
 });