Removing heavy comp from the client

components/common/Navbar/Navbar.tsx

@@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
       </div>
 
       <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar />
+        <Searchbar id="mobileSearch" />
       </div>
     </div>
   )

components/common/Searchbar/Searchbar.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useMemo } from 'react'
 import cn from 'classnames'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
@@ -15,48 +15,51 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
     router.prefetch('/search')
   }, [])
 
-  return (
+  return useMemo(
-    <div
+    () => (
-      className={cn(
+      <div
-        'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
+        className={cn(
-        className
+          'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
-      )}
+          className
-    >
+        )}
-      <label className="hidden" htmlFor={id}>
+      >
-        Search
+        <label className="hidden" htmlFor={id}>
-      </label>
+          Search
-      <input
+        </label>
-        id={id}
+        <input
-        className={s.input}
+          id={id}
-        placeholder="Search for products..."
+          className={s.input}
-        defaultValue={router.query.q}
+          placeholder="Search for products..."
-        onKeyUp={(e) => {
+          defaultValue={router.query.q}
-          e.preventDefault()
+          onKeyUp={(e) => {
+            e.preventDefault()
 
-          if (e.key === 'Enter') {
+            if (e.key === 'Enter') {
-            const q = e.currentTarget.value
+              const q = e.currentTarget.value
 
-            router.push(
+              router.push(
-              {
+                {
-                pathname: `/search`,
+                  pathname: `/search`,
-                query: q ? { q } : {},
+                  query: q ? { q } : {},
-              },
+                },
-              undefined,
+                undefined,
-              { shallow: true }
+                { shallow: true }
-            )
+              )
-          }
+            }
-        }}
+          }}
-      />
+        />
-      <div className={s.iconContainer}>
+        <div className={s.iconContainer}>
-        <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+          <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-          <path
+            <path
-            fillRule="evenodd"
+              fillRule="evenodd"
-            clipRule="evenodd"
+              clipRule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          />
+            />
-        </svg>
+          </svg>
+        </div>
       </div>
-    </div>
+    ),
+    []
   )
 }
 

pages/index.tsx

@@ -17,47 +17,33 @@ export async function getStaticProps({
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
 
+  // Get Featured Products
   const { products: featuredProducts } = await getAllProducts({
     variables: { field: 'featuredProducts', first: 6 },
     config,
     preview,
   })
+
+  // Get Best Selling Products
   const { products: bestSellingProducts } = await getAllProducts({
     variables: { field: 'bestSellingProducts', first: 6 },
     config,
     preview,
   })
+
+  // Get Best Newest Products
   const { products: newestProducts } = await getAllProducts({
     variables: { field: 'newestProducts', first: 12 },
     config,
     preview,
   })
+
   const { categories, brands } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
 
-  return {
+  // These are the products that are going to be displayed in the landing.
-    props: {
+  // We prefer to do the computation at buildtime/servertime
-      featuredProducts,
+  const { featured, bestSelling } = (() => {
-      bestSellingProducts,
-      newestProducts,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 10,
-  }
-}
-
-const nonNullable = (v: any) => v
-
-export default function Home({
-  featuredProducts,
-  bestSellingProducts,
-  newestProducts,
-  categories,
-  brands,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { featured, bestSelling } = useMemo(() => {
     // Create a copy of products that we can mutate
     const products = [...newestProducts]
     // If the lists of featured and best selling products don't have enough
@@ -73,8 +59,30 @@ export default function Home({
         (i) => bestSellingProducts[i] ?? products.shift()
       ).filter(nonNullable),
     }
-  }, [newestProducts, featuredProducts, bestSellingProducts])
+  })()
 
+  return {
+    props: {
+      featured,
+      bestSelling,
+      newestProducts,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 10,
+  }
+}
+
+const nonNullable = (v: any) => v
+
+export default function Home({
+  featured,
+  bestSelling,
+  brands,
+  categories,
+  newestProducts,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div>
       <Grid>