Next.js 13服务端组件：如何实现动态HTML元素渲染？

可以在Next.js 13的服务端组件中实现相同的动态HTML元素渲染效果，但需要调整写法解决Hydration错误，同时遵守服务端组件的限制。

1. 先解决Hydration错误的核心原因 #

你看到的错误提示Expected server HTML to contain a matching <p> in <p>，本质是出现了无效的HTML嵌套——HTML规范明确禁止<p>标签嵌套块级元素（包括其他<p>），浏览器会自动修正这种非法结构，导致服务端渲染的DOM和客户端Hydrate时的DOM结构不一致，最终触发错误。

解决这个问题的关键：

• 提醒使用者：如果需要在Typography内部嵌套块级元素，必须指定as为允许嵌套的元素（比如div、section），不要用默认的p
• 可选优化：在组件内部添加逻辑，自动根据内容或样式切换默认元素（比如标题样式默认用对应h标签，避免嵌套问题）

2. 适配服务端组件的两种写法 #

情况A：纯展示型（无客户端交互）

如果你的Typography组件只做文本展示，不需要onClick这类客户端事件，可以直接作为服务端组件使用，调整后的代码如下：

import clsx from "clsx";

interface TypographyProps {
  as?: keyof HTMLElementTagNameMap;
  className?: string;
  children?: React.ReactNode;
  style?: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "body";
  weight?: "medium" | "semibold";
}

export function Typography(props: TypographyProps) {
  // 明确默认元素，确保服务端与客户端渲染一致
  const Element = props.as || "p";

  return (
    <Element
      className={clsx(
        {
          "text-4xl md:text-6xl font-display": props.style === "heading-1",
          "text-3xl md:text-5xl font-display": props.style === "heading-2",
          "text-xl md:text-2xl": props.style === "heading-3",
          "text-lg": props.style === "heading-4",
          "font-medium": props.weight === "medium",
          "font-semibold": props.weight === "semibold",
        },
        props.className,
      )}
    >
      {props.children}
    </Element>
  );
}

情况B：需要客户端交互（如onClick）

Next.js 13的服务端组件不支持客户端事件（比如onClick），如果要保留交互功能，必须将组件标记为客户端组件，在文件顶部添加'use client'指令即可，调整后的代码：

'use client';
import clsx from "clsx";

interface TypographyProps {
  as?: keyof HTMLElementTagNameMap;
  className?: string;
  children?: React.ReactNode;
  style?: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "body";
  weight?: "medium" | "semibold";
  onClick?: () => void;
}

export function Typography(props: TypographyProps) {
  const Element = props.as || "p";

  return (
    <Element
      className={clsx(
        {
          "text-4xl md:text-6xl font-display": props.style === "heading-1",
          "text-3xl md:text-5xl font-display": props.style === "heading-2",
          "text-xl md:text-2xl": props.style === "heading-3",
          "text-lg": props.style === "heading-4",
          "font-medium": props.weight === "medium",
          "font-semibold": props.weight === "semibold",
        },
        props.className,
      )}
      onClick={props.onClick}
    >
      {props.children}
    </Element>
  );
}

额外优化建议 #

为了减少嵌套错误并提升语义化，可以根据style属性自动设置默认的HTML元素，比如标题样式对应h1-h4，这样既符合HTML规范，也能避免不必要的嵌套问题：

const getDefaultElement = (style?: TypographyProps['style']) => {
  switch(style) {
    case 'heading-1': return 'h1';
    case 'heading-2': return 'h2';
    case 'heading-3': return 'h3';
    case 'heading-4': return 'h4';
    default: return 'p';
  }
};

// 在组件内替换原默认值逻辑
const Element = props.as || getDefaultElement(props.style);

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