converted products page into server side.

src/app/(storefront)/products/page.tsx

@@ -1,40 +1,33 @@
-'use client';
-
 import { HttpTypes } from '@medusajs/types';
 // import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+// import { useEffect, useState } from 'react';
 
-export default function ProductsPage() {
-  const [loading, setLoading] = useState(true);
-
-  const [products, setProducts] = useState<HttpTypes.StoreProduct[]>([]);
-
-  useEffect(() => {
-    if (!loading) {
-      return;
-    }
+async function fetchProducts() {
   const params = new URLSearchParams({
-      // fields: `*variants.calculated_price`,
     fields: `*variants.prices.*`,
     region_id: process.env.NEXT_PUBLIC_DEFAULT_REGION_ID as string,
   });
-    console.log('url: ', `${process.env.NEXT_PUBLIC_BASE_URL}/store/products?${params}`);
-    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/products?${params}`, {
+
+  const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/store/products?${params}`, {
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
       'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY as string,
     },
-    })
-      .then((res) => res.json())
-      .then((data) => data.products)
-      .then((data) => {
-        setProducts(data);
-        setLoading(false);
   });
-  }, [loading]);
 
+  if (!response.ok) {
+    console.error('Failed to fetch products:', response.statusText);
+    return [];
+  }
+
+  const data = await response.json();
+  return data.products;
+}
+
+export default async function ProductsPage() {
+  const products: HttpTypes.StoreProduct[] = await fetchProducts();
   return (
     <div className='container mx-auto py-12 pt-28'>
       {/* Products Grid */}