React（Next.js）结合SSR能否在客户端接收前处理CMS内容？

完全可以在SSR（服务端渲染）阶段完成CMS内容的处理，不用局限于客户端操作，以下是具体实现思路：

核心方案：服务端解析HTML提取引用 #

借助服务端可用的HTML解析库（比如cheerio，轻量的jQuery风格解析工具），在Next.js的服务端数据获取函数中完成内容解析和引用提取，再将结果传递给页面组件直接渲染。

1. 在服务端拉取并解析CMS内容 #

在getServerSideProps（SSR模式）或getStaticProps（静态生成模式，可搭配ISR更新内容）中处理：

import cheerio from 'cheerio';

export async function getServerSideProps(context) {
  // 拉取CMS返回的内容
  const cmsRes = await fetch('你的CMS内容接口地址');
  const content = await cmsRes.json();
  
  // 用cheerio解析HTML内容，提取目标元素
  const $ = cheerio.load(content.body);
  const references = [];
  
  // 根据你的需求编写选择器，比如提取所有链接和标题
  $('a, h2, h3').each((_, el) => {
    references.push({
      text: $(el).text().trim(),
      href: $(el).is('a') ? $(el).attr('href') : null,
      type: el.tagName.toLowerCase()
    });
  });

  return {
    props: { content, references } // 将原始内容和提取的引用传给页面组件
  };
}

2. 页面组件直接渲染引用列表 #

拿到服务端传递的数据后，无需客户端DOM操作，直接在页面中渲染内容和引用：

export default function ArticlePage({ content, references }) {
  return (
    <div className="article-container">
      {/* 渲染CMS原始内容 */}
      <div dangerouslySetInnerHTML={{ __html: content.body }} />
      
      {/* 渲染服务端生成的引用列表 */}
      <h4>References</h4>
      <ul className="reference-list">
        {references.map((ref, idx) => (
          <li key={idx}>
            {ref.href ? (
              <a href={ref.href} target="_blank" rel="noopener noreferrer">
                {ref.text}
              </a>
            ) : (
              <span>{ref.text} ({ref.type})</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

注意事项 #

• 确保CMS返回的HTML结构稳定，避免选择器匹配失效；如果内容包含客户端动态生成的元素（比如CMS嵌入的前端脚本），这类元素只能在客户端处理。
• 若使用静态生成模式，需配置增量静态再生（ISR）来定期更新引用列表，避免内容过时。

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