水合覆盖层 🕵️

该软件包在水合错误期间显示一个覆盖层，提供服务器端和客户端渲染之间的明确差异。

安装

npm install @builder.io/react-hydration-overlay

使用方法

`HydrationOverlay`

首先，将您的应用程序根部包裹在 HydrationOverlay 组件中。

import { HydrationOverlay } from "@builder.io/react-hydration-overlay";

export default function App() {
  return (
    <HydrationOverlay>
      <YourApp />
    </HydrationOverlay>
  );
}

或者，在 Next.js App Router 中，在根布局中包裹 {children}：

import { HydrationOverlay } from "@builder.io/react-hydration-overlay";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <HydrationOverlay>{children}</HydrationOverlay>
      </body>
    </html>
  );
}

插件

其次，为您的框架添加插件。目前，我们支持 Next.js 和 webpack。

Next.js

在 next.config.js 中：

const {
  withHydrationOverlay,
} = require("@builder.io/react-hydration-overlay/next");

/** @type {import('next').NextConfig} */
const nextConfig = {
  /** 在此处添加您的配置 */
};

module.exports = withHydrationOverlay({
  /**
   * 可选：`appRootSelector` 是您应用程序根元素的选择器。默认为 `#__next`，适用于
   * 使用 pages 目录的 Next.js 应用。如果您使用的是 app 目录，应将其更改为 `main`。
   */
  appRootSelector: "main",
})(nextConfig);

webpack

这里是一个示例（仍然使用 Next），但直接使用 webpack 助手：

const {
  withHydrationOverlayWebpack,
} = require("@builder.io/react-hydration-overlay/webpack");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config = withHydrationOverlayWebpack({
      appRootSelector: "#__next",
      isMainAppEntryPoint: (entryPointName) =>
        !options.isServer &&
        (entryPointName === "pages/_app" || entryPointName === "main-app"),
    })(config);
    return config;
  },
};

module.exports = nextConfig;