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.

Server client html mismatch occurs on first render

See original GitHub issue

Warnings like Warning: Expected server HTML to contain a matching <button> in <div>. occurs because html was rendered with no url params on server side, but rendered with url params in client side.

I think Next.js handles this problem by setting router.query to an empty object on the first render, and sets client url params on the next render. But because useUrlState uses and not router, this warning occurs.

This can be avoided by using code like this:

const [queryState, setQueryState] = useQueryState(...);
const [state, setState] = useState();
useEffect(() => setState(queryState), [queryState]);

But it would be better if this boilerplate could be avoided in some way.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:5
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

ViktorQvarfordtcommented, Oct 19, 2022

I think the correct solution would be to always return the default value on both server and client-side on the initial render. Reading from window.location should be done in an effect. See this article for an in-depth explanation of why this is important

franky47commented, Sep 5, 2022

Unfortunately the Next.js router does not expose querystring params in the render tree in SSR, so those should be treated as client-side only (just like you would for code that depends on local storage values for example).

While theoretically it could be possible to get this kind of information on “per request” SSR (ie: page with getServerSideProps), other kinds of non-client renders (ISR, static optimisation at build time) are not attached to a request and therefore don’t have querystring parameters.

Read more comments on GitHub >

github_iconTop Results From Across the Web

server side rendering and client mismatch · Issue #100 - GitHub
The bug you're seeing can be viewed in more detail here and is caused by a html mismatch from the server to the...
Read more >
Handling the React server hydration mismatch error
The problem is that the server-side render doesn't contain the final className that is generated on the client.
Read more >
Easily Fix React Hydration Errors - Travis Wimer
The reason behind these errors is a mismatch between the HTML provided by ... Returns null on first render, so the client and...
Read more >
Error: Text content does not match server-rendered HTML
The mismatch happens because the random numbers generated when the page gets pre-rendered on the server do not match the random numbers ......
Read more >
HTML Mismatch Server Side Rendering with React and Redux
HTML Mismatch Server Side Rendering with React and ReduxSubscribe ▻ 2nd Channel ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found