dynami

app/page.tsx

@@ -3,8 +3,6 @@ import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';
 
-export const runtime = 'edge';
-
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
   openGraph: {

components/dynamic.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from 'react';
+//import { dynamic } from "next/render-mode"
+import "server-only";
+
+function D({ children }: { children: React.ReactNode }) {
+  //dynamic();
+  return children;
+}
+
+export function Dynamic({fallback, error, children}: {
+    fallback: React.ReactNode, 
+    error: string,
+    children: React.ReactNode
+}) {
+  return (
+    <Suspense fallback={fallback}>
+        <D>{children}</D>
+    </Suspense>
+  );
+}

components/layout/navbar/index.tsx

@@ -1,10 +1,10 @@
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
+import { Dynamic } from 'components/dynamic';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
-import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
 const { SITE_NAME } = process.env;
@@ -44,9 +44,9 @@ export default async function Navbar() {
           <Search />
         </div>
         <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
+          <Dynamic fallback={<OpenCart />} error="There was an error opening the cart.">
             <Cart />
-          </Suspense>
+          </Dynamic>
         </div>
       </div>
     </nav>

package.json

@@ -27,7 +27,8 @@
     "clsx": "^2.0.0",
     "next": "13.4.13-canary.15",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "server-only": "^0.0.1"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@headlessui/react':
     specifier: ^1.7.15
@@ -19,6 +23,9 @@ dependencies:
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  server-only:
+    specifier: ^0.0.1
+    version: 0.0.1
 
 devDependencies:
   '@tailwindcss/container-queries':
@@ -2898,6 +2905,10 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}