Also fetch build list serverside for download pages

Author: jpenilla

bun.lock

@@ -21,6 +21,7 @@
     "astro": "5.14.5",
     "astro-icon": "^1.1.5",
     "clsx": "^2.1.1",
+    "runed": "^0.35.1",
     "svelte": "^5.40.2",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3"

package.json

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getVersionBuilds } from "@/utils/fill";
-  import type { Build, ProjectDescriptor } from "@/utils/types";
+  import type { ProjectDescriptor } from "@/utils/types";
 
   import SoftwareDownloadButton from "@/components/data/SoftwareDownloadButton.svelte";
   import SoftwareBuilds from "@/components/data/SoftwareBuilds.svelte";
@@ -10,16 +9,28 @@
   import FoliaIconUrl from "@/assets/brand/folia.svg?url";
   import WaterfallIconUrl from "@/assets/brand/waterfall.svg?url";
   import type { Snippet } from "svelte";
+  import { fetchBuildsOrError, type ProjectBuildsOrError } from "@/utils/download";
+  import { watch } from "runed";
+
   interface Props {
     id: "paper" | "velocity" | "folia" | "waterfall" | (string & {});
     project: ProjectDescriptor;
+    builds: ProjectBuildsOrError;
     description?: string;
     Description?: Snippet;
     experimentalWarning?: string;
     eol?: boolean;
   }
 
-  let { id, project, description = undefined, Description = undefined, experimentalWarning = undefined, eol = false }: Props = $props();
+  let {
+    id,
+    project,
+    builds,
+    description = undefined,
+    Description = undefined,
+    experimentalWarning = undefined,
+    eol = false,
+  }: Props = $props();
 
   const ICONS: Record<string, string | undefined> = {
     paper: PaperIconUrl,
@@ -32,37 +43,6 @@
 
   let version = $derived(isStable ? project?.latestStableVersion : (project?.latestExperimentalVersion ?? project?.latestStableVersion));
 
-  let builds: Build[] = $state([]);
-  let latestBuild: Build | undefined = $state();
-  let buildsLoading = $state(false);
-  let buildsError: string | null = $state(null);
-
-  async function fetchBuilds() {
-    if (!id || !version) {
-      builds = [];
-      latestBuild = undefined;
-      return;
-    }
-    buildsLoading = true;
-    buildsError = null;
-    try {
-      const res = await getVersionBuilds(id, version);
-      builds = Array.isArray(res) ? res : [];
-      latestBuild = builds[0] || undefined;
-    } catch (e) {
-      console.error(e);
-      buildsError = `Failed to load builds for ${id} ${version}`;
-      builds = [];
-      latestBuild = undefined;
-    } finally {
-      buildsLoading = false;
-    }
-  }
-
-  $effect(() => {
-    fetchBuilds();
-  });
-
   function toggleStable() {
     isStable = !isStable;
   }
@@ -72,6 +52,18 @@
     const c = (channel ?? "").toLowerCase();
     return `text-channel-${c}-primary`;
   }
+
+  watch(
+    () => version,
+    (ver, oldVer) => {
+      // Only handle changes, not initial page load where builds are prerendered on server.
+      if (oldVer !== undefined && ver !== oldVer) {
+        fetchBuildsOrError({ value: project }, !isStable).then((result) => {
+          builds = result;
+        });
+      }
+    }
+  );
 </script>
 
 <header class="mx-auto flex max-w-7xl flex-row flex-wrap gap-16 px-4 pt-32 pb-16 lg:pt-48 lg:pb-26">
@@ -93,7 +85,7 @@
 
     <h2 class="text-4xl leading-normal font-medium lg:text-5xl lg:leading-normal">
       Get {project.name}
-      <span class={channelClass(latestBuild?.channel)}>{version}</span>
+      <span class={channelClass(builds?.value?.latest?.channel)}>{version}</span>
     </h2>
 
     <p class="mt-4 text-xl">
@@ -113,7 +105,14 @@
     </p>
 
     <div class="mt-8 flex flex-col gap-4">
-      <SoftwareDownloadButton projectId={id} {project} build={latestBuild} {version} eol={!!eol} disabled={buildsLoading || !latestBuild} />
+      <SoftwareDownloadButton
+        projectId={id}
+        {project}
+        build={builds.value?.latest}
+        {version}
+        eol={!!eol}
+        disabled={builds.value?.latest === null || builds.value?.latest === undefined}
+      />
 
       {#if project.latestExperimentalVersion}
         <button
@@ -143,12 +142,10 @@
         </span>
       </p>
 
-      {#if buildsLoading}
-        <div class="text-center text-sm text-gray-400">Loading builds…</div>
-      {:else if buildsError}
-        <div class="text-center text-sm text-red-500">{buildsError}</div>
-      {:else if builds.length > 0}
-        <SoftwareBuilds project={id} {version} {builds} eol={!!eol} />
+      {#if builds.error}
+        <div class="text-center text-sm text-red-500">{builds.error}</div>
+      {:else if builds.value && builds.value.builds && builds.value.builds.length > 0}
+        <SoftwareBuilds project={id} {version} builds={builds.value.builds} eol={!!eol} />
       {/if}
     </section>
 

src/components/data/SoftwareDownload.svelte

@@ -1,24 +1,33 @@
 <script lang="ts">
   import { onMount, type Snippet } from "svelte";
   import SoftwareDownload from "@/components/data/SoftwareDownload.svelte";
-  import type { ProjectDescriptor } from "@/utils/types";
+  import type { ProjectBuildsOrError, ProjectDescriptorOrError } from "@/utils/download";
 
   interface Props {
     id: string;
     description?: string;
     experimentalWarning?: string;
     eol?: boolean;
     Description?: Snippet;
-    project: { error?: string; value?: ProjectDescriptor };
+    project: ProjectDescriptorOrError;
+    builds: ProjectBuildsOrError;
   }
 
-  let { id, description = undefined, experimentalWarning = undefined, eol = false, Description = undefined, project }: Props = $props();
+  let {
+    id,
+    description = undefined,
+    experimentalWarning = undefined,
+    eol = false,
+    Description = undefined,
+    project,
+    builds,
+  }: Props = $props();
 </script>
 
 {#if project.error}
   <header class="mx-auto max-w-7xl px-4 pt-32 pb-16 lg:pt-48 lg:pb-26">
     <div class="font-semibold text-red-500">{project.error}</div>
   </header>
 {:else if project.value}
-  <SoftwareDownload {id} project={project.value} {eol} {experimentalWarning} {Description} {description} />
+  <SoftwareDownload {id} project={project.value} {builds} {eol} {experimentalWarning} {Description} {description} />
 {/if}

src/components/data/SoftwareDownloadPage.svelte

@@ -2,11 +2,12 @@
 export const prerender = false;
 import Layout from "@/layouts/Layout.astro";
 import SoftwareDownloadPage from "@/components/data/SoftwareDownloadPage.svelte";
-import { getProjectDescriptorOrError } from "@/utils/download";
+import { fetchBuildsOrError, getProjectDescriptorOrError } from "@/utils/download";
 
 Astro.response.headers.set("Cache-Control", "public, max-age=300");
 Astro.response.headers.set("CDN-Cache-Control", "public, max-age=600");
 const projectResult = await getProjectDescriptorOrError("folia");
+const buildsResult = await fetchBuildsOrError(projectResult, false);
 ---
 
 <Layout
@@ -21,5 +22,6 @@ const projectResult = await getProjectDescriptorOrError("folia");
     experimentalWarning="Download experimental builds of Folia, our new fork of Paper that adds regionized multithreading to the server. Proceed with caution!"
     client:load="svelte"
     project={projectResult}
+    builds={buildsResult}
   />
 </Layout>

src/pages/downloads/folia.astro

@@ -2,11 +2,12 @@
 export const prerender = false;
 import Layout from "@/layouts/Layout.astro";
 import SoftwareDownloadPage from "@/components/data/SoftwareDownloadPage.svelte";
-import { getProjectDescriptorOrError } from "@/utils/download";
+import { getProjectDescriptorOrError, fetchBuildsOrError } from "@/utils/download";
 
 Astro.response.headers.set("Cache-Control", "public, max-age=300");
 Astro.response.headers.set("CDN-Cache-Control", "public, max-age=600");
 const projectResult = await getProjectDescriptorOrError("paper");
+const buildsResult = await fetchBuildsOrError(projectResult, false);
 ---
 
 <Layout
@@ -21,5 +22,6 @@ const projectResult = await getProjectDescriptorOrError("paper");
     experimentalWarning="Download experimental builds of Paper, our Minecraft server software offering unrivaled performance and stability. Proceed with caution!"
     client:load="svelte"
     project={projectResult}
+    builds={buildsResult}
   />
 </Layout>

src/pages/downloads/paper.astro

@@ -2,11 +2,12 @@
 export const prerender = false;
 import Layout from "@/layouts/Layout.astro";
 import SoftwareDownloadPage from "@/components/data/SoftwareDownloadPage.svelte";
-import { getProjectDescriptorOrError } from "@/utils/download";
+import { getProjectDescriptorOrError, fetchBuildsOrError } from "@/utils/download";
 
 Astro.response.headers.set("Cache-Control", "public, max-age=300");
 Astro.response.headers.set("CDN-Cache-Control", "public, max-age=600");
 const projectResult = await getProjectDescriptorOrError("velocity");
+const buildsResult = await fetchBuildsOrError(projectResult, false);
 ---
 
 <Layout
@@ -20,5 +21,6 @@ const projectResult = await getProjectDescriptorOrError("velocity");
     description="Download Velocity, our high-performance Minecraft proxy."
     client:load="svelte"
     project={projectResult}
+    builds={buildsResult}
   />
 </Layout>

src/pages/downloads/velocity.astro

@@ -2,11 +2,12 @@
 export const prerender = false;
 import Layout from "@/layouts/Layout.astro";
 import SoftwareDownloadPage from "@/components/data/SoftwareDownloadPage.svelte";
-import { getProjectDescriptorOrError } from "@/utils/download";
+import { getProjectDescriptorOrError, fetchBuildsOrError } from "@/utils/download";
 
 Astro.response.headers.set("Cache-Control", "public, max-age=300");
 Astro.response.headers.set("CDN-Cache-Control", "public, max-age=600");
 const projectResult = await getProjectDescriptorOrError("waterfall");
+const buildsResult = await fetchBuildsOrError(projectResult, false);
 
 const descriptionHtml = `
   Waterfall has reached end of life. We recommend you transition to
@@ -32,5 +33,12 @@ const descriptionHtml = `
   keywords={["papermc", "minecraft", "performance", "bungeecord", "waterfall", "downloads", "jar"]}
   canonical="/downloads/waterfall"
 >
-  <SoftwareDownloadPage id="waterfall" description={descriptionHtml} eol client:load="svelte" project={projectResult} />
+  <SoftwareDownloadPage
+    id="waterfall"
+    description={descriptionHtml}
+    eol
+    client:load="svelte"
+    project={projectResult}
+    builds={buildsResult}
+  />
 </Layout>

src/pages/downloads/waterfall.astro

@@ -1,8 +1,33 @@
 import { getProject, getVersionBuilds } from "@/utils/fill";
 import { getHangarProjects } from "@/utils/hangar";
-import type { ProjectDescriptor } from "@/utils/types";
+import { type ProjectDescriptor, type Build } from "@/utils/types";
 
-export async function getProjectDescriptorOrError(id: string): Promise<{ error?: string; value?: ProjectDescriptor }> {
+export type ProjectDescriptorOrError = { error?: string; value?: ProjectDescriptor };
+export type ProjectBuildsOrError = { error?: string; value?: { latest?: Build; builds: Build[] } };
+
+export async function fetchBuildsOrError(project: ProjectDescriptorOrError, experimental: boolean): Promise<ProjectBuildsOrError> {
+  const projectId = project.value?.id;
+  if (!projectId) {
+    return { error: `Project id not found` };
+  }
+  let versionId = project.value?.latestStableVersion ?? project.value?.latestExperimentalVersion;
+  if (experimental && project.value?.latestExperimentalVersion) {
+    versionId = project.value?.latestExperimentalVersion;
+  }
+  if (!versionId) {
+    return { error: `No versions found` };
+  }
+  try {
+    const res = await getVersionBuilds(projectId, versionId);
+    const builds = Array.isArray(res) ? res : [];
+    const latestBuild = builds[0] || undefined;
+    return { value: { latest: latestBuild, builds } };
+  } catch (e) {
+    return { error: `Failed to load builds for ${projectId} ${versionId}: ${e}` };
+  }
+}
+
+export async function getProjectDescriptorOrError(id: string): Promise<ProjectDescriptorOrError> {
   try {
     const result = await getProjectDescriptor(id);
     if (result == null) {
@@ -37,6 +62,7 @@ export async function getProjectDescriptor(id: string): Promise<ProjectDescripto
       latestStableVersion !== flattenedVersions[flattenedVersions.length - 1] ? flattenedVersions[flattenedVersions.length - 1] : null;
 
     return {
+      id,
       name: projectData.project.name,
       latestStableVersion,
       latestExperimentalVersion,

src/utils/download.ts

@@ -66,6 +66,7 @@ export interface ProjectsResponse {
 }
 
 export interface ProjectDescriptor {
+  id: string;
   name: string;
   latestStableVersion: string;
   latestExperimentalVersion: string | null;