From 0149400e48ad4e4932db434c74e4bca52f903ca8 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Fri, 17 Jan 2025 12:55:42 -0700
Subject: [PATCH] No ssr for next.js app router until add support for RSC

---
 examples/nextjs/app/layout.tsx |  2 --
 examples/nextjs/app/page.tsx   | 17 ++++++++++-------
 examples/nextjs/package.json   |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
index 98207133e7..dded27eb6a 100644
--- a/examples/nextjs/app/layout.tsx
+++ b/examples/nextjs/app/layout.tsx
@@ -1,6 +1,5 @@
 import "./style.css"
 import "./App.css"
-import { ElectricScripts } from "@electric-sql/react"
 
 export const metadata = {
   title: `Next.js Forms Example`,
@@ -21,7 +20,6 @@ export default function RootLayout({
             {children}
           </header>
         </div>
-       <ElectricScripts />
       </body>
     </html>
   )
diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
index 88bf8899d2..21bf0f38a5 100644
--- a/examples/nextjs/app/page.tsx
+++ b/examples/nextjs/app/page.tsx
@@ -1,11 +1,14 @@
-import { preloadShape } from "@electric-sql/react"
-import { itemShapeOptions } from "./items"
-import { ItemsList } from "./items-list"
+import dynamic from 'next/dynamic'
 import "./Example.css"
 
-export default async function Page() {
-  // Preload shape data during SSR
-  await preloadShape(itemShapeOptions)
+// Dynamic import of ItemsList with SSR disabled
+const ClientItemsList = dynamic(
+  () => import('./items-list').then(mod => mod.ItemsList),
+  {
+    ssr: false,
+  }
+)
 
-  return <ItemsList />
+export default function Page() {
+  return <ClientItemsList />
 }
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index cd230b73bf..b6ef1252eb 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -9,7 +9,7 @@
     "backend:up": "PROJECT_NAME=nextjs-example pnpm -C ../../ run example-backend:up && pnpm db:migrate",
     "backend:down": "PROJECT_NAME=nextjs-example pnpm -C ../../ run example-backend:down",
     "db:migrate": "dotenv -e ../../.env.dev -- pnpm exec pg-migrations apply --directory ./db/migrations",
-    "dev": "next dev --turbo -p 5173",
+    "dev": "next dev --turbo -p 5174",
     "build": "next build",
     "start": "next start",
     "format": "eslint . --fix",