使用WordPress Interactivity API SSR时页面构建器资源加载异常求助

一、修复CSS/JS资源无法自动加载的问题 #

1. 利用Interactivity API路由钩子手动加载资源 #

通过Interactivity API的路由器订阅钩子，监听路由切换事件，在动态内容加载完成后解析并注入缺失的CSS和JS资源：

import { router } from '@wordpress/interactivity';

router.subscribe( 'router:afterNavigate', ( navigationData ) => {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = navigationData.html;

  // 加载未引入的CSS
  tempContainer.querySelectorAll('link[rel="stylesheet"]').forEach(linkEl => {
    if (!document.querySelector(`link[href="${linkEl.href}"]`)) {
      const newLink = document.createElement('link');
      Object.assign(newLink, {
        rel: 'stylesheet',
        href: linkEl.href,
        media: linkEl.media || 'all'
      });
      document.head.appendChild(newLink);
    }
  });

  // 加载未引入的JS
  tempContainer.querySelectorAll('script').forEach(scriptEl => {
    if (scriptEl.src) {
      // 外部脚本
      if (!document.querySelector(`script[src="${scriptEl.src}"]`)) {
        const newScript = document.createElement('script');
        Object.assign(newScript, {
          src: scriptEl.src,
          async: scriptEl.hasAttribute('async'),
          defer: scriptEl.hasAttribute('defer')
        });
        document.body.appendChild(newScript);
      }
    } else if (scriptEl.textContent.trim()) {
      // 内联脚本，直接执行
      try {
        eval(scriptEl.textContent);
      } catch (e) {
        console.error('执行内联脚本出错:', e);
      }
    }
  });
});

2. 调整页面构建器资源输出策略 #

• 若页面构建器支持全局资源预加载，将所有页面依赖的核心CSS/JS设置为全局加载，避免按需加载导致的动态内容资源缺失。
• 配置构建器在生成路由区域内容时，将依赖资源的<link>/<script>标签嵌入到HTML片段中，配合上述路由钩子统一处理。

3. 临时关闭路由区域的按需SSR加载 #

如果业务场景允许，移除data-wp-router-region属性，改为全页面服务器渲染，绕过动态内容的资源加载问题。

二、修复依赖DOMContentLoaded/window.load的JS失效问题 #

1. 封装初始化函数并手动触发 #

将原依赖页面加载事件的代码封装为独立函数，在初始加载和路由切换后分别调用：

// 暴露初始化函数
function initPageBuilderWidgets() {
  // 原功能逻辑，比如初始化滑块、表单等
  document.querySelectorAll('.builder-slider').forEach(slider => {
    // 执行滑块初始化
  });
}

// 初始页面加载时执行
document.addEventListener('DOMContentLoaded', initPageBuilderWidgets);

// 路由切换后重新执行
import { router } from '@wordpress/interactivity';
router.subscribe('router:afterNavigate', initPageBuilderWidgets);

2. 使用Interactivity API的元素初始化钩子 #

通过data-wp-init属性绑定回调，让Interactivity API在动态元素挂载到DOM时自动执行初始化：

<!-- 动态内容中的元素 -->
<div class="builder-slider" data-wp-init="callbacks.initSlider">
  <!-- 滑块内容 -->
</div>

对应的JS上下文配置：

import { createContext } from '@wordpress/interactivity';

const { callbacks } = createContext('my-builder-utils', {
  callbacks: {
    initSlider() {
      // this指向当前挂载的DOM元素
      const sliderEl = this;
      // 执行滑块初始化逻辑
    }
  }
});

3. 用MutationObserver监听DOM变化 #

如果无法修改原JS代码，可通过MutationObserver监听路由区域的DOM更新，自动触发初始化逻辑：

const routerRegion = document.querySelector('[data-wp-router-region]');
if (routerRegion) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        // 检测到新元素，执行初始化
        initPageBuilderWidgets();
      }
    });
  });

  observer.observe(routerRegion, {
    childList: true,
    subtree: true
  });
}

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