Server Side Rendered portals - Warning: Expected server HTML to contain a matching <h1> in <div>

[sixclones]

What example does this report relate to?

with-portals-ssr

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

14.15.5

What browser are you using?

Chrome

What operating system are you using?

Windows (running on WSL)

How are you deploying your application?

next

Describe the Bug

Warning: Expected server HTML to contain a matching <h1> in <div>.
    in h1 (at pages/index.js:12)
    in Unknown (at pages/index.js:11)
    in Index (at _app.js:18)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

Expected Behavior

A clear console without this type of error/warning.

To Reproduce

Install the example

npx create-next-app --example with-portals-ssr with-portals-ssr-app

Run the project

cd with-portals-ssr-app
npm run dev

Open localhost:3000, open DevTools.

[hongdeyuan]

This problem is caused by the inconsistency between the server's first rendering and the client's. We can restrict data rendering to the DOM only when the next arrives on the client.
Hope it can help you：https://blog.hao.dev/render-client-side-only-component-in-next-js

// utils.js
export function useMounted()
{
  const [hasMounted, setHasMounted] = React.useState<boolean>(false);

  React.useEffect(() => {
    setHasMounted(true);
  }, []);

  return hasMounted;
}

import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Link from 'next/link';

import { useGetCollectionQuery } from '~/graphql/app/operations/clientStore.graphql';
import { useMounted } from '~/utils';
import style from './index.module.scss';

// XXComponent.jsx
export default function CollectionList(){
  const { data } = useGetCollectionQuery();// ssr data
  const hasMounted = useMounted();
  if (!hasMounted) return null;
  return {list.map(a => (
        <Link href={a.address} passHref key={a.address}>
          <Typography
            variant="h6"
            component="a"
            classes={typographyClasses}
            className={style['item']}
          >
            {a.name}
          </Typography>
        </Link>
}

[juanzgc]

I'm seeing a lot of hydration errors as well. In my case I have a cart state that is persisted locally using localStorage. When a user removes all items from their cart and refreshes their cart (Causing server to load) - the hydration error appears. I'm not sure if this is the following approach (is there a better approach to this issue:

const [isMounted, setMounted] = useState(false)

useEffect(() => {
  setMounted(true)
}, [])

return isMounted && <div>{...}</div>

Considering my application is an ecommerce app and a lot of the components rely on the cart wouldn't a Client only render be slower? The desired approach would be only to hide the divs that rely on cart data.

[balazsorban44]

This appears to be fixed, as following the reproduction steps, I cannot see a warning anymore.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.