fix(feed): fetch posts on client-side to avoid empty data issue during Vercel server rendering

Author: Roger-Melo

src/app/(private)/feed/layout.tsx

@@ -1,29 +1,7 @@
-import { postsDataSchema } from "@/lib/types"
-import { baseUrl } from "@/lib/utils"
 import { FeedClientWrapper } from "@/components/feed-client-wrapper"
 
-function PageErrorMessage() {
-  return (
-    <h2 className="text-center mx-auto text-primary-red">
-      Could not get the page. Please try again in a few minutes.
-    </h2>
-  )
-}
-
 type FeedLayoutProps = { children: React.ReactNode }
 
 export default async function FeedLayout({ children }: FeedLayoutProps) {
-  const response = await fetch(baseUrl, { cache: "no-store" })
-
-  if (!response.ok) {
-    return <PageErrorMessage />
-  }
-
-  const data: unknown = await response.json()
-  console.log("data:", data)
-  const validatedData = postsDataSchema.safeParse(data)
-  console.log("validatedData:", validatedData)
-  return validatedData.success
-    ? <FeedClientWrapper data={validatedData.data.results}>{children}</FeedClientWrapper>
-    : <PageErrorMessage />
+  return <FeedClientWrapper>{children}</FeedClientWrapper>
 }

src/components/feed-client-wrapper.tsx

@@ -5,16 +5,16 @@ import { useRouter } from "next/navigation"
 import { PostsContextProvider } from "@/contexts/posts-context-provider"
 import { useUsernameContext } from "@/lib/hooks"
 import { Post } from "@/lib/types"
+import { baseUrl } from "@/lib/utils"
+import { postsDataSchema } from "@/lib/types"
 
-type ClientProtectionProps = {
-  children: React.ReactNode
-  data: Post[]
-}
+type ClientProtectionProps = { children: React.ReactNode }
 
-export function FeedClientWrapper({ data, children }: ClientProtectionProps) {
+export function FeedClientWrapper({ children }: ClientProtectionProps) {
   const router = useRouter()
   const { usernameState } = useUsernameContext()
   const [hasMounted, setHasMounted] = useState(false)
+  const [posts, setPosts] = useState<Post[] | null>(null)
 
   useEffect(() => {
     setHasMounted(true)
@@ -26,6 +26,20 @@ export function FeedClientWrapper({ data, children }: ClientProtectionProps) {
     }
   }, [hasMounted, usernameState, router])
 
+  useEffect(() => {
+    async function loadPosts() {
+      const response = await fetch(baseUrl)
+      const data: unknown = await response.json()
+      const validatedData = postsDataSchema.safeParse(data)
+      setPosts(validatedData.success ? validatedData.data.results : [])
+    }
+    loadPosts()
+  }, [])
+
+  if (posts === null) {
+    return <p className="text-center">Loading posts...</p>
+  }
+
   // no conditional null return to avoid hydration mismatch
-  return <PostsContextProvider data={data}>{children}</PostsContextProvider>
+  return <PostsContextProvider data={posts}>{children}</PostsContextProvider>
 }