第一个问题主要考虑几个因素：列表数据、分页 1、列表数据首次加载可以使用服务端渲染：在服务端组件，获取到的数据，可以传给客户端子组件，作为初始化的数据； 2、分页可以使用服务端action，因为action触发的地方有两个，一个是表单的action，一个是startTransition，这里没有表单，所以可以调用startTransition，实现服务端action； // ./pagination/page.jsx import { getDataByPage } from './actions'; import PaginationChild from './paginationChild.jsx'; export default async function A () { const {data,total} = await getDataByPage(1) return <div> <h2>Pagination</h2> <PaginationChild initData={data} initTotal={total}></PaginationChild> </div>; } // ./pagination/paginationChild.jsx 'use client'; import { startTransition, useState } from 'react'; import { getDataByPage } from './actions.jsx'; export default function PaginationChild ({initData,initTotal}) { const [data, setData] = useState(initData); const [total, setTotal] = useState(initTotal); const getPage = (page) => { startTransition(async() => { const {data,total} = await getDataByPage(page) setData(data); setTotal(total); }); } return <div> <ul> data:{data.map((item) => <li key={item}>{item}</li>)}</ul> <span>total: {total}</span> <div> <button onClick={() => getPage(1)}>第1页</button> <button onClick={() => getPage(2)}>第2页</button> </div> </div>; } // ./pagination/actions.jsx 'use server'; export async function getDataByPage(page) { // 模仿数据库 await new Promise((resolve) => setTimeout(resolve, 1000)); if(page === 1){ return { data: ["id 1", "id 2", "id 3", "id 4", "id 5", "id 6", "id 7", "id 8", "id 9", "id 10"], total: 100, }; }else{ return { data: ["id 11", "id 12", "id 13", "id 14", "id 15", "id 16", "id 17", "id 18", "id 19", "id 20"], total: 100, }; } }