Optimize category page size with lazy-hydrate

[pkarw]

What is the motivation for adding/enhancing this feature?

Related: #3326

https://github.com/maoberlehner/vue-lazy-hydration

I've used it on the Product page within this branch: https://github.com/DivanteLtd/vue-storefront/tree/feature/3281_state_optimization to avoid attributes being included into INITIAL_STATE (#3281)

If we managed to do the same for category-next.products we can save 70% of category page size and decrease the TTI significantly.

The challenge

We can hydrate <product-listing only after the CSR request for products has been executed (and it's always executed in here)

The problem is that lazy-hydarate has only the following triggers: ssr-only, on-interaction, when-visible.

How to add the hydration only after products have been loaded?

Otherwise, we're getting CSR/SSR mismatch - when the hydration is done before the data is provided.

Idea: maybe the product-listing component should take data not from the getter but from kind of Promise (in the end it could be a getter but returning promise; not sure how it will work and if it's even possible?)

**How to remove category-next.products from INITIAL_STATE

It's very easy. Modify your default.json:

FROM:

    "initialStateFilter": ["__DEMO_MODE__", "version", "storeView", "attribute", "checkout"],

TO:

    "initialStateFilter": ["__DEMO_MODE__", "version", "storeView", "attribute", "checkout", "category-next.products"],

What are the acceptance criteria

• window.__INITIAL_STATE__ doesn't contains category-next.products

Can you complete this feature request by yourself?

• YES
• NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Additional information

[pkarw]

If we managed to make this feature happen it should be enabled/disabled via config. I mean: for some cases providing the user with category-next.products within the __INITIAL_STATE__ might be desired state - in the end, it saves time for TTI not requiring the user to wait for loadProducts request to fulfill. This is surely not a solution to all the problems

[pkarw]

Another crazy idea for the optimization is: http://stevehanov.ca/blog/?id=104 but maybe let's not go that way :D :D