fetch readme files using ssr

components/Readme.tsx

@@ -1,5 +1,3 @@
-"use client";
-import { useEffect, useState } from "react";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 import { Box, Button, Dialog, Text } from "@radix-ui/themes";
 import { FaReadme } from "react-icons/fa6";
@@ -10,45 +8,32 @@ interface ReadmeProps {
   children: React.ReactNode;
 }
 
-// The Readme component fetches and displays the content of a README.md file from a provided URL.
-export default function Readme({ url, children }: ReadmeProps) {
-  // State to hold the content of the README file
-  const [content, setContent] = useState<string | null>(null);
-  // State to track if there was an error fetching the README file
-  const [error, setError] = useState<boolean>(false);
-
-  useEffect(() => {
-    // Function to fetch the README content
-    const fetchReadme = async () => {
-      try {
-        const response = await fetch(url);
-        // Check if the response is not OK and throw an error
-        if (!response.ok) {
-          console.log(`Failed to fetch README.md: ${url}`);
-        }
-        const text = await response.text();
-        // Check if the content is not the GitHub 404 message
-        text === "404: Not Found" ? setError(true) : setContent(text);
-      } catch (err) {
-        // Catch any network or other errors and set the error state
-        console.error(err);
-        setError(true);
-      }
-    };
-
-    // Call the fetch function
-    fetchReadme();
-  }, [url]);
-
-  // If there was an error, return null to render nothing
-  if (error) {
-    return null;
+const getData = async (url: string) => {
+  try {
+    const response = await fetch(url);
+    // Check if the response is not OK and throw an error
+    if (!response.ok) {
+      console.log(`Failed to fetch README.md: ${url}`);
+    }
+    const text = await response.text();
+    // Check if the content is not the GitHub 404 message
+    if (text === "404: Not Found") {
+      return null;
+    }
+    return text;
+  } catch (err) {
+    // Catch any network or other errors and set the error state
+    console.error(err);
   }
+};
+// The Readme component fetches and displays the content of a README.md file from a provided URL.
+export default async function Readme({ url, children }: ReadmeProps) {
+  const data = await getData(url);
 
   // If content is available, render the Dialog with the README content
   return (
     <>
-      {!error && content && (
+      {data && (
         <Dialog.Root>
           <Dialog.Trigger className="dialog-trigger">
             <Box>
@@ -57,9 +42,9 @@ export default function Readme({ url, children }: ReadmeProps) {
             </Box>
           </Dialog.Trigger>
           <Dialog.Content>
-            <Dialog.Title className="flex flex-row justify-between w-full">
+            <Dialog.Title className="flex w-full flex-row justify-between">
               <Dialog.Close>
-                <Box className="flex flex-row items-center justify-between w-full gap-3">
+                <Box className="flex w-full flex-row items-center justify-between gap-3">
                   <Text>README.md</Text>
                   <Button
                     variant="soft"
@@ -72,7 +57,7 @@ export default function Readme({ url, children }: ReadmeProps) {
               </Dialog.Close>
             </Dialog.Title>
             {/* Use MarkdownPreview to render the markdown content */}
-            <MarkdownPreview source={content || "No content available."} />
+            <MarkdownPreview source={data || "No content available."} />
           </Dialog.Content>
         </Dialog.Root>
       )}