search

fridays / next-routes

Universal dynamic routes for Next.js
MIT License
2.47k stars 230 forks source link

Server-rendering does not match client #67

Closed runemadsen closed 7 years ago

runemadsen commented 7 years ago

After switching to React routes, I'm getting the following error in the console:

warning.js?c5303db:36 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) r" id="react-select-2--value" data-react
 (server) r" id="react-select-10--value" data-reac

This is the page that is rendering: https://github.com/runemadsen/artefact-next/blob/updateWorks/next/pages/work.js

This is my server setup: https://github.com/runemadsen/artefact-next/blob/updateWorks/next/server.js

Is this a problem with my config of next-routes?

fridays commented 7 years ago

It looks more like a problem with react-select and server-rendering. You can try to only render that form component after componentDidMount then it will only render on the client.

runemadsen commented 7 years ago

Got it. Thanks for the quick reply!

heldervilela commented 5 years ago

My solution is only render the component in client-side using react-no-ssr