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.

Sign up for GitHub

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

Jump to bottom

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
+23 −3
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b38d62f
fix(cold-start): add another component as layer for lazy loading
jerensl Jul 5, 2024
209e9d3
fix(cold-start): add description about the issue
jerensl Jul 5, 2024
27ed834
fix(cold-start): simplify description and add reference issue
jerensl Jul 5, 2024
8c82775
chore(versioning): add versioning for fixing cold start
jerensl Jul 15, 2024
9aa9181
Merge branch 'master' into fix/cold-start
KhudaDad414 Jul 30, 2024
888feaa
Merge branch 'master' into fix/cold-start
asyncapi-bot Aug 2, 2024
dbb4efd
Merge branch 'master' into fix/cold-start
jerensl Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thirty-mugs-impress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"studio-next": patch
---

Fix ~4 seconds cold start and client side lazy loading
5 changes: 2 additions & 3 deletions apps/studio-next/src/app/page.tsx
View file
Open in desktop
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 />
)
}
16 changes: 16 additions & 0 deletions apps/studio-next/src/components/StudioEditor.tsx
View file
Open in desktop
Copy link
Member

@KhudaDad414 KhudaDad414 Jul 5, 2024 •
edited
Loading

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,16 @@
'use client'
import dynamic from 'next/dynamic'
const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})

/*
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

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 (
<StudioWrapper />
)
}
Loading