求助：NextJS标记use client的页面如何直接获取数据库数据

问题分析 #

你遇到的useEffect初始加载无法获取数据、仅热重载有效的问题，大概率是请求错误未被捕获、API端点存在异常，或是组件初始状态处理不当导致的渲染异常。

步骤1：验证API端点可用性 #

先直接在浏览器地址栏访问/api/rinder/list，确认是否能返回正确的JSON数据：

• 如果返回错误（如500、404），优先排查API路由实现：
  • 确保路由文件路径正确：App Router下为app/api/rinder/list/route.ts，Pages Router下为pages/api/rinder/list.js
  • 检查API路由中Prisma调用逻辑，示例代码如下：

    // App Router 路由示例
    import prisma from "src/libs/prisma";
    import { NextResponse } from "next/server";
    
    export async function GET() {
      try {
        const rinder = await prisma.rinder.findMany();
        return NextResponse.json(rinder);
      } catch (error) {
        return NextResponse.json({ error: "数据获取失败" }, { status: 500 });
      }
    }
    

步骤2：完善useEffect的错误处理与状态管理 #

修改客户端组件代码，添加错误捕获逻辑并优化初始状态：

"use client";

import { useEffect, useState } from "react";

export default function RinderListPage() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("/api/rinder/list");
        if (!res.ok) {
          throw new Error(`请求失败：${res.status}`);
        }
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div> {/* 根据你的数据字段调整渲染内容 */}
      ))}
    </div>
  );
}

步骤3：可选方案：用SWR/React Query简化数据获取 #

对于客户端数据获取，推荐使用SWR或React Query这类库，它们自带缓存、自动重试、重新验证等功能，比手动useEffect更稳定：

SWR示例： #

"use client";

import useSWR from "swr";

const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error("数据获取失败");
  return res.json();
};

export default function RinderListPage() {
  const { data, error, isLoading } = useSWR("/api/rinder/list", fetcher);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

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