change: everything

app/routes/home.tsx

@@ -1,61 +1,35 @@
-import type { Route } from "./+types/home";
+import { useLoaderData } from "react-router";
 import StaticPost from "../components/staticPost";
-import { useState, useEffect } from "react";
 import type { PostContent } from "../components/post";
 
-export function meta({ }: Route.MetaArgs) {
-  return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
-  ];
-}
-
-export function loader({ context }: Route.LoaderArgs) {
-  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
+// Server-side loader - runs in Cloudflare Worker
+export async function loader({ context }: { context: { cloudflare: { env: { API: Fetcher } } } }) {
+  const env = context.cloudflare.env;
+  
+  // Use service binding instead of fetch()
+  const response = await env.API.fetch(new Request("http://internal/feed"));
+  
+  if (!response.ok) {
+    throw new Response("Failed to load feed", { status: response.status });
+  }
+  
+  const feedContent: PostContent[] = await response.json();
+  return { feedContent };
 }
 
+// Client component - no useEffect needed!
 export default function Home() {
-  const [feedContent, setFeedContent] = useState<Array<PostContent>>();
-  const [isLoading, setIsLoading] = useState(true);
+  const { feedContent } = useLoaderData<typeof loader>();
 
-  useEffect(() => {
-    const fetchFeed = async () => {
-      try {
-        const response = await fetch(`http://localhost:8787/feed`);
-
-        // check if response is actually OK (status 200-299)
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const jsonContent: PostContent[] = await response.json();
-        setFeedContent(jsonContent);
-
-      } catch (e) {
-        console.error("Fetch failed:", e);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchFeed();
-  }, []);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
+  if (!feedContent || feedContent.length === 0) {
+    return <p>No posts found.</p>;
   }
 
-  if (!feedContent) {
-    return <p>Failed to load!</p>;
-  }
   return (
     <>
-      {feedContent && feedContent.length > 0 ? (
-        feedContent.map((post) => {
-          return <StaticPost postContent={post} />
-        })
-      ) : (
-        <p>No replies found for this thread.</p>
-      )}
+      {feedContent.map((post) => (
+        <StaticPost key={post.id} postContent={post} />
+      ))}
     </>
-  )
-}
+  );
+}