小编Kar*_*kur的帖子

我正在使用 next.js 开发一个博客网站。我有一个主页，它是一个服务器组件，但现在我希望它更改为客户端组件，以便我可以使其具有交互性（集成分页）。

但是，当我将代码转换为客户端组件时，它开始给我带来问题，例如浏览器窗口在打开 localhost 时似乎有时会卡住。还有api请求getPosts方法没有通过 React 的 useState 的 setState 函数进行存储。

下面给出的是主页的先前服务器组件 -

import { getCategoryPosts, getPosts } from '@/services'
import styles from '../../app/page.module.scss'
import PostCard from './PostCard'

type Props = { categorySlug?: string }

async function HomePagePosts({ categorySlug = '' }: Props) {
  const { postsContainer } = styles
  let posts
  if (!categorySlug) {
    posts = await getPosts()
  } else {
    posts = await getCategoryPosts(categorySlug)
  }

  return (
    <section className={postsContainer}>
      {posts.map((post) => (
        <PostCard post={post} key={post.title}></PostCard> …