Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(partially-fix-cold-start): add another component as layer for lazy loading #1121

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
5 changes: 2 additions & 3 deletions apps/studio-next/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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'),
Expand All @@ -25,6 +24,6 @@ export const metadata: Metadata = {
}
export default async function Home() {
return (
<StudioWrapper />
<StudioEditor />
)
}
10 changes: 10 additions & 0 deletions apps/studio-next/src/components/StudioEditor.tsx
Copy link
Member

@KhudaDad414 KhudaDad414 Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the result and it seems like it is working. the only issue that I see here is the layers that we are adding. StudioEditor -> StudioWrapper -> CodeEditor. do you think we can do something about it? maybe combine them into one wrapper? or at least two?

if that's not possible, can you also add a comment on why this wrapper has been created?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason we added StudioEditor is that we are unable to make root-level pages(/) as client components, so we added an extra component as a client component to call the StudioWrapper as code splitting

Original file line number Diff line number Diff line change
@@ -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 />
)
}
Loading