NextJS路由切换后渲染同页面且丢失CSS问题求助

问题现象 #

访问网站https://landlord.bg，加载首页后点击任意导航链接，路由地址发生变化，但Next.js始终渲染首页内容，同时页面CSS丢失，移除新增的Facebook Chat组件后问题消失。

涉事组件代码 #

import Script from 'next/script';

export const FacebookChat = () => {
    if (typeof window !== 'undefined' && window.location.hostname.includes('localhost')) {
        return null;
    }
    return (
        <>
            <div id="fb-root"></div>
            <div id="fb-customer-chat" className="fb-customerchat">
            </div>
            <Script
                id="facebook-messenger"
                strategy="afterInteractive"
                dangerouslySetInnerHTML={{
                    __html: `
    var chatbox = document.getElementById('fb-customer-chat');
    chatbox.setAttribute("page_id", "xxxxxxxxxxxx");
    chatbox.setAttribute("attribution", "biz_inbox");

    window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v15.0'
        });
      };

      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  `,
                }} />
        </>
    )
}

问题根源 #

• 全局变量与脚本重复执行冲突：Next.js客户端路由跳转时，组件会在新页面重新渲染，脚本里的自执行函数和window.fbAsyncInit会被重复定义。虽然脚本里有判断避免重复插入facebook-jssdk标签，但window.fbAsyncInit被反复覆盖，导致Facebook SDK初始化逻辑混乱，干扰了Next.js的客户端路由渲染机制，使得页面内容无法正常更新。
• DOM元素重复创建与XFBML解析干扰：每次路由跳转后，#fb-root和#fb-customer-chat会被重复添加到DOM中。开启xfbml: true后，SDK会重新解析这些元素，这个过程可能修改DOM结构、阻塞Next.js的DOM更新流程，最终导致页面渲染异常，CSS样式无法正常挂载。
• Script组件策略与路由时机不匹配：使用strategy="afterInteractive"意味着脚本会在页面交互后加载，但客户端路由跳转时，脚本执行时机和Next.js的路由更新流程冲突，SDK初始化过程可能中断组件渲染和样式加载。
• 缺少路由跳转后的清理逻辑：Next.js客户端路由跳转时，旧页面组件卸载，但该组件没有清理已注入的SDK脚本、全局FB对象及window.fbAsyncInit变量，残留的全局状态会干扰新页面的正常渲染，引发路由变化但页面内容、样式异常的问题。

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