客户端组件嵌套服务端组件：数组数据无法在源码中显示问题

我有一个能获取数据的客户端组件，希望数据能在浏览器源码中显示，这点我知道是可以实现的。当我把简单字符串作为子元素传给服务端组件时，查看源码能看到该字符串，但一旦传递数组映射后的内容，源码里就看不到相关内容了。目前我通过props和children ReactNode引入服务端组件，相关代码如下：

Category 客户端组件代码 #

"use client";
import React from "react";
import { StateLoading } from "@/shared/enums/loading";
import { useSelectorEffect } from "@/hooks/useSelector";
import { useAppSelector } from "@/hooks/store.hooks";

import styles from "@/styles/core/_category.module.scss";

import CategoryItem from "./CategoryItem";
import { Preview } from "../interfaces/preview";

interface DisplayProps<T> {
  statusSelector: (state: any) => string;
  fetchAction: any;
  slot: any;
  title: string;
  children: React.ReactNode;
}

const Category = <T extends Preview>({
  statusSelector,
  fetchAction,
  slot,
  children,
}: DisplayProps<T>) => {
  const isClientLoaded = true;
  const isLoading = useAppSelector(statusSelector) === StateLoading.LOADING;
  return (
    <>
      {slot}
      {children}
    </>
  );
};

export default Category;

ComicsDisplay 组件使用代码 #

"use client";

import { useAppSelector } from "@/hooks/store.hooks";
import Category from "@/shared/components/Category";
import CategoryItem from "@/shared/components/CategoryItem";
import { Preview } from "@/shared/interfaces/preview";
import {
  selectStatus,
  getComics,
  selectComicsPreview,
} from "@/store/comics/comicsSlice";
import Link from "next/link";

const ComicsDisplay = () => {
  const items = useAppSelector(selectComicsPreview);
  return (
    <>
      <div>
        <Link href="/">Back to main Page</Link>
      </div>
      <Category<any>
        slot={<CategoryItem>what</CategoryItem>} {/* 此内容在页面和源码中都可见 */}
        statusSelector={selectStatus}
        fetchAction={getComics}
        title="Comics Category"
      >
        <CategoryItem>
          {items?.map((item: any) => `${item.title}`)} {/* 此内容仅在页面可见 */}
        </CategoryItem>
        {/* */}
      </Category>
    </>
  );
};

export default ComicsDisplay;

CategoryItem 服务端组件代码 #

import React from "react";

const CategoryItem = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <>
      {children}
    </>
  );
};

export default CategoryItem;

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