Server and Client communication is successful

app/dashboard/page.jsx

@@ -1,19 +1,58 @@
 "use client";
-import React, { useEffect } from "react";
-
-import Image from "next/image";
-import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird
-import "@fontsource/roboto"; // Standardimport für alle Schriftstärken
+import React, { useEffect, useState } from "react";
+import "tailwindcss/tailwind.css";
+import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Dashboard() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Funktion zum Abrufen der ersetzten Platzhalterdaten vom Server
+    const fetchData = async () => {
+      try {
+        // Abrufen des Inhalts der Datei mit Platzhalterersetzung
+        const response = await fetch(
+          "http://localhost:3000/api/server?path=main.js",
+          {
+            mode: "cors", // stellt sicher, dass eine CORS-Anfrage gesendet wird
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const result = await response.text(); // Beachte, dass dies `text()` statt `json()` ist, da wir den JS-Inhalt bekommen wollen
+        setData(result);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setError(error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <div className="bg-gray-100 flex flex-col min-h-screen">
       <div className="flex flex-grow w-full">
-        {/* Main Section */}
+        {/* Hauptinhalt */}
         <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
-          {/* Hauptinhalt */}
-          <h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1>
+          <h1 className="text-2xl font-bold mb-4">Letzten 20 Meldungen:</h1>
+          {loading && <p>Loading data...</p>}
+          {error && <p className="text-red-500">Error: {error.message}</p>}
+          {data && (
+            <div>
+              <h2>Ersetzte Datei-Inhalte:</h2>
+              {/* Verwenden von dangerouslySetInnerHTML um den JS-Inhalt einzubinden */}
+              <pre dangerouslySetInnerHTML={{ __html: data }}></pre>
+            </div>
+          )}
         </main>
       </div>
     </div>