fix: Behebt Endlosschleife und doppelte Recoil-Atom-Registrierung

- `index.js` als Client-Komponente deklariert (`"use client"`) zur Vermeidung von SSR-Problemen.
- `useEffect` optimiert, um unendliche API-Requests durch `isMounted`-Check zu verhindern.
- `loadData()` angepasst, um API-Fehler korrekt abzufangen und erneute Ladeversuche zu vermeiden.
- Doppelte Registrierung von `poiReadFromDbTriggerAtom` durch HMR verhindert.
- Ungültige MySQL-Option `acquireTimeout` entfernt, um Verbindungsfehler zu beheben.

Diese Änderungen verhindern unerwartete Reloads und verbessern die Stabilität der Anwendung.

pages/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRecoilState, useRecoilValue } from "recoil";
@@ -5,7 +6,6 @@ import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 
 const MapComponentWithNoSSR = dynamic(() => import("../components/MapComponent"), { ssr: false });
-// TestScript ohne SSR
 const TestScriptWithNoSSR = dynamic(() => import("../components/TestScript"), { ssr: false });
 
 export default function Home() {
@@ -14,6 +14,7 @@ export default function Home() {
   const [mParam, setMParam] = useState("");
   const [uParam, setUParam] = useState("");
 
+  // Daten abrufen
   const loadData = async () => {
     try {
       const response = await fetch("/api/talas_v5_DB/pois/readLocations");
@@ -27,17 +28,32 @@ export default function Home() {
     }
   };
 
+  // Verhindert mehrfaches Laden durch doppelte Registrierung
   useEffect(() => {
+    let isMounted = true;
+
     function getURLParameter(name) {
       const params = new URLSearchParams(window.location.search);
       return params.get(name);
     }
+
     setMParam(getURLParameter("m"));
     setUParam(getURLParameter("u"));
 
-    loadData();
-  }, [poiReadTrigger]);
+    const fetchData = async () => {
+      await loadData();
+    };
 
+    if (isMounted) {
+      fetchData();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [poiReadTrigger]); // Nur einmal bei Änderung von poiReadTrigger ausführen
+
+  // POI hinzufügen
   const handleAddLocation = async (name, type, lat, lng) => {
     try {
       const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -48,21 +64,17 @@ export default function Home() {
       if (!response.ok) {
         throw new Error("Fehler beim Hinzufügen des Standorts");
       }
-      //console.log("Standort erfolgreich hinzugefügt");
       loadData();
     } catch (error) {
       console.error(error.message);
     }
   };
 
+  // Standort aktualisieren
   const handleLocationUpdate = (id, newLatitude, newLongitude) => {
     setLocations((prevLocations) => prevLocations.map((location) => (location.idPoi === id ? { ...location, position: `POINT(${newLongitude} ${newLatitude})` } : location)));
   };
 
-  useEffect(() => {
-    loadData();
-  }, [poiReadTrigger]);
-
   return (
     <div>
       <MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} onLocationUpdate={handleLocationUpdate} />