A hidratação falhou em next.js

1. Fenômeno:

Preliminarmente, use css媒体查询e , react-responsiverespectivamente useMediaQuery, para comparar a comutação entre o terminal móvel e o terminal de PC. O uso useMediaQuerypode obter rapidamente a consulta de mídia atual por meio de js, de modo a determinar se a tela atual é uma tela ampla ou móvel. Hydration failed because the initial UI does not match what was rendered on the serveNo entanto, quando a página for atualizada no lado do PC, uma mensagem de erro será exibida .

2. Motivo:

Principalmente o HTML renderizado no lado do servidor não corresponde ao HTML renderizado no lado do cliente

3. Resolva:

Você pode usar useMediaQuery++ , Dynamic Importe React-lazya importação dinâmica pode atrasar o carregamento de componentes e módulos, para que apenas os componentes e módulos necessários sejam renderizados durante a renderização do lado do servidor (SSR), reduzindo assim a possibilidade de inconsistência entre o servidor e a interface do usuário do cliente. O efeito geral é o mostrado (atualize a página no terminal móvel e no terminal de PC, respectivamente, e o efeito de carregamento aparecerá e, em seguida, alterne do terminal móvel para o terminal de PC ou alterne do terminal de PC para o terminal móvel e não haverá campo de carregamento):

import dynamic from 'next/dynamic'

const MyComponentWithMediaQuery = dynamic(() => import('./MyComponentWithMediaQuery'), 
{
  ssr: false ,loading: () => <p>Loading...</p>
})

function MyPage() {
  return <MyComponentWithMediaQuery />
}

import { useDesktopQuery } from "@/util/useHooks";

const MyComponentWithMediaQuery = () => {
  const flag = useDesktopQuery();
  return <>{flag && "pc页面"}</>;
};

export default MyComponentWithMediaQuery;

4. Resultados:

1. Você pode usar a consulta de mídia css @mediapara processá-la em um estilo responsivo, que pode alternar rapidamente entre celular e computador. Nota: Se houver muita diferença na estrutura da página entre a extremidade do PC e a extremidade móvel, o tamanho do arquivo de página ficará maior
2. A solução específica da primeira tela da página pode ser priorizada quando a estrutura muda pouco css媒体查询. A importação dinâmica pode ser usada para outras situações de página, o que pode garantir o efeito de experiência da primeira tela