Échec de l'hydratation dans next.js

1. Phénomène :

Utilisez préalablement css媒体查询et , react-responsiverespectivement useMediaQuery, pour comparer la commutation entre le terminal mobile et le terminal PC. L'utilisation useMediaQuerypeut rapidement obtenir la requête multimédia actuelle via js, afin de déterminer si l'écran actuel est un écran large ou un écran mobile. Hydration failed because the initial UI does not match what was rendered on the serveCependant, lors du rafraîchissement de la page côté PC, un message d'erreur s'affichera .

2. Raison :

Principalement, le HTML rendu côté serveur ne correspond pas au HTML rendu côté client

3. Résolvez :

Vous pouvez utiliser useMediaQuery++ , Dynamic Importet React-lazyl'importation dynamique peut retarder le chargement des composants et des modules, de sorte que seuls les composants et modules nécessaires sont rendus lors du rendu côté serveur (SSR), réduisant ainsi la possibilité d'incohérence entre le serveur et l'interface utilisateur du client. L'effet global est comme indiqué (actualisez la page sur le terminal mobile et le terminal PC respectivement, et l'effet de chargement apparaîtra, puis passez du terminal mobile au terminal PC ou passez du terminal PC au terminal mobile, et il n'y aura pas de champ de chargement):

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. Résultats :

1. Vous pouvez utiliser la requête multimédia CSS @mediapour la transformer en un style réactif, qui peut rapidement basculer entre mobile et PC. Remarque : s'il y a trop de différence dans la structure de la page entre l'extrémité PC et l'extrémité mobile, la taille du fichier de page augmentera.
2. La solution de premier écran de page spécifique peut être priorisée lorsque la structure change peu css媒体查询. L'importation dynamique peut être utilisée pour d'autres situations de page, ce qui peut garantir l'effet d'expérience du premier écran