debug: hydration error

components/background.tsx

@@ -1,41 +1,48 @@
-import Image from "next/image";
+"use client";
-import { useRecoilValue } from "recoil";
-import { settingsState } from "./state/settings";
-import validUrl from "valid-url";
-import validateColor from "validate-color";
 
-function Background(props: {
+import { useEffect, useState } from "react";
-    isFocus: boolean;
+import { useRecoilState } from "recoil";
-    src: string;
+import { bgFocusState } from "./state/background";
-    onClick: () => void;
+
-}) {
+import dynamic from "next/dynamic";
-    const settings = useRecoilValue(settingsState);
+
-    if (validateColor(props.src)) {
+const Background = dynamic(() => import("./backgroundContainer"), { ssr: false });
+
+export default function () {
+    const [isFocus, setFocus] = useRecoilState(bgFocusState);
+    const [colorScheme, setColorScheme] = useState("light");
+
+    useEffect(() => {
+        const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+
+        const handleChange = () => {
+            setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+        };
+
+        colorSchemeQueryList.addEventListener("change", handleChange);
+
+        return () => {
+            colorSchemeQueryList.removeEventListener("change", handleChange);
+        };
+    }, []);
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
     return (
-            <div
+        <div suppressHydrationWarning>
-                className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
+            {isClient && (
-                style={{ backgroundColor: props.src }}
+                <div>
-                onClick={props.onClick}
+                    {colorScheme === "dark" && (
-            ></div>
+                        <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
-        );
+                    )}
-    } else if (validUrl.isWebUri(props.src)) {
+                    {colorScheme === "light" && (
-        return (
+                        <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />
-            <Image
+                    )}
-                src={props.src}
+                </div>
-                className={
+            )}
-                    "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
+        </div>
-                    (props.isFocus
-                        ? settings.bgBlur
-                            ? "blur-lg scale-110"
-                            : "brightness-50 scale-105"
-                        : "")
-                }
-                alt="background"
-                onClick={props.onClick}
-                fill={true}
-            />
     );
 }
-}
-
-export default Background;

components/backgroundContainer.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import { useRecoilValue } from "recoil";
+import { settingsState } from "./state/settings";
+import validUrl from "valid-url";
+import validateColor from "validate-color";
+
+export default function(props: {
+    isFocus: boolean;
+    src: string;
+    onClick: () => void;
+}) {
+    const settings = useRecoilValue(settingsState);
+    if (validateColor(props.src)) {
+        return (
+            <div
+                className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
+                style={{ backgroundColor: props.src }}
+                onClick={props.onClick}
+            ></div>
+        );
+    } else if (validUrl.isWebUri(props.src)) {
+        return (
+            <Image
+                src={props.src}
+                className={
+                    "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
+                    (props.isFocus
+                        ? settings.bgBlur
+                            ? "blur-lg scale-110"
+                            : "brightness-50 scale-105"
+                        : "")
+                }
+                alt="background"
+                onClick={props.onClick}
+                fill={true}
+            />
+        );
+    }
+}

components/index.tsx

@@ -1,41 +1,25 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import { settingsState } from "./state/settings";
-import Background from "./background";
 import Search from "./search/search";
 import { bgFocusState } from "./state/background";
 import Time from "./time";
 import loadSettings from "@/lib/loadSettings";
 import EngineSelector from "./search/engineSelector";
-import SuggestionBox from "./search/onesearch/suggestionBox";
-import Suggestion from "./search/onesearch/suggestion";
 import Onesearch from "./search/onesearch/onesearch";
+import Background from "./background";
+
 
 export default function Homepage() {
     const [settings, setSettings] = useRecoilState(settingsState);
-    const [isFocus, setFocus] = useRecoilState(bgFocusState);
+    const setFocus = useSetRecoilState(bgFocusState);
-    const [colorScheme, setColorScheme] = useState("");
 
     useEffect(() => {
         loadSettings(setSettings);
     }, [setSettings]);
 
-    useEffect(() => {
-        const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-        setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
-
-        const handleChange = () => {
-            setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
-        };
-
-        colorSchemeQueryList.addEventListener("change", handleChange);
-
-        return () => {
-            colorSchemeQueryList.removeEventListener("change", handleChange);
-        };
-    }, []);
 
     return (
         <div className="h-full fixed overflow-hidden w-full bg-black">
@@ -43,12 +27,10 @@ export default function Homepage() {
             <EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
             left-1/2 w-11/12 sm:w-[700px] text:black text-right
             dark:text-white text-3xl text-shadow-lg z-10"/>
-            {colorScheme === "dark" && (
+            <Background />
-                <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
-            )}
-            {colorScheme === "light" && <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />}
             <Search onFocus={() => setFocus(true)} />
             <Onesearch />
+            <p className="z-20 relative text-white text-2xl">FUCK YOU SSR</p>
         </div>
     );
 }