这是从服务器组件中的数据库中获取数据的好方法吗？

Question

import { dbConnect } from "@/lib/dbConnect";
import User from "@/models/User";
import Image from "next/image";
import React from "react";
import { MdOutlineExplore } from "react-icons/md";

const Explore = async () => {
  await dbConnect();
  const users = await User.find();

  return (
    <section className="explore">
      <div className="text-2xl font-bold flex items-center gap-x-2">
        Discover People <MdOutlineExplore className="text-yellow-600" />
      </div>
      {users?.map((user, index) => {
        return (
          <div key={index} className="user flex gap-x-4 items-center">
            <div className="avatar">
              <Image
                src={user?.avatar ?? ""}
                width={30}
                height={30}
                alt={user?.username}
              />
            </div>
            <div className="details">
              <div className="name">{user?.username}</div>
              <div className="location">{user?.location?.country}</div>
            </div>
          </div>
        );
      })}
    </section>
  );
};

export default Explore;

我只是想知道这是否是从数据库获取数据并将其显示在这样的服务器组件中的最佳方式，或者我是否需要使用客户端组件和状态来存储数据？

Answer 1

我认为这取决于您的目的。如果您想保护数据库连接并隐藏一些需要获取数据的信息，上面的解决方案就足够了。如果您想简化前端服务器的工作，请随时为用户提供一些其他安全的方法来获取数据以在客户端呈现。当未来活跃用户数量增加时，它将最大限度地减少前端服务器的带宽和资源。