使用Basehub CMS获取数据并结合Swiper实现项目轮播的问题求助

Hey 各位大佬，我最近在做项目轮播功能时遇到了麻烦，想请大家帮忙看看！

我用Basehub的Pump组件获取项目数据，然后想结合Swiper实现轮播效果，但目前遇到两个问题：

• 我猜测是因为在同一个文件里同时使用了服务器组件（async的Projects组件）和客户端组件（Swiper），导致冲突，但不知道怎么解决
• 尝试把轮播项拆成独立组件后，轮播完全没法正常工作，只渲染出第一个项目

下面是我目前的代码：

const Projects = async () => {
    return (
        <Pump
            queries={[
                {
                    __typename: true,
                    projects: {
                        items: {
                            _title: true,
                            descriptions: {
                                plainText: true,
                            },
                            projectImage: { url: true, width: true, height: true, alt: true },
                        },
                    },
                },
            ]}
        >
            {async ([data]) => {
                'use server';

                if (!data.projects.items.length) {
                    return <div>No projects found</div>;
                }

                const projectPosts = data.projects.items;

                // <> {JSON.stringify(data, null, 2)} </>

                return (
                    <section className='flex flex-col h-screen min-h-[400px]'>
                        <InnerNav />
                        <Swiper className='grow relative flex flex-row  swiper'>
                            <div className='flex flex-row h-full'>
                                {projectPosts.map((projects, index) => (
                                    <div
                                        className='h-full flex-grow flex flex-row swiper-slide '
                                        key={index}
                                    >
                                        <div className='flex-grow w-full bg-slate-100 p-4 flex items-center justify-center'>
                                            {/* <Image src={proimage} alt='' width={100} height={100} /> */}
                                            <img
                                                src={projects.projectImage?.url as string}
                                                alt={projects.projectImage?.alt as string}
                                                width='auto'
                                                height='100%'
                                            />
                                        </div>
                                        <div className='p-6 w-[500px] relative flex flex-col justify-start pb-8 gap-4'>
                                            <h2 className='text-2xl font-bold'>{projects._title}</h2>
                                            <p>{projects.descriptions?.plainText}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </Swiper>
                    </section>
                );
            }}
        </Pump>
    );
};

我怀疑是Basehub和Swiper之间有兼容性问题，或者是我对Next.js的服务器/客户端组件区分没做好。有没有大佬能给点建议，帮我解决这个问题呀？

备注：内容来源于stack exchange，提问作者Joe