From b38d62f5908c044c0146a0ac688ac8f53cac8338 Mon Sep 17 00:00:00 2001
From: jerensl <54782057+jerensl@users.noreply.github.com>
Date: Fri, 5 Jul 2024 14:46:37 +0800
Subject: [PATCH 1/4] fix(cold-start): add another component as layer for lazy
 loading

---
 apps/studio-next/src/app/page.tsx                |  5 ++---
 apps/studio-next/src/components/StudioEditor.tsx | 10 ++++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 apps/studio-next/src/components/StudioEditor.tsx

diff --git a/apps/studio-next/src/app/page.tsx b/apps/studio-next/src/app/page.tsx
index 05bde7e06..e61bc475b 100644
--- a/apps/studio-next/src/app/page.tsx
+++ b/apps/studio-next/src/app/page.tsx
@@ -1,7 +1,6 @@
-import dynamic from 'next/dynamic';
-const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
 import { Metadata } from 'next';
 import ogImage from '@/img/meta-studio-og-image.jpeg';
+import StudioEditor from '@/components/StudioEditor';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://studio-next.netlify.app'),
@@ -25,6 +24,6 @@ export const metadata: Metadata = {
 }
 export default async function Home() {
   return (
-    <StudioWrapper />
+    <StudioEditor />
   )
 }
diff --git a/apps/studio-next/src/components/StudioEditor.tsx b/apps/studio-next/src/components/StudioEditor.tsx
new file mode 100644
index 000000000..4a946f185
--- /dev/null
+++ b/apps/studio-next/src/components/StudioEditor.tsx
@@ -0,0 +1,10 @@
+'use client'
+import dynamic from 'next/dynamic'
+const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
+
+
+export default async function StudioEditor() {
+  return (
+    <StudioWrapper />
+  )
+}

From 209e9d3bef0ca3305de0088e4a3a2dec24af90ba Mon Sep 17 00:00:00 2001
From: jerensl <54782057+jerensl@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:34:11 +0800
Subject: [PATCH 2/4] fix(cold-start): add description about the issue

---
 apps/studio-next/src/components/StudioEditor.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/studio-next/src/components/StudioEditor.tsx b/apps/studio-next/src/components/StudioEditor.tsx
index 4a946f185..28df9d5ca 100644
--- a/apps/studio-next/src/components/StudioEditor.tsx
+++ b/apps/studio-next/src/components/StudioEditor.tsx
@@ -2,7 +2,14 @@
 import dynamic from 'next/dynamic'
 const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
 
+/*
+Calling next/dynamic with client component in server component is so far not able to do code splitting. 
+So we move them to a here as client component and call next/dynamic here to enable code splitting.
 
+Using next/dynamic in server components will also be including in server side rendering 
+which will contribute to cold start and huge bundle size.
+https://github.com/vercel/next.js/issues/49454#issuecomment-1830053413
+*/
 export default async function StudioEditor() {
   return (
     <StudioWrapper />

From 27ed834bda7531a0ac701df7869d6efe28754c82 Mon Sep 17 00:00:00 2001
From: jerensl <54782057+jerensl@users.noreply.github.com>
Date: Fri, 5 Jul 2024 18:20:09 +0800
Subject: [PATCH 3/4] fix(cold-start): simplify description and add reference
 issue

---
 apps/studio-next/src/components/StudioEditor.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/studio-next/src/components/StudioEditor.tsx b/apps/studio-next/src/components/StudioEditor.tsx
index 28df9d5ca..cc2d9c815 100644
--- a/apps/studio-next/src/components/StudioEditor.tsx
+++ b/apps/studio-next/src/components/StudioEditor.tsx
@@ -3,12 +3,11 @@ import dynamic from 'next/dynamic'
 const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
 
 /*
-Calling next/dynamic with client component in server component is so far not able to do code splitting. 
-So we move them to a here as client component and call next/dynamic here to enable code splitting.
+Calling StudioWrapper as Code Splitting in Server Components will also make them be included in server-side rendering,
+that's why we added another layer and told them as client components to make the code splitting work in client-side only
 
-Using next/dynamic in server components will also be including in server side rendering 
-which will contribute to cold start and huge bundle size.
-https://github.com/vercel/next.js/issues/49454#issuecomment-1830053413
+Related Issue: https://github.com/asyncapi/studio/issues/1118
+Reference: https://github.com/vercel/next.js/issues/49454#issuecomment-1830053413
 */
 export default async function StudioEditor() {
   return (

From 8c82775e54c48641d825d08005dd2d7e50694589 Mon Sep 17 00:00:00 2001
From: jerensl <54782057+jerensl@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:05:40 +0800
Subject: [PATCH 4/4] chore(versioning): add versioning for fixing cold start

---
 .changeset/thirty-mugs-impress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thirty-mugs-impress.md

diff --git a/.changeset/thirty-mugs-impress.md b/.changeset/thirty-mugs-impress.md
new file mode 100644
index 000000000..3e7398cdd
--- /dev/null
+++ b/.changeset/thirty-mugs-impress.md
@@ -0,0 +1,5 @@
+---
+"studio-next": patch
+---
+
+Fix ~4 seconds cold start and client side lazy loading