Skip to content

Instantly share code, notes, and snippets.

@coleea

coleea/rendered-by-server-islands.html

Created July 23, 2024 01:37
Show Gist options
  • Save coleea/c550a80daa3015a8ea3d5bc4d9609b50 to your computer and use it in GitHub Desktop.
Save coleea/c550a80daa3015a8ea3d5bc4d9609b50 to your computer and use it in GitHub Desktop.
Download ZIP
rendered-by-server-islands
Raw
rendered-by-server-islands.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta
name="generator"
content="Astro v0.0.0-server-islands-20240718131003"
/>
<title>Title</title>
<style
data-vite-dev-id="H:/code_study/astro-server-island-test/src/layouts/Layout.astro?astro&#38;type=style&#38;index=0&#38;lang.css"
></style>
<script type="module" src="/@vite/client"></script>
<script
type="module"
src="/@fs/H:/code_study/astro-server-island-test/node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js?v=c5d0fcec"
></script>
<script>
window.__astro_dev_toolbar__ = {
root: "H:\\code_study\\astro-server-island-test\\",
version: "0.0.0-server-islands-20240718131003",
debugInfo:
"Astro v0.0.0-server-islands-20240718131003\nNode v20.15.0\nSystem Windows (x64)\nPackage Manager npm\nOutput hybrid\nAdapter none\nIntegrations none",
};
</script>
<script
type="module"
src="/src/layouts/Layout.astro?astro&type=style&index=0&lang.css"
></script>
</head>
<body
data-astro-source-file="H:/code_study/astro-server-island-test/src/layouts/Layout.astro"
data-astro-source-loc="19:8"
>
<main
data-astro-source-file="H:/code_study/astro-server-island-test/src/pages/index.astro"
data-astro-source-loc="7:8"
>
<div
class=""
style="font-size: 99px"
data-astro-source-file="H:/code_study/astro-server-island-test/src/pages/index.astro"
data-astro-source-loc="8:42"
>
STATIC
</div>
<!--server-island-start-->
<!-- fetch 이후 하단의 코드는 로드 완료된 컴포넌트로 교체된다 -->
<div
data-astro-source-file="H:/code_study/astro-server-island-test/src/pages/index.astro"
data-astro-source-loc="10:25"
>
Loading
</div>
<script
async
type="module"
data-island-id="37280556-54a1-4108-8ec5-38bb0320a1ca"
>
let componentId = "Lazy";
let componentExport = "default";
let script = document.querySelector(
'script[data-island-id="37280556-54a1-4108-8ec5-38bb0320a1ca"]'
);
let data = {
componentExport,
props: {},
slots: {},
};
let response = await fetch("/_server-islands/Lazy", {
method: "POST",
body: JSON.stringify(data),
});
if (
response.status === 200 &&
response.headers.get("content-type") === "text/html"
) {
let html = await response.text();
// Swap!
while (
script.previousSibling?.nodeType !== 8 &&
script.previousSibling?.data !== "server-island-start"
) {
script.previousSibling?.remove();
}
script.previousSibling?.remove();
let frag = document.createRange().createContextualFragment(html);
script.before(frag);
}
script.remove();
</script>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment