NextJS 13 App Router自定义脚本首次加载后不渲染问题求助

强制刷新页面会破坏Next.js App Router的SPA流畅体验，增加加载耗时，显然不是最优解。正确的做法是利用客户端组件的生命周期，在每次进入商品目录页时重新执行脚本逻辑或创建iframe。

问题根源 #

Next.js的客户端导航是SPA模式，页面组件卸载后重新挂载时，首次加载的脚本不会自动重新执行，之前创建的iframe也已被清理，导致返回页面时无内容。

具体实现方案 #

方案1：手动控制iframe的创建与清理（推荐）

在目录页的客户端组件中，使用useEffect监听组件挂载，每次进入页面时重新创建iframe，并在组件卸载时清理旧的iframe：

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

export default function CatalogPage() {
  useEffect(() => {
    // 清理已存在的旧iframe，避免重复创建
    const existingIframe = document.getElementById('catalog-iframe');
    if (existingIframe) existingIframe.remove();

    // 创建并配置新iframe
    const iframe = document.createElement('iframe');
    iframe.id = 'catalog-iframe';
    iframe.src = '你的iframe目标地址';
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.frameBorder = '0';

    // 将iframe插入页面容器
    const container = document.getElementById('iframe-container');
    if (container) container.appendChild(iframe);

    // 组件卸载时清理iframe
    return () => iframe.remove();
  }, []); // 空依赖数组确保组件每次挂载都执行

  return (
    <div className="catalog-page">
      <h1>商品目录</h1>
      <div id="iframe-container"></div>
    </div>
  );
}

方案2：重新加载外部脚本

如果iframe是由外部脚本自动生成的，可在组件挂载时动态创建脚本标签，确保每次进入页面都重新加载脚本：

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

export default function CatalogPage() {
  useEffect(() => {
    // 清理旧脚本（如果需要）
    const existingScript = document.getElementById('catalog-script');
    if (existingScript) existingScript.remove();

    // 创建新脚本标签
    const script = document.createElement('script');
    script.id = 'catalog-script';
    script.src = '你的外部脚本地址';
    script.async = true;
    script.onload = () => {
      // 脚本加载完成后的回调（如果需要额外逻辑）
      console.log('目录脚本已重新加载');
    };

    document.body.appendChild(script);

    // 组件卸载时移除脚本
    return () => script.remove();
  }, []);

  return <h1>商品目录</h1>;
}

方案3：结合Next.js Script组件

如果使用Next.js官方的next/script组件，可通过状态控制脚本的加载时机，确保每次页面挂载都重新触发：

'use client';
import { useEffect, useState } from 'react';
import Script from 'next/script';

export default function CatalogPage() {
  const [shouldLoadScript, setShouldLoadScript] = useState(false);

  useEffect(() => {
    setShouldLoadScript(true);
    return () => setShouldLoadScript(false);
  }, []);

  return (
    <div>
      <h1>商品目录</h1>
      <div id="iframe-container"></div>
      {shouldLoadScript && (
        <Script
          src="你的外部脚本地址"
          strategy="afterInteractive"
          onLoad={() => {
            // 脚本加载后手动触发iframe生成逻辑（如果脚本需要）
            window.generateCatalogIframe?.();
          }}
        />
      )}
    </div>
  );
}

为什么不推荐强制刷新？ #

• 强制刷新（比如调用router.refresh()或跳转时强制重载）会重新加载整个页面的所有资源，大幅增加加载时间，破坏SPA的无缝体验。
• 局部初始化iframe/脚本的方式更高效，仅针对需要的资源进行操作，用户体验更流畅。

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