another

Author: Rich-Harris

apps/svelte.dev/src/routes/packages/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Category from './Category.svelte';
 	import { page } from '$app/state';
-
-	const { data } = $props();
+	import { get_packages } from './data.remote';
 </script>
 
 <svelte:head>
@@ -23,7 +22,7 @@
 	</header>
 
 	<div>
-		{#each data.homepage as category}
+		{#each await get_packages() as category}
 			<Category {...category} open={page.url.hash === `#${category.hash}`} />
 		{/each}
 	</div>

apps/svelte.dev/src/routes/packages/+page.server.ts renamed to apps/svelte.dev/src/routes/packages/data.remote.ts

@@ -1,8 +1,7 @@
+import { prerender } from '$app/server';
 import { PACKAGES_META } from '$lib/packages-meta';
 import { registry, type Category, type Package, type PackageDefinition } from '$lib/server/content';
 
-export const prerender = false;
-
 const arrToPackages = (arr: PackageDefinition[]) => {
 	return arr
 		.map((pkgDef) => {
@@ -22,16 +21,17 @@ const arrToPackages = (arr: PackageDefinition[]) => {
 };
 
 // Netflix style page. Send pre-done cards with categories
-const homepage: Category[] = [];
+const categories: Category[] = [];
+
 for (const { packages, title, description } of PACKAGES_META.FEATURED) {
-	homepage.push({
+	categories.push({
 		title,
 		hash: title.toLowerCase().replace(/ /g, '-'),
 		description,
 		packages: arrToPackages(packages)
 	});
 }
 
-export async function load() {
-	return { homepage };
-}
+export const get_packages = prerender(() => {
+	return categories;
+});