Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Usage of cartCount causes an SSR mismatch error in Next.js

See original GitHub issue

I’m not sure why this is happening:

cartCount renders correctly in the <p> tag but for setting the disabled value on the button it doesn’t: https://github.com/thorsten-stripe/next.js/blob/thor/stripe/add-use-shopping-cart-example/examples/with-stripe-typescript/components/CartSummary.tsx#L45

Issue Analytics

State:
Created 3 years ago
Comments:14 (3 by maintainers)

Top GitHub Comments

1reaction

thorsten-stripecommented, Jun 15, 2020

So @thorsten-stripe the official way to fix it would be to modify react-storage-hooks to not load from LocalStorage on the initial client-side render, but instead right afterward right?

@ChrisBrownie55 Yes, I believe that is the only way to avoid this discrepancy, however it’s not great, because you have an initial render with the default state and then an immediate re-render with the localStorage state, which can result in a flicker when the page loads.

One potential solution would be to initially return null until we had the chance to check the localStorage, that way you can employ conditional rendering to avoid the “flicker”, but none of this feels great for non-SSR applications 😦

0reactions

dayhaysooscommented, Jul 4, 2021

Don’t think this is an issue anymore, let me know if I’m wrong tho