Prop did not match. Client: X, Server: Y

[nandorojo]

Bug report

Describe the bug

When I use JS to detect screen width, and then render content based on that screen width, the initial render differs on the server vs. client.

The result is an error saying prop style did not match. Server: X, Client: Y.

When this happens, my app loads up with the style value from the server, and doesn't refresh using the client side's styles.

To Reproduce

Minimal reproducible example: https://github.com/nandorojo/next-style-issue

1. Create a new next project (npx create-next-app -e with-expo)
2. Add a dependency yarn add @react-native-community/hooks
3. Paste this in pages/index.tsx:

// import { useDimensions } from "@react-native-community/hooks";

export default function App() {
  let breakpoint = 0

  // 👇 This generates a fake device width.
  const width = Math.round(Math.random() * 1000)

  // in my real app, I use a dependency:
  // const { width = 0 } = useDimensions().window;

  if (width > 500) breakpoint = 1
  if (width > 900) breakpoint = 2

  /*
   * on server: { breakpoint: 0 }
   * on client: { breakpoint: 0, 1, 2 } (unknown until it loads)
   */
  console.log('[pages/index.tsx]', { breakpoint })

  /* 🚨 Prop `style` did not match.
   * Server: "background-color:green;min-height:100px"
   * Client: "background-color:blue;min-height:200px
   */
  return (
    <div
      style={{
        backgroundColor: ['green', 'blue', 'orange'][breakpoint],
        minHeight: ['100px', '200px', '300px'][breakpoint]
      }}
    >
      {breakpoint}  {/* <- this prints the correct breakpoint... */}
     </div>
  )
}

Expected behavior

My style is generated based on the screen width. Since the style on the client is different from the style generated on the server, I expect the style to rehydrate when the page loads.

However, the style only updates when I resize the window + update component state. If I don't resize and update the component state, it stays the same.

Screenshots

System information

• OS: macOS
• Browser: Chome, Safari
• Version of Next.js: 9.4.4
• Version of Node.js: 14.2

Additional context

Add any other context about the problem here.

[mattcarlotta]

This is to be expected as the server doesn't have a window to determine device calculations. Instead, you should defer to CSR (client-side rendering) instead of SSR (server-side rendering). You can either...

Use next/dynamic with { ssr: false } ...

components/ResizeWindow/index.js

import { useDimensions } from "@react-native-community/hooks";

function ResizeWindow() {
  let breakpoint = 0;
  const { width = 0 } = useDimensions().window;

  if (width > 500) breakpoint = 1;
  if (width > 900) breakpoint = 2;

  return (
    <div
      style={{
        backgroundColor: ["green", "blue", "orange"][breakpoint],
        minHeight: ["100px", "200px", "300px"][breakpoint],
      }}
    >
      {breakpoint}
    </div>
  );
}

export default ResizeWindow;

pages/index.js (import the ResizeWindow component dynamically):

import dynamic from "next/dynamic";

const ResizeWindow = dynamic(() => import("../components/ResizeWindow"), { ssr: false });

const App = () => <ResizeWindow/>

export default App;

OR

Use something similar to Material-UI's NoSsr component...

components/NoSSR/index.js

import { useEffect, useLayoutEffect, useState } from "react";
import PropTypes from "prop-types";

const useEnhancedEffect =
  typeof window !== "undefined" && process.env.NODE_ENV !== "test"
    ? useLayoutEffect
    : useEffect;

const NoSSR = ({ children, defer, fallback }) => {
  const [isMounted, setMountedState] = useState(false);

  useEnhancedEffect(() => {
    if (!defer) setMountedState(true);
  }, [defer]);

  useEffect(() => {
    if (defer) setMountedState(true);
  }, [defer]);

  return isMounted ? children : fallback;
};

NoSSR.propTypes = {
  children: PropTypes.node.isRequired,
  defer: PropTypes.bool,
  fallback: PropTypes.node,
};

NoSSR.defaultProps = {
  defer: false,
  fallback: null,
};

export default NoSSR;

pages/index.js (import the NoSSR component and wrap it over ResizeWindow):

import ResizeWindow from "../components/ResizeWindow";
import NoSSR from "../components/NoSSR";

const App = () => (
   <NoSSR>
     <ResizeWindow/>
  </NoSSR>
);

export default App;

Both options provide an optional loading or fallback component to render if you don't want to show a blank screen.

[victorbiasibetti]

GOD

[lukeocodes]

@mattcarlotta your explanation is better than the docs.

[nandorojo]

Hmm, the only problem is, I want the components to render on the server for SEO. Why can’t the props on the client and server be different, and it just rehydrates on the client side?

[mattcarlotta]

As mentioned above, the server doesn't have a window (it's undefined); therefore, the hook will always fall back to 0. As such, the only time the style prop will match is if the device window is initially less than 500px.

[nandorojo]

Yes, that’s expected. What I don’t understand is why that throws an error in the logs, and why the style doesn’t refresh on the client side.

[nandorojo]

I guess my question is — why does the style prop have to match? Props change in react all the time. Can’t the app just rehydrate the changes when it opens on the client?

[mattcarlotta]

The current implementation of SSR is to fetch data, apply styles, and generate the resulting HTML DOM tree to send to the client. The client takes over where the server left off and begins loading/executing Javascript (rehydration). In this case, React expects the client to reuse the same server-side generated assets. When the client doesn't, React throws a warning about the mismatched props/styles/DOM elements. This warning is generated to avoid unwanted side effects: A piece of data has changed (no longer valid) and therefore must be fetched again (additional fetch requests => slower performance) or styles/elements within the DOM tree are mismatched and the entire DOM has to be destroyed and recreated.

What you're attempting to do requires a DOM (window or document to be present) and the server doesn't have one. What you're asking for is to essentially disregard/throw away the SSR generated content (perhaps generating markup and using data for a mobile device) and possibly destroying/recreating it on the client (perhaps regenerating markup and refetching data for a wide-screen desktop monitor). This translates to (possibly) rendering two different apps for each initial application load.

Take a look at this article as it goes into Rendering on the Web.

[nandorojo]

I see. This was super helpful. I refactored my code to only use CSS on web, and will use the Dimensions API only on iOS/Android where there is no concern for SSR. Thanks again for your time and explanation  – this was a huge help!

[redbar0n]

Was gonna ask if Prop 'style' did not match is raised based on a shallow or deep style object comparison, but I reckon that it just compares the output inline style string (e.g. "background-color:green;min-height:100px"), which is equivalent to a deep comparison.

Couldn't one solve the initial code example by not using inline styles, and rather put them in a <style> element in the <head> section of the HTML page?

The React DOM tree should then be the same, match on the server and client, and hydration work as expected.

[johnsonfash]

I fixed it by removing cors extension from chrome browser, i feel silly now not testing localhost on another browser before adding all the instructions up here as it didn't work