Consulting Index - Fixing the Static Site Rendering (#3284)

* Consulting Index - Fixing the Static Site Rendering Fixed #3283 Affected Route: `/consulting` * fixing the breadcrumb height to avoid any layout shift * removing unused import * Update app/consulting/index.tsx Co-authored-by: Jeoffrey Fischer [SSW] <[email protected]> --------- Co-authored-by: Jeoffrey Fischer [SSW] <[email protected]>
SSWConsulting · Nov 4, 2024 · 1dab824 · 1dab824
1 parent dc8d02b
commit 1dab824
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/app/consulting/index.tsx b/app/consulting/index.tsx
@@ -13,17 +13,13 @@ import { Category } from "@/components/consulting/index/category";
 import { Tag } from "@/components/consulting/index/tag";
 import { Container } from "@/components/util/container";
 import { Breadcrumbs } from "app/components/breadcrumb";
-import { useSearchParams } from "next/navigation";
 
 const allServices = "All SSW Services";
 
 export default function ConsultingIndex({ tinaProps }) {
   const gridRef = useRef(null);
-  const params = useSearchParams();
   const router = useRouter();
-  const [selectedTag, setSelectedTag] = useState(
-    getSelectedTagFromQuery(params.get("tag"))
-  );
+  const [selectedTag, setSelectedTag] = useState(allServices);
 
   const node = tinaProps.data.consultingIndex;
 
@@ -62,10 +58,13 @@ export default function ConsultingIndex({ tinaProps }) {
   );
 
   useEffect(() => {
-    // as the querystring changes, update the selected tag
-    const qsTag = getSelectedTagFromQuery(params.get("tag"));
-    setSelectedTag(qsTag);
-  }, [params]);
+    // We stopped using Next.js's useSearchParams function because it lead to complete client-side rendering, which impacts SEO and page load performance,
+    // Therefore we are now using javascript's function
+    const params = new URLSearchParams(window.location.search);
+    const query = getSelectedTagFromQuery(params.get("tag"));
+
+    setSelectedTag(query || allServices);
+  }, []);
 
   useEffect(() => {
     // grid animation seutp - will automatically clean itself up when dom node is removed
@@ -75,7 +74,9 @@ export default function ConsultingIndex({ tinaProps }) {
   return (
     <>
       <Container className="flex-1 pt-2">
-        <Breadcrumbs path={"/consulting"} suffix="" title={"Services"} />
+        <div className="min-h-8 w-full max-w-9xl md:min-h-12">
+          <Breadcrumbs path={"/consulting"} suffix="" title={"Services"} />
+        </div>
         <h1 className="pt-0 text-3xl">Consulting Services</h1>
         <div className="flex flex-col md:flex-row">
           <div className="shrink-0 md:pr-20">

diff --git a/components/consulting/index/pageCard.tsx b/components/consulting/index/pageCard.tsx
@@ -1,3 +1,4 @@
+import { BluredBase64Image } from "@/helpers/images";
 import classNames from "classnames";
 import Image from "next/image";
 import { tinaField } from "tinacms/dist/react";
@@ -21,6 +22,9 @@ export const PageCard = ({ page, category, pageIndex }) => {
               width={115}
               src={page.logo}
               alt={`${page.title} logo`}
+              loading="lazy"
+              placeholder="blur"
+              blurDataURL={BluredBase64Image}
             />
           )}
         </div>

diff --git a/tina/tina-lock.json b/tina/tina-lock.json