在Next.js中集成ShareThis遇Hydration失败问题求助

这个错误的核心原因是：服务端渲染时返回的HTML里没有ShareThis脚本生成的交互DOM，但客户端加载脚本后会动态创建这些元素，导致客户端 hydration 时的UI和服务端初始渲染的UI不一致。

以下是两种可行的解决方案：

方案一：在客户端组件中动态加载脚本（推荐） #

创建一个仅在客户端运行的ShareThis组件，通过useEffect在客户端加载脚本，避免服务端渲染时的DOM不匹配：

'use client';
import { useEffect } from 'react';

const ShareThis = () => {
  useEffect(() => {
    // 动态创建并加载ShareThis脚本
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://platform-api.sharethis.com/js/sharethis.js#property=${process.env.NEXT_PUBLIC_SHARETHIS_PROPERTY_ID}&product=sop`;
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
      if (script.parentNode) {
        script.parentNode.removeChild(script);
      }
    };
  }, []);

  // ShareThis的容器元素，脚本加载后会自动渲染按钮
  return <div className="sharethis-inline-share-buttons"></div>;
};

export default ShareThis;

之后在需要展示分享按钮的页面或组件中导入并使用这个ShareThis组件即可。

方案二：修改_document.tsx中的脚本加载方式 #

如果你坚持要在_document.tsx中加载脚本，可以使用Next.js的<Script>组件（需Next.js 11+），并指定strategy="lazyOnload"策略，确保脚本仅在客户端空闲时加载，避免干扰服务端渲染：

import { Html, Head, Main, NextScript } from "next/document";
import Script from 'next/script';

const Document = () => (
  <Html>
    <Head>
      <Script
        type="text/javascript"
        src={`https://platform-api.sharethis.com/js/sharethis.js#property=${process.env.NEXT_PUBLIC_SHARETHIS_PROPERTY_ID}&product=sop`}
        strategy="lazyOnload"
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

export default Document;

注意：这种方式仍需确保ShareThis生成的DOM元素不在服务端渲染的内容中，否则还是可能触发hydration错误，因此方案一更稳妥。

内容的提问来源于stack exchange，提问作者Craig Malton