new version without SSR

CyberAula · Jun 10, 2024 · dba4c40 · dba4c40
1 parent 45c86df
commit dba4c40
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/app/layout.js b/app/layout.js
@@ -1,19 +1,26 @@
-"use client"
+"use client";
 
 import { Montserrat } from "next/font/google";
 import './sass/main.scss';
 import "./globals.sass";
-// import 'bootstrap/dist/css/bootstrap.min.css';
+import { useState, useEffect } from "react";
 
 // import i18n (needs to be bundled ;))
 import './i18n';
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {
+  //disable SSR whole project, this will make the project to be rendered only on client side
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   return (
-    <html lang="en">
-      <body className={montserrat.className}>{children}</body>
+    <html hola="bye">
+      <body className={montserrat.className}>{isClient ? children:null}</body>
     </html>
   );
 }
diff --git a/app/tools/page.js b/app/tools/page.js
@@ -64,12 +64,12 @@ export default function Tools(props) {
               {tools.map(
                 ({ title, description, route, logo, github, gradient }) => {
                   return (
-                    <div className="tool">
+                    <div className="tool" key={title}>
                       <div className={`tool_logo ${gradient}`}>
                         <img alt={"Project Logo"} src={logo} />
                       </div>
 
-                      <div class="tool_content">
+                      <div className="tool_content">
                         <div className="tool_title">
                           <h3>{title}</h3>
                         </div>

diff --git a/components/Footer.js b/components/Footer.js
@@ -15,6 +15,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { useTranslation } from "react-i18next";
 
+
 export default function Footer(props) {
   const { t } = useTranslation();
   const routes = [
@@ -59,7 +60,7 @@ export default function Footer(props) {
                     : "text-left mb-2 font-medium"
                 }
               >
-                <Link suppressHydrationWarning  className="font-medium" href={route.route}>
+                <Link className="font-medium" href={route.route}>
                 {t(route.key)}
                 </Link>
               </li>

diff --git a/components/Header.js b/components/Header.js
@@ -79,7 +79,7 @@ export default function Header(props) {
               key={index}
               className={route.route === props.route ? "li-selected" : ""}
             >
-              <Link href={route.route} suppressHydrationWarning >{t(route.key)}</Link>
+              <Link href={route.route} >{t(route.key)}</Link>
             </li>
           ))}
         </ul>

diff --git a/components/RecentPublications.js b/components/RecentPublications.js
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 import { useState, useEffect } from "react";