Responsive: SSR is broken

Stack: Latest versions of Next.js, React, Semanic UI React.

Issue: When I attempt to render the the example layout from here using Next.js, I get a warning that says Expected server HTML to contain a matching <div> in [<div>.]

I believe it’s related to this issue https://github.com/Semantic-Org/Semantic-UI-React/issues/3110 which has something to do with the server not getting the browser size.

However, none of the solutions in that link worked for me. One requirement I have is that SSR cannot be turned off.

Here’s the code I’m using: https://github.com/jlei523/semantic-ui-next

Minor note: I believe https://react.semantic-ui.com/layouts/homepage/ is also affected by this issue. Go to the URL and then refresh the page and you should see the styles get messed up. If you shrink the browser window and then shrink it back, it displays the elements correctly again.

Has anyone solved this problem already without turning SSR off? Also, does anyone have an example of how to do display mobile specific elements using SUIR without turning off SSR?

[layershifter]

Solution 1: use react-no-ssr

It’s simple, will omit all warnings.

+import NoSSR from 'react-no-ssr'

//

-<div>
+<NoSSR>
  <DesktopContainer>{children}</DesktopContainer>
  <MobileContainer>{children}</MobileContainer>
-</NoSSR>
+</div>

HalfSolution 2: use getWidth() prop

const isBrowser = () => typeof window !== 'undefined'
const getWidth = () => {
  if (isBrowser()) return window.innerWidth
  return 1000
}

-<Responsive>
+<Responsive getWidth={getWidth}>

Still will cause a warning on mobile devices 🐗

Solution 3: use mobile-detect

The best solution that I know, everything works like a charm 👍

+import MobileDetect from 'mobile-detect'

+const getWidthFactory = (isMobileFromSSR) => () => {
+  const isSSR = typeof window === 'undefined';
+  const ssrValue = isMobileFromSSR ? 767 : 768
+
+  return isSSR ? ssrValue : window.innerWidth
+}

//

-const HomepageLayout = () => (
+const HomepageLayout = ({ getWidth }) => (

//

+HomepageLayout.getInitialProps = async ({ req }) => {
+  const result = new MobileDetect(req.headers['user-agent'])
+  const isMobile = !!result.mobile()
+
+  return { getWidth: getWidthFactory(isMobile) }
+}

//

-const ResponsiveContainer = ({ children }) => (
-const ResponsiveContainer = ({ children, getWidth }) => (
  <div>
-    <DesktopContainer>{children}</DesktopContainer>
-    <MobileContainer>{children}</MobileContainer>
+    <DesktopContainer getWidth={getWidth}>{children}</DesktopContainer>
+    <MobileContainer getWidth={getWidth}>{children}</MobileContainer>
  </div>
);

Live example on Codesandbox: https://codesandbox.io/s/ly3zpw7yzm

[layershifter]

https://github.com/Semantic-Org/Semantic-UI-React/issues/4002#issuecomment-665000116

Responsive will be deprecated and removed. I will provide an upgrade guide.