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

asyncapi / studio

Visually design your AsyncAPI files and event-driven architecture.

https://studio.asyncapi.com

Apache License 2.0

171 stars 98 forks source link

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

Open jerensl opened 4 months ago

jerensl commented 4 months ago

Using next/dynamic in server components that loading a client component is still including everything in server side rendering, and that client component doesn't know it needs to be split into another chunk in browser chunks.

Description I set up my own deployment here https://jolly-toffee-18b732.netlify.app and tested the results below Screenshot 2024-07-05 145715

Related issue(s) Partially fix #1118

changeset-bot[bot] commented 4 months ago

🦋 Changeset detected

Latest commit: dbb4efdb99e9ba8566063d810058abd260b690b8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ----------- | ----- | | studio-next | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 4 months ago

Deploy Preview for studio-next ready!

Name	Link
Latest commit	dbb4efdb99e9ba8566063d810058abd260b690b8
Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/66e5311d64ccee0008c5db3d
Deploy Preview	https://deploy-preview-1121--studio-next.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 4 months ago

Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
Latest commit	dbb4efdb99e9ba8566063d810058abd260b690b8
Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/66e5311ed7429600083aa455
Deploy Preview	https://deploy-preview-1121--asyncapi-studio-design-system.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 4 months ago

Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
Latest commit	dbb4efdb99e9ba8566063d810058abd260b690b8
Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/66e5311d0fdc220008570b9f
Deploy Preview	https://deploy-preview-1121--modest-rosalind-098b67.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KhudaDad414 commented 4 months ago

@jerensl you don't need to version the PR. all that is required is having a changeset file. the CI/CD pipeline will take care of versioning.

you can do that by running pnpm run changeset follow the instructions and the changeset file will be created. after that push the changeset file. that's it. you don't need to run pnpm run version-packages. it will be done by the pipeline.

jerensl commented 4 months ago

@jerensl you don't need to version the PR. all that is required is having a changeset file. the CI/CD pipeline will take care of versioning.

you can do that by running pnpm run changeset follow the instructions and the changeset file will be created. after that push the changeset file. that's it. you don't need to run pnpm run version-packages. it will be done by the pipeline.

Thanks, I made the changes in the latest commit

KhudaDad414 commented 3 months ago

The sonar cloud status is not being reported and I don't see a comment from their bot eigther.

seems like Sergio has found a way to resolve this issue here: https://github.com/asyncapi/parser-js/issues/1033#issuecomment-2208958397

@derberg can you try doing disable/enable branch protection rule for sonar to see if it works for us?

EDIT: it seems like it doesn't work in other repos.

jerensl commented 3 months ago

Updated

In NextJS 15, the cache is no longer default. I'm also testing it on my deployment https://jolly-toffee-18b732.netlify.app/, and the cache lives longer. Screenshot 2024-08-02 185501

I assume that NextJS tries to invalidate the cache when it is already being cached by Netlify and did the same cache as well this led to a cold start because it stale while revalidated always looking at the first cache-store.

So I will mark this as partially fixed, the rest will be done by updating to NextJS 15 when it's released, from now it's still on the release candidate