Feat: new RenderSections for all pages
#2558
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
eduardoformiga
requested review from
emersonlaurentino and
lariciamota
and removed request for
a team
eduardoformiga
added
the
depends on
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Depends on
What's the purpose of this pull request?
This PR is part of the performance initiative.
It aims to create a new structure for the
RenderSectionsthat uses theViewportObserveralong with theLazyLoadingSectionto load the section on demand. Now, the RenderSections receives theglobalSectionas props, and we are removing theGlobalSection(parent) Component that wraps the pages.It also applies this structure to all pages:
PS: some changes from PLP and Landing Page need to be applied now. Then I applied some
Promise.alland other improvements beforehand.How to test it?
Now, we can only load the JS for the sections inside the viewport during the first load. You can check the network tab in devtools while scrolling the page until the
Footerto double-check the JS for sections above the fold being loaded.You can run the project locally or use the starter preview to double-check this behavior.
you can test all the pages. The landing page can be accessed through this URL:
http://localhost:3000/my-landing-page
Screen.Recording.2024-11-12.at.19.27.16.mov
Performance
Starters Deploy Preview
RenderSectionsfor all pages vtex-sites/starter.store#612preview
https://sfj-b662675--starter.preview.vtex.app/
References
In this video, you can see an explanation of loading JS on demand using the Intersection Observer API + code splitting.
https://drive.google.com/file/u/1/d/13VYPu45Vaav2ecGmKcFAOUMKAS3pMHd4/view
POC PR