✏️ add suspense boundaries when using useSearchParams

src/app/(store)/product/[slug]/page.tsx

@@ -31,14 +31,14 @@ export async function generateMetadata({
   }
 }
 
-// export async function generateStaticParams() {
-//   const response = await api('/products/featured')
-//   const products: Product[] = await response.json()
-
-//   return products.map((product) => {
-//     return { slug: product.slug }
-//   })
-// }
+export async function generateStaticParams() {
+  const response = await api('/products/featured')
+  const products: Product[] = await response.json()
+
+  return products.map((product) => {
+    return { slug: product.slug }
+  })
+}
 
 export default async function ProductPage({ params }: ProductProps) {
   const product = await getProduct(params.slug)

src/app/(store)/search/current-search.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export function CurrentSearch() {
+  const searchParams = useSearchParams()
+
+  const query = searchParams.get('q')
+
+  return (
+    <p className="text-sm">
+      Resultados para: <span className="font-semibold">{query}</span>
+    </p>
+  )
+}

src/app/(store)/search/loading.tsx

@@ -1,18 +1,13 @@
-'use client'
-
+import { Suspense } from 'react'
 import { Skeleton } from '@/components/skeleton'
-import { useSearchParams } from 'next/navigation'
+import { CurrentSearch } from './current-search'
 
 export default function SearchLoading() {
-  const searchParams = useSearchParams()
-
-  const query = searchParams.get('q')
-
   return (
     <div className="flex flex-col gap-4">
-      <p className="text-sm">
-        Resultados para: <span className="font-semibold">{query}</span>
-      </p>
+      <Suspense fallback={null}>
+        <CurrentSearch />
+      </Suspense>
 
       <div className="grid grid-cols-3 gap-6">
         <Skeleton className="h-[400px]" />

src/components/header.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { CartWidget } from './cart-widget'
@@ -11,7 +12,9 @@ export function Header() {
           devstore
         </Link>
 
-        <SearchForm />
+        <Suspense fallback={null}>
+          <SearchForm />
+        </Suspense>
       </div>
 
       <div className="flex items-center gap-4">