/** @jsxImportSource https://esm.sh/react */ import { useEffect, useState } from "https://esm.sh/react"; // will run on both client and server export function Demo(props: { items: string[] }) { const [items, setItems] = useState(props.items); useEffect(() => { items.push("This item is rendered only on the client, after the hydration"); setItems([...items]); // fetch data from the server fetch("/api/item") .then((res) => res.json()) .then((item) => setItems([...items, item])); }, []); return (

{item}

); } // You server code should be contained in this function export default async function (req: Request) { const url = new URL(req.url); if (url.pathname == "/api/item") { return Response.json("This item is fetched from the server by the client"); } // server-side import should only be used here const { Island } = await import("https://esm.town/v/pomdtr/island"); const { renderToString } = await import("https://esm.sh/react-dom/server"); return new Response( renderToString( ), { headers: { "Content-Type": "text/html" } } ); }

example_ssr