Feat: new `RenderSections` for all pages

eduardoformiga commented 1 week ago

Depends on

https://github.com/vtex/faststore/pull/2555

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 RenderSections that uses the ViewportObserver along with the LazyLoadingSection to load the section on demand. Now, the RenderSections receives the globalSection as props, and we are removing the GlobalSection (parent) Component that wraps the pages.

It also applies this structure to all pages:

home
pdp
plp
login
checkout
account
search
landing page
500
404

PS: some changes from PLP and Landing Page need to be applied now. Then I applied some Promise.all and 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 Footer to 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

https://github.com/user-attachments/assets/8d69faa5-782f-4fb4-81fc-fd637043870b

Performance

Before	After
https://starter.vtex.app/	https://sfj-b662675--starter.preview.vtex.app/
on a lucky day (when PSI has a good sense of humor, haha)
on a normal day

Starters Deploy Preview

https://github.com/vtex-sites/starter.store/pull/612

preview 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