Client liest die Platzhalter auf dem CPL

components/DeviceData.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+
+const DeviceData = () => {
+  const [deviceData, setDeviceData] = useState("");
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch("/api/fetchDeviceData");
+        if (!response.ok) {
+          throw new Error(`Fehler beim Abrufen der Daten: ${response.status}`);
+        }
+        const data = await response.json();
+        setDeviceData(data.content); // Die Daten aus der API-Antwort setzen
+      } catch (error) {
+        setError(error.message);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      {error ? (
+        <p>Fehler: {error}</p>
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: deviceData }} />
+      )}
+    </div>
+  );
+};
+
+export default DeviceData;

components/Header.jsx

@@ -9,7 +9,7 @@ function Header() {
 
   useEffect(() => {
     // API-Aufruf, um die Daten vom Server zu holen
-    fetch("http://localhost:3000/api/server", { mode: "cors" })
+    fetch("http://localhost:3000/api/server?path=main.js", { mode: "cors" })
       .then((response) => {
         if (!response.ok) {
           throw new Error("Fehler beim Abrufen der Daten");