我试图在Nextjs中实现一个SEO友好的自定义 accordion ，但是该组件使用状态，我必须将其用作客户端组件。
Accordion使用状态来切换使用“可见性”样式的类。
据我所知，客户端组件不包括在初始HTML中，因此内容不可用于爬虫。

//FaqItem.tsx
"use client";
import { useState } from "react";
import DecalSvg from "../decalSvg/DecalSvg";
import styles from "./FaqItem.module.scss";

interface IProps {
  title: string;
  description: string;
  expanded?: boolean;
}

export default function FaqItem(props: IProps) {
  const { title, description, expanded } = props;
  const [isActive, setIsActive] = useState(expanded);

  const handleToggleActive = () => {
    setIsActive((prev) => !prev);
  };

  return (
    <div className={styles.faqWrapper}>
      <dt>
        <button
          id="accordion-header-1"
          aria-controls="accordion-panel-1"
          aria-expanded={isActive}
          onClick={handleToggleActive}
          className={`${styles.faqButton} ${isActive ? styles.expanded : ""}`}
        >
          <span>
            {title}
            <span className="color-primary">.</span>
          </span>
          <div className={styles.svgWrapper}>
            <DecalSvg
              className={styles.svg}
              aria-hidden="true"
              width={32}
              height={32}
            />
          </div>
        </button>
      </dt>
      <dd
        className={`${styles.details} ${isActive ? styles.active : ""}`}
        id="accordion-panel-1"
        aria-labelledby="accordion-header-1"
        // hidden={!isActive}
      >
        <p>{description}</p>
      </dd>
    </div>
  );
}

我如何使FAQ项目的内容（标题和描述）SEO友好（可见爬虫和谷歌搜索时）？有没有其他办法解决这个问题？我理解错了吗
使用NextJs 13.5.3