perf: ⚡ Added blog post SSR pre-fetch query

Auxtal · Aug 22, 2023 · d6276b2 · d6276b2
1 parent 27836cb
commit d6276b2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/src/lib/components/organisms/Navbar.svelte b/src/lib/components/organisms/Navbar.svelte
@@ -24,14 +24,6 @@
 
   const toggleMobileMenu = () => (mobileMenu = !mobileMenu);
   const hideMobileMenu = () => (mobileMenu = false);
-
-  $: postQuery = createQuery({
-    queryFn: () => trpc($page).posts.fetchPosts.query(),
-    queryKey: ["posts"]
-  });
-
-  $: posts = $postQuery.data ?? [];
-  $: currentPost = posts.find((obj) => obj.slug === $page.url.pathname.substring(1));
 </script>
 
 <Animate>
@@ -60,8 +52,7 @@
           {#each Navlinks as Navlink}
             {@const highlightRoute = clsx({
               "!bg-neutral font-bold text-primary active:text-primary dark:text-secondary hover:before:bg-primary/20 hover:before:dark:bg-secondary/20":
-                $page.url.pathname.includes(Navlink.route) ||
-                (currentPost && Navlink.name === "Blog")
+                $page.url.pathname.includes(Navlink.route)
             })}
 
             <li class="group mx-2">

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -19,6 +19,7 @@
 
   import type { Post } from "$utils/types";
 
+  // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
   $: postQuery = createQuery({
     queryFn: () => trpc($page).posts.fetchPosts.query(),
     queryKey: ["posts"]
@@ -79,36 +80,49 @@
       <div
         class="divider m-0 mb-2 before:h-[1px] before:bg-secondary/20 before:shadow-md after:h-[1px] after:bg-secondary/20 after:shadow-md"
       />
-      {#if paginatedPosts.length}
-        {#each paginatedPosts as post, i}
-          <BlogPost
-            {i}
-            title={post.title}
-            tags={post?.tags}
-            published={post.published}
-            on:click={(event) => handleClick(post, event)}
-            on:keydown={(event) => handleKeyDown(post, event)}
-          />
-        {/each}
-        <Paginator
-          {pageSize}
-          currentPage={$currentPage}
-          totalItems={items.length}
-          limit={1}
-          showStepOptions={true}
-          on:setPage={(e) => ($currentPage = e.detail.page)}
-        />
-      {:else}
+      {#if $postQuery.isLoading}
         <div
           class="flex flex-wrap items-center justify-center"
           in:fade={{ duration: 500, easing: quintOut }}
         >
           <Icon height="35" width="35" icon="ic:round-filter-none" />
           <!-- prettier-ignore -->
           <p class="mx-6 my-12 max-w-fit text-center text-4xl font-bold text-secondary backdrop-blur-sm">
-            No Posts Found
+            Loading Posts...
           </p>
         </div>
+      {:else if $postQuery.isSuccess}
+        {#if paginatedPosts.length}
+          {#each paginatedPosts as post, i}
+            <BlogPost
+              {i}
+              title={post.title}
+              tags={post?.tags}
+              published={post.published}
+              on:click={(event) => handleClick(post, event)}
+              on:keydown={(event) => handleKeyDown(post, event)}
+            />
+          {/each}
+          <Paginator
+            {pageSize}
+            currentPage={$currentPage}
+            totalItems={items.length}
+            limit={1}
+            showStepOptions={true}
+            on:setPage={(e) => ($currentPage = e.detail.page)}
+          />
+        {:else}
+          <div
+            class="flex flex-wrap items-center justify-center"
+            in:fade={{ duration: 500, easing: quintOut }}
+          >
+            <Icon height="35" width="35" icon="ic:round-filter-none" />
+            <!-- prettier-ignore -->
+            <p class="mx-6 my-12 max-w-fit text-center text-4xl font-bold text-secondary backdrop-blur-sm">
+              No Posts Found
+            </p>
+          </div>
+        {/if}
       {/if}
     </div>
   </Container>

diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts
@@ -0,0 +1,13 @@
+import { trpc } from "$lib/trpc/client";
+
+import type { PageLoad } from "../[slug]/$types";
+import type { LoadEvent } from "@sveltejs/kit";
+
+export const load: PageLoad = async (event: LoadEvent) => {
+  const { queryClient } = await event.parent();
+
+  await queryClient.prefetchQuery({
+    queryFn: async () => trpc(event).posts.fetchPosts.query(),
+    queryKey: ["posts"]
+  });
+};