Defer PostGallery to client, Suspense just isn't working well

package.json

@@ -23,7 +23,7 @@
     "eslint-config-prettier": "^9.1.0",
     "hygen": "^6.2.11",
     "prettier": "^3.2.5",
-    "sst": "^2.40.6",
+    "sst": "^2.41.4",
     "typescript": "^5.4.0",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.3.1"

packages/web/actions/getPublishedPostsWithTagsAction.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { Post } from '@core/post';
+
+async function getPosts(tag?: string) {
+  let posts = [];
+  let query = Post.getPublishedPostsWithTags;
+
+  if (tag) {
+    query = () => Post.getPublishedPostsByTagWithRelations(tag);
+  }
+
+  try {
+    posts = await query();
+  } catch (err) {
+    posts = await query();
+  }
+
+  return posts;
+}
+
+export default getPosts;

packages/web/app/page.tsx

@@ -3,8 +3,6 @@ import RetroGrid from '@/components/RetroGrid';
 import Oasis from '@/components/Oasis';
 import FullBleed from '@/components/FullBleed';
 import PrimaryLink, { PrimaryNewTabLink } from '@/components/PrimaryLink';
-import { Suspense } from 'react';
-import PostSkeletonGallery from '@/components/PostSkeletonGallery';
 import TextWithBorder from '@/components/TextWithBorder';
 import Link from 'next/link';
 import PostGalleryContainer from '@/components/PostGalleryContainer';
@@ -60,9 +58,7 @@ export default function Home() {
         <TextWithBorder as={Link} href="/blog" className={styles.postsLink}>
           Blog Posts
         </TextWithBorder>
-        <Suspense fallback={<PostSkeletonGallery />}>
-          <PostGalleryContainer />
-        </Suspense>
+        <PostGalleryContainer />
       </div>
 
       <FullBleed>

packages/web/components/PostGallery/PostGallery.tsx

@@ -1,30 +1,50 @@
+'use client';
+
 import styles from './PostGallery.module.css';
 import { PublishedPostWithTags } from '@core/post';
 import PostCard from '@/components/PostCard';
+import { useEffect, useState } from 'react';
+import PostSkeletonGallery from '../PostSkeletonGallery';
 
 interface Props {
-  posts: PublishedPostWithTags[];
+  getPosts: Function;
 }
 
-const PostGallery = ({ posts }: Props) => {
-  return (
-    <div className={styles.gallery}>
-      {posts.map((post) => {
-        const { id, title, slug, published_on, abstract, tags, updated } = post;
-        return (
-          <PostCard
-            key={id}
-            title={title}
-            slug={slug}
-            publishedOn={published_on}
-            abstract={abstract}
-            tags={tags}
-            updated={updated}
-          />
-        );
-      })}
-    </div>
-  );
+const PostGallery = ({ getPosts }: Props) => {
+  const [posts, setPosts] = useState<PublishedPostWithTags[]>([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const data = await getPosts();
+      setPosts(data);
+    };
+
+    getData();
+  }, []);
+
+  if (posts.length) {
+    return (
+      <div className={styles.gallery}>
+        {posts.map((post) => {
+          const { id, title, slug, published_on, abstract, tags, updated } =
+            post;
+          return (
+            <PostCard
+              key={id}
+              title={title}
+              slug={slug}
+              publishedOn={published_on}
+              abstract={abstract}
+              tags={tags}
+              updated={updated}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  return <PostSkeletonGallery />;
 };
 
 export default PostGallery;

packages/web/components/PostGalleryContainer/PostGalleryContainer.tsx

@@ -5,21 +5,27 @@ interface Props {
   tag?: string;
 }
 
-const PostGalleryContainer = async ({ tag }: Props) => {
-  let posts = [];
-  let query = Post.getPublishedPostsWithTags;
+const PostGalleryContainer = ({ tag }: Props) => {
+  async function getPosts() {
+    'use server';
 
-  if (tag) {
-    query = () => Post.getPublishedPostsByTagWithRelations(tag);
-  }
+    let posts = [];
+    let query = Post.getPublishedPostsWithTags;
+
+    if (tag) {
+      query = () => Post.getPublishedPostsByTagWithRelations(tag);
+    }
+
+    try {
+      posts = await query();
+    } catch (err) {
+      posts = await query();
+    }
 
-  try {
-    posts = await query();
-  } catch (err) {
-    posts = await query();
+    return posts;
   }
 
-  return <PostGallery posts={posts} />;
+  return <PostGallery getPosts={getPosts} />;
 };
 
 export default PostGalleryContainer;

packages/web/components/PostSkeletonGallery/PostSkeletonGallery.module.css

@@ -1,9 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
 .gallery {
   display: grid;
   gap: 2rem;
@@ -16,15 +10,6 @@
   border-radius: 4px;
 }
 
-.link {
-  text-wrap: balance;
-  line-height: 1.1;
-  overflow-wrap: break-word;
-  display: block;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
 @media (max-width: 30rem) {
   .gallery {
     grid-template-columns: 1fr;

packages/web/package.json

@@ -29,7 +29,7 @@
     "js-cookie": "^3.0.5",
     "logrocket": "^8.1.0",
     "marked": "^12.0.1",
-    "next": "^14.1.3",
+    "next": "^14.1.4",
     "next-mdx-remote": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",