如何修改NextJS 13.4 SSR页面的HTML响应内容

针对你需要修改SSR页面响应HTML以适配Shadow DOM设计系统的需求，以下是几种可行的实现方案，可根据你的项目架构选择：

方案一：自定义Express服务器拦截响应 #

通过自定义服务器替代Next.js默认服务，在SSR生成原始HTML后，调用你的hydration函数修改内容再返回给客户端。

const express = require('express');
const next = require('next');
const { renderToHTML } = require('next/dist/server/render');
// 替换为你实际使用的HTML解析工具（比如你已有的解析逻辑）
const { parse, serialize } = require('parse5');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

// 你的Shadow DOM hydration函数（复用现有逻辑）
const hydrateShadowDOM = (html) => {
  const document = parse(html);
  // 执行你的替换逻辑：找到所有<text-component>，插入<p class="text-component">子元素
  // 示例逻辑（需根据实际DOM结构调整）：
  const textComponents = document.querySelectorAll('text-component');
  textComponents.forEach(component => {
    const text = component.textContent.trim();
    component.innerHTML = `<p class="text-component">${text}</p>`;
  });
  return serialize(document);
};

app.prepare().then(() => {
  const server = express();

  server.all('*', async (req, res) => {
    try {
      // 让Next.js生成SSR原始HTML
      const rawHtml = await renderToHTML(req, res, req.path, req.query, app);
      // 处理HTML
      const processedHtml = hydrateShadowDOM(rawHtml);
      // 返回处理后的内容
      res.send(processedHtml);
    } catch (err) {
      // 出错时回退到Next.js默认处理逻辑
      handle(req, res);
    }
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

方案二：使用Middleware修改响应 #

利用Next.js的Middleware机制，拦截所有SSR页面的响应，获取原始HTML后处理再返回。这种方式无需自定义服务器，更贴合App Router的架构。

// middleware.js
import { NextResponse } from 'next/server';
// 替换为你实际使用的HTML解析工具
const { parse, serialize } = require('parse5');

// 你的Shadow DOM hydration函数
const hydrateShadowDOM = (html) => {
  const document = parse(html);
  // 执行替换逻辑
  const textComponents = document.querySelectorAll('text-component');
  textComponents.forEach(component => {
    const text = component.textContent.trim();
    component.innerHTML = `<p class="text-component">${text}</p>`;
  });
  return serialize(document);
};

export async function middleware(request) {
  const response = await NextResponse.next();
  // 获取原始响应HTML
  const originalHtml = await response.text();
  // 处理HTML
  const processedHtml = hydrateShadowDOM(originalHtml);
  // 返回新的响应
  return new NextResponse(processedHtml, {
    status: response.status,
    headers: response.headers,
  });
}

// 指定需要处理的路径（排除静态资源，避免不必要的处理）
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

方案三：自定义Root Layout处理渲染结果 #

在App Router的根布局中，手动渲染子组件为HTML字符串，处理后再插入页面。注意此方法会影响Next.js的流式渲染优化，需根据场景测试。

// app/layout.js
import { ReactDOMServer } from 'react-dom/server';
// 替换为你实际使用的HTML解析工具
const { parse, serialize } = require('parse5');

// 你的Shadow DOM hydration函数
const hydrateShadowDOM = (html) => {
  const document = parse(html);
  // 执行替换逻辑
  const textComponents = document.querySelectorAll('text-component');
  textComponents.forEach(component => {
    const text = component.textContent.trim();
    component.innerHTML = `<p class="text-component">${text}</p>`;
  });
  return serialize(document);
};

export default async function RootLayout({ children }) {
  // 将子组件渲染为HTML字符串
  const rawHtml = ReactDOMServer.renderToString(children);
  // 处理HTML
  const processedHtml = hydrateShadowDOM(rawHtml);
  
  return (
    <html lang="en">
      <body dangerouslySetInnerHTML={{ __html: processedHtml }} />
    </html>
  );
}

注意事项 #

• 性能优化：HTML解析和修改会增加SSR响应时间，建议对解析逻辑做性能优化，或缓存高频访问页面的处理结果。
• 流式渲染适配：若使用Next.js的流式SSR（如搭配Suspense），需使用流式HTML解析器处理分段响应，避免破坏渲染流程。
• Hydration匹配：确保处理后的HTML与客户端组件的预期DOM结构一致，避免出现hydration mismatch错误。

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