Next.js 13生产环境Server Component无法从MongoDB取数求助

使用Next.js 13.4.1开发项目时，src/app/dashboard/page.tsx页面里的Server Component（Card组件）在开发模式下能正常获取并展示用户帖子列表，但执行npm run build后启动生产环境，出现Server Components渲染错误：

error: an error occurred in the server components render. the specific message is omitted in production builds to avoid leaking sensitive details. a digest property is included on this error instance which may provide additional details about the nature of the error

把Card转为客户端组件后错误消失，但希望保留Server Component实现该功能。

相关代码片段 #

page.tsx #

import React from "react";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import { authOptions } from "../api/auth/[...nextauth]/route";
import NewsForm from "../components/createPost/NewsForm";
import Card from "../components/PostsCreatedByUser/Card";

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  if (!session) {
    redirect("/");
  }

  return (
    <div className="grid grid-cols-2 gap-8">
      <Card />
      <NewsForm />
    </div>
  );
}

帖子列表组件（Card） #

import React, { useEffect, useState } from "react";
import { Post } from "../../../../types/PostsType";
import getNews from "../../../../lib/getNewsFromDb";

export default async function Card() {
const data: Post[] = await getNews();

  const posts: Post[] = data.filter((el) => el.username === "Богдан Піщак");

  return (
    <div>
      {posts.map((post, index) => {
        return (
          <div key={index}>
            <img src={post.img} alt="img" width={200} height={200} />
            <p>{post.description}</p>
          </div>
        );
      })}
    </div>
  );
}

数据获取函数getNews #

export default async function getNews() {
  const res = await fetch(`http://localhost:3000/api/getposts`, {
    method: "GET",
  });

  if (!res.ok) return undefined;

  return res.json();
}

API路由（getposts） #

import { NextResponse, NextRequest } from "next/server";
import connect from "../../../../util/mongoConnect";
import Post from "@/models/Post";

export const GET = async (request: Request) => {
  try {
    await connect();

    const posts = await Post.find();
    return new NextResponse(JSON.stringify(posts), { status: 200 });
  } catch (err) {
    return new NextResponse("Database Error", { status: 500 });
  }
};

MongoDB连接函数 #

import mongoose from "mongoose";

const connect = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI as any);
    mongoose.set("strictQuery", true);
  } catch (error) {
    throw new Error("Connection failed!");
  }
};

export default connect;

核心问题 #

1. Server Component调用内部API的生产环境限制：开发模式下Next.js会自动代理内部API请求，但生产构建后，Server Component在服务器端运行时，http://localhost:3000/api/getposts这个地址可能无法访问（比如生产环境域名不是localhost，或者服务器内部无法通过该地址访问API）。
2. 冗余的API层：Server Component可以直接操作数据库，不需要通过API路由中转，既减少网络请求开销，也避免了上述访问问题。
3. 未处理数据异常：getNews请求失败时返回undefined，后续data.filter会触发报错，开发模式可能没触发该场景，但生产环境容易出现。
4. Server Component误用客户端Hooks：原Card组件导入了useEffect和useState，但Server Component不支持React Hooks，这也是潜在的错误源。

修复方案 #

1. 直接在Server Component中查询数据库 #

删除getNews函数和对应的API路由，让Card组件直接连接数据库并查询数据：

修改后的Card组件：

import React from "react";
import { Post } from "../../../../types/PostsType";
import connect from "../../../../util/mongoConnect";
import PostModel from "@/models/Post";

export default async function Card() {
  await connect();
  // 直接从数据库筛选目标用户的帖子
  const posts: Post[] = await PostModel.find({ username: "Богдан Піщак" });

  return (
    <div>
      {posts.map((post) => {
        return (
          <div key={post._id}> {/* 用数据库ID作为key，比index更可靠 */}
            <img src={post.img} alt="帖子图片" width={200} height={200} />
            <p>{post.description}</p>
          </div>
        );
      })}
    </div>
  );
}

2. 传递当前登录用户信息（避免硬编码） #

DashboardPage已经获取了用户session，可以把用户名传递给Card组件，实现动态筛选：

修改DashboardPage：

import React from "react";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import { authOptions } from "../api/auth/[...nextauth]/route";
import NewsForm from "../components/createPost/NewsForm";
import Card from "../components/PostsCreatedByUser/Card";

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  if (!session) {
    redirect("/");
  }

  // 根据你的NextAuth配置获取用户名，这里假设存在session.user.name
  const username = session.user?.name;
  if (!username) redirect("/");

  return (
    <div className="grid grid-cols-2 gap-8">
      <Card username={username} />
      <NewsForm />
    </div>
  );
}

修改Card组件接收props：

import React from "react";
import { Post } from "../../../../types/PostsType";
import connect from "../../../../util/mongoConnect";
import PostModel from "@/models/Post";

// 定义组件props类型
type CardProps = {
  username: string;
};

export default async function Card({ username }: CardProps) {
  try {
    await connect();
    const posts: Post[] = await PostModel.find({ username });

    return (
      <div>
        {posts.map((post) => {
          return (
            <div key={post._id}>
              <img src={post.img} alt="帖子图片" width={200} height={200} />
              <p>{post.description}</p>
            </div>
          );
        })}
      </div>
    );
  } catch (err) {
    // 开发环境打印错误，生产环境返回友好提示
    if (process.env.NODE_ENV === "development") {
      console.error("加载帖子失败：", err);
    }
    return <div>加载帖子失败，请稍后重试</div>;
  }
}

3. 优化MongoDB连接逻辑 #

避免重复创建数据库连接，修改connect函数：

import mongoose from "mongoose";

const connect = async () => {
  // 如果已经建立连接，直接返回
  if (mongoose.connections[0].readyState === 1) return;
  
  try {
    await mongoose.connect(process.env.MONGODB_URI as string);
    mongoose.set("strictQuery", true);
  } catch (error) {
    throw new Error("数据库连接失败！");
  }
};

export default connect;

4. 清理客户端Hooks导入 #

原Card组件中导入的useEffect和useState属于客户端Hooks，Server Component不支持，直接删除：

// 删掉这行
import React, { useEffect, useState } from "react";
// 改为
import React from "react";

内容的提问来源于stack exchange，提问作者stereoboiii