1、action 的作用
action 的使用场景是在非客户端组件中提供后端数据，比如数据库数据调用、session 信息调取等等处理功能，而这些数据可以通过在 page.ts 中使用 props 传入的方式传递给子组件。从架构设计上来看双层或者三层接口足以应付中小型项目，对于大型项目可以考虑使用 mobx 或者 redux 、zustand进行全局数据共享来实现数据传递。
2、nextjs 的登录实现方式
- 使用 next-auth 来实现第三方登录管理
- session 管理由 next-auth 自动管理。其中的实现流程被隐藏了，比如：session 的实现技术 jwt 只需要配置strategy: “jwt”即可实现，开箱即用。
3、页面的实现逻辑
- 当一个功能是页面级别的时候，比如：行程。行程是个全屏页面功能，并不是个单纯的组件，所以我们将其放置在“src/app/trips/page.tsx”下面，其他页面级别的功能都类似处理，nextjs 会自动识别组件的
- 一般页面组件是不会使用“use client”进行标记的，page 都是由服务端进行渲染。
- 页面一般不处理详细的逻辑，比如 trips 页面只做无数据的提示和有数据情况下调用“src/app/trips/TripClient.tsx”组件来处理详细行程功能，page 更像是一个信息的中转层。
import getCurrentUser from "../actions/getCurrentUser";
import getReservations from "../actions/getReservations";
import ClientOnly from "../components/ClientOnly";
import EmptyState from "../components/EmptyState";
import TripsClient from "./TripClient";
const TripsPage = async () => {
const currentUser = await getCurrentUser();
if (!currentUser) {
return (
<ClientOnly>
<EmptyState title="Unauthorized" subtitle="Please login"></EmptyState>
</ClientOnly>
);
}
const reservations = await getReservations({
userId:currentUser.id
})
if(reservations.length === 0){
return (
<ClientOnly>
<EmptyState title="No trips found" subtitle="Looks like you havent reserved any trips/"/>
</ClientOnly>
);
}
return (
<ClientOnly>
<TripsClient reservations={reservations} currentUser={currentUser}></TripsClient>
</ClientOnly>
)
};
export default TripsPage;