perf: use rel=preload for pages that perform fetching (denoland#520)

closes denoland#515. applied `link`s as suggested, yet additionally had to add `crossOrigin="anonymous"` to resolve the following warning in the console: ![Bildschirmfoto 2023-09-06 um 22 08 24](https://github.com/denoland/saaskit/assets/8133892/d28f93f4-c090-4539-ae08-b885928f7265) also homogenized the components using `fetch` to have an `endpoint` prop
dreamcatcher-tech · Sep 6, 2023 · c4c7a5f · c4c7a5f
1 parent 1df196c
commit c4c7a5f
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 15 deletions.
diff --git a/islands/CommentsList.tsx b/islands/CommentsList.tsx
@@ -16,11 +16,10 @@ function CommentSummary(props: Comment) {
   );
 }
 
-export default function CommentsList(props: { itemId: string }) {
+export default function CommentsList({ endpoint }: { endpoint: string }) {
   const commentsSig = useSignal<Comment[]>([]);
   const cursorSig = useSignal("");
   const isLoadingSig = useSignal(false);
-  const endpoint = `/api/items/${props.itemId}/comments`;
 
   async function loadMoreComments() {
     if (isLoadingSig.value) return;

diff --git a/islands/NotificationsList.tsx b/islands/NotificationsList.tsx
@@ -24,11 +24,10 @@ function NotificationSummary(props: Notification) {
   );
 }
 
-export default function NotificationsList() {
+export default function NotificationsList({ endpoint }: { endpoint: string }) {
   const notificationsSig = useSignal<Notification[]>([]);
   const cursorSig = useSignal("");
   const isLoadingSig = useSignal(false);
-  const endpoint = `/api/me/notifications`;
 
   async function loadMoreNotifications() {
     if (isLoadingSig.value) return;

diff --git a/islands/UsersTable.tsx b/islands/UsersTable.tsx
@@ -31,11 +31,10 @@ function UserTableRow(props: User) {
   );
 }
 
-export default function UsersTable() {
+export default function UsersTable({ endpoint }: { endpoint: string }) {
   const usersSig = useSignal<User[]>([]);
   const cursorSig = useSignal("");
   const isLoadingSig = useSignal(false);
-  const endpoint = "/api/users";
 
   async function loadMoreUsers() {
     if (isLoadingSig.value) return;

diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx
@@ -10,9 +10,18 @@ export default async function DashboardUsersPage(
   _req: Request,
   ctx: RouteContext,
 ) {
+  const endpoint = "/api/users";
+
   return (
     <>
-      <Head title="Users" href={ctx.url.href} />
+      <Head title="Users" href={ctx.url.href}>
+        <link
+          as="fetch"
+          crossOrigin="anonymous"
+          href={endpoint}
+          rel="preload"
+        />
+      </Head>
       <main class="flex-1 p-4">
         <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
         <TabsBar
@@ -25,7 +34,7 @@ export default async function DashboardUsersPage(
           }]}
           currentPath={ctx.url.pathname}
         />
-        <UsersTable />
+        <UsersTable endpoint={endpoint} />
       </main>
     </>
   );

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -45,12 +45,21 @@ export default async function HomePage(
   _req: Request,
   ctx: RouteContext<undefined, State>,
 ) {
+  const endpoint = "/api/items";
+
   return (
     <>
-      <Head href={ctx.url.href} />
+      <Head href={ctx.url.href}>
+        <link
+          as="fetch"
+          crossOrigin="anonymous"
+          href={endpoint}
+          rel="preload"
+        />
+      </Head>
       <main class="flex-1 p-4">
         {NEEDS_SETUP && <SetupInstruction />}
-        <ItemsList endpoint={"/api/items"} />
+        <ItemsList endpoint={endpoint} />
       </main>
     </>
   );

diff --git a/routes/items/[id].tsx b/routes/items/[id].tsx
@@ -33,6 +33,7 @@ export default async function ItemsItemPage(
   const item = await getItem(itemId);
   if (item === null) return await ctx.renderNotFound();
 
+  const endpoint = `/api/items/${ctx.params.id}/comments`;
   const isSignedIn = ctx.state.sessionUser !== undefined;
   let isVoted = false;
 
@@ -46,14 +47,21 @@ export default async function ItemsItemPage(
 
   return (
     <>
-      <Head title={item.title} href={ctx.url.href} />
+      <Head title={item.title} href={ctx.url.href}>
+        <link
+          as="fetch"
+          crossOrigin="anonymous"
+          href={endpoint}
+          rel="preload"
+        />
+      </Head>
       <main class="flex-1 p-4 space-y-8">
         <ItemSummary
           item={item}
           isVoted={isVoted}
         />
         <CommentInput isSignedIn={isSignedIn} itemId={ctx.params.id} />
-        <CommentsList itemId={ctx.params.id} />
+        <CommentsList endpoint={endpoint} />
       </main>
     </>
   );

diff --git a/routes/notifications/index.tsx b/routes/notifications/index.tsx
@@ -10,12 +10,21 @@ export default async function NotificationsPage(
   _req: Request,
   ctx: RouteContext<undefined, SignedInState>,
 ) {
+  const endpoint = "/api/me/notifications";
+
   return (
     <>
-      <Head title="Notifications" href={ctx.url.href} />
+      <Head title="Notifications" href={ctx.url.href}>
+        <link
+          as="fetch"
+          crossOrigin="anonymous"
+          href={endpoint}
+          rel="preload"
+        />
+      </Head>
       <main class="flex-1 p-4">
         <h1 class={HEADING_WITH_MARGIN_STYLES}>Notifications</h1>
-        <NotificationsList />
+        <NotificationsList endpoint={endpoint} />
       </main>
     </>
   );

diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx
@@ -48,7 +48,14 @@ export default async function UsersUserPage(
 
   return (
     <>
-      <Head title={user.login} href={ctx.url.href} />
+      <Head title={user.login} href={ctx.url.href}>
+        <link
+          as="fetch"
+          crossOrigin="anonymous"
+          href={`/api/users/${login}/items`}
+          rel="preload"
+        />
+      </Head>
       <main class="flex-1 p-4">
         <Profile
           isSubscribed={user.isSubscribed}