Describe the bug
We use list-context.product-list to display a slider layout of products.
When displayed using server side rendering, the products are supposed to be displayed on page load.
With 2.85.0 ( not in 2.84.0 ), although the products are displayed for a second during page load, they immediately disappear, and come back again after few seconds
This display+disappear+redisplay newly introduced in 2.85.0 gives a bad user experience.
Line 197 of ProductSummaryList.tsx (2.85.0) breaks server side rendering of this component..
Under SSR on server side, variant comes as null ( line 52 of ProductSummaryList.tsx(2.85.0))
On client side javascript code however it comes as an empty string instead of being null, causing server side rehydrated query results ( and associated product carousels ) to be discarded ( internally within react-apollo and dependent libraries ) .
In our case, this causes the product carousel from server side rendering to be displayed for a second as part of page load on the client.
A few seconds later, react+apollo runs on the client, sees that query parameters for "variant" have changed from "null"(server) to empty-string(client), causing it to discard the server side query results that were sent hidden inside HTML, causing the earlier server side rendered products to disappear, then wait some seconds for the query to start and complete on the client, and then finally display the original products again when the query completes on the client side.
Manually deploying older 2.84.0 (instead of latest 2.85.0) of vtex.product-summary also fixes this rendering issue, as no disappearing+reappearing is seen on SSR rendered product carousels that version
Possibly modifying getCookie method to consistently return "" or null ( instead of one on server and another on client ) should fix this issue.
Expected behavior
Server side rendered products should not disappear and reappear
Desktop environment:
System:
OS: Windows 10 10.0.19045
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 44.83 GB / 63.71 GB
Binaries:
Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 7.5.2 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.43)
Internet Explorer: 11.0.19041.1566
If the problem happens in a specific browser, please state which browser.
---> Tested on chrome
Describe the bug
We use list-context.product-list to display a slider layout of products.
When displayed using server side rendering, the products are supposed to be displayed on page load.
With 2.85.0 ( not in 2.84.0 ), although the products are displayed for a second during page load, they immediately disappear, and come back again after few seconds
This display+disappear+redisplay newly introduced in 2.85.0 gives a bad user experience.
Line 197 of ProductSummaryList.tsx (2.85.0) breaks server side rendering of this component..
Under SSR on server side, variant comes as null ( line 52 of ProductSummaryList.tsx(2.85.0))
On client side javascript code however it comes as an empty string instead of being null, causing server side rehydrated query results ( and associated product carousels ) to be discarded ( internally within react-apollo and dependent libraries ) .
In our case, this causes the product carousel from server side rendering to be displayed for a second as part of page load on the client.
A few seconds later, react+apollo runs on the client, sees that query parameters for "variant" have changed from "null"(server) to empty-string(client), causing it to discard the server side query results that were sent hidden inside HTML, causing the earlier server side rendered products to disappear, then wait some seconds for the query to start and complete on the client, and then finally display the original products again when the query completes on the client side.
Manually deploying older 2.84.0 (instead of latest 2.85.0) of vtex.product-summary also fixes this rendering issue, as no disappearing+reappearing is seen on SSR rendered product carousels that version
Possibly modifying getCookie method to consistently return "" or null ( instead of one on server and another on client ) should fix this issue.
Expected behavior
Server side rendered products should not disappear and reappear
Desktop environment:
System:
OS: Windows 10 10.0.19045
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 44.83 GB / 63.71 GB
Binaries:
Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 7.5.2 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.43)
Internet Explorer: 11.0.19041.1566
If the problem happens in a specific browser, please state which browser.
---> Tested on chrome