feat: Prerender data API (#141)

* feat: Add back prerender data API * test: Add tests for prerender data API * docs: Add docs for prerender data API
preactjs · Sep 2, 2024 · 6a0d734 · 6a0d734
1 parent 3a48c70
commit 6a0d734
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -108,6 +108,9 @@ export async function prerender(data) {
         // Optionally add additional links that should be
         // prerendered (if they haven't already been)
         links: new Set([...discoveredLinks, '/foo', '/bar']),
+        // Optional data to serialize into a script tag for use on the client:
+        //   <script type="application/json" id="preact-prerender-data">{"url":"/"}</script>
+        data: { url: data.url },
         // Optionally configure and add elements to the `<head>` of
         // the prerendered HTML document
         head: {

diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -29,11 +29,12 @@ if (typeof window !== "undefined") {
 	hydrate(<App />, document.getElementById("app"));
 }
 
-export async function prerender() {
+export async function prerender(data) {
 	const { html, links } = await ssr(<App />);
 	return {
 		html,
 		links,
+		data: { url: data.url },
 		head: {
 			lang: "en",
 			title: "Prerendered Preact App",

diff --git a/src/prerender.ts b/src/prerender.ts
@@ -378,6 +378,11 @@ export function PrerenderPlugin({
 					if (result.head) {
 						head = result.head;
 					}
+					if (result.data) {
+						body += `<script type="application/json" id="preact-prerender-data">${JSON.stringify(
+							result.data,
+						)}</script>`;
+					}
 				} else {
 					body = result;
 				}

diff --git a/test/build.test.mjs b/test/build.test.mjs
@@ -23,6 +23,12 @@ test("builds demo successfully", async () => {
 	assert.match(outputHtml, /<title>Prerendered Preact App<\/title>/);
 	assert.match(outputHtml, /<meta name="description" content="This is a prerendered Preact app">/);
 
+	// Prerender Data
+	assert.match(
+		outputHtml,
+		/<script type="application\/json" id="preact-prerender-data">{"url":"\/"}<\/script>/
+	);
+
 	// Local Fetch
 	assert.match(outputHtml, /Local fetch works/);