ssr.jsx

import "@/app/globals.css";
import prisma from "@/lib/prisma";
import dayjs from "dayjs";
import React, { memo } from "react";
import { Card, CardBody, CardFooter, Image, Button } from "@nextui-org/react";
import { difftime } from "@/lib/time";

// 服务器端渲染页面的组件
function ServerSidePage({ folders }) {

  return (
    <div className="p-4">
      <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
        服务端渲染页面
      </span>
      <div className="gap-2 grid xl:grid-cols-8 lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 mt-4">
        {folders?.map((item) => {
          return (
            <Card shadow="sm" key={item.id} isPressable>
              <CardBody className="overflow-visible p-0">
                <Image
                  isZoomed
                  shadow="sm"
                  radius="lg"
                  width="100%"
                  alt={item.name}
                  className="w-full object-cover h-[140px]"
                  src={item.poster}
                />
              </CardBody>
              <CardFooter className="text-small justify-between">
                <b>{item.name}</b>
                <p className="text-default-500">{difftime(item.createdAt)}</p>
              </CardFooter>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

// 服务器端渲染方法，获取数据并将其作为 props 传递给组件

export const getServerSideProps = async () => {
  const folders = await prisma.folder.findMany({
    // where: { published: true },
    // include: {
    //   author: {
    //     select: { name: true },
    //   },
    // },
  });


  return {
    props: {
      folders: folders?.map((it) => ({
        ...it,
        createdAt: dayjs(it?.createdAt)?.format("YYYY-MM-DD HH:mm:ss"),
        updatedAt: dayjs(it?.updatedAt)?.format("YYYY-MM-DD HH:mm:ss"),
      })),
    },
    // revalidate: 10, //轮询
  };
};

export default ServerSidePage;