Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

server side rendering of list-context.product-list is broken in 2.85.0 due to #382 (commit fa1e5c74) #383

Open
rahulsahadevan opened this issue Sep 26, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@rahulsahadevan
Copy link

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

@rahulsahadevan rahulsahadevan added the bug Something isn't working label Sep 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant