Make header render client side

components/layout/Header.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
 import Hyperlink from "@/components/ui/Hyperlink";
 import { getServices } from "@/lib/api/helpers/services";
 import { Service } from "@/lib/api/types";
@@ -40,11 +44,19 @@ const defaultServices: Service[] = [
   },
 ];
 
-export default async function Header() {
-  let services = await getServices();
-  if (services.length < 1) {
-    services = defaultServices;
-  }
+export default function Header() {
+  const [services, setServices] = useState<Service[]>(defaultServices);
+  useEffect(() => {
+    getServices()
+      .then((services) => {
+        if (services.length > 0) {
+          setServices(services);
+        }
+      })
+      .catch(() => {
+        // Keep default services if the backend is not reached :C
+      });
+  }, []);
   return (
     <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
       <nav className="flex items-center justify-around w-full h-full px-6 py-4">