在 Next js 应用程序路由器服务器组件中使用事件？

Question

我是 next js 服务器组件的新手，我想知道使用 onClick 等事件的最简单方法是什么。我有一个从 getData 函数收到的帖子列表。数字 2 代表我要列出的帖子数量。我想知道如何使用 onClick 事件来增加这个值。我想我应该使用 Button 作为客户端组件。我必须使用 PostList 组件作为客户端还是其他组件？

    export async function getData(category: string, numOfPosts: number) {
  const res = await getPostsByCategory(category, numOfPosts);

  if (!res) {
    throw new Error("Failed to fetch data");
  }

  return res;
}

const PostList = async ({ category }: { category: string }) => {
  const data = await getData(category, 2);

  return (
    <div>
      {data.map((item: any, idx: number) => {
        return (
          <div
            key={idx}
            className={`${styles.grid2} ${categoryStyles.categoryPaddingBottom}`}
          >
            <Link href={`/${category}/${item.slug}`}>
              <div className={styles.relativeEle}>
                <Image
                  src={item.featuredImage.node.sourceUrl}
                  alt={item.title}
                  sizes="500px"
                  fill
                  priority={true}
                />
                <div className={styles.hoverOverlay}></div>
              </div>
            </Link>
            <div className={categoryStyles.flexCategory}>
              <Link href={`/${category}/${item.slug}`}>{item.title}</Link>
              <span>{item.date}</span>
              <div
                className={styles.dangerHtml}
                dangerouslySetInnerHTML={{
                  __html: item?.content.slice(0, 190) + " ...",
                }}
              ></div>
            </div>
          </div>
        );
      })}
      <button>Add</button>
    </div>
  );
};

export default PostList;

Answer 1

诸如 onClick、onChange 等客户端交互不会直接在服务器组件内处理。服务器组件主要用于在服务器上渲染组件，并在将数据发送到客户端之前获取数据以预渲染组件。

如果您的组件有事件，则该组件应该是客户端组件