Next.js应用中客户端调用服务端函数异常的问题求助

核心原因 #

Next.js的客户端组件运行在浏览器环境中，无法直接执行数据库查询逻辑：

• 数据库连接依赖服务端环境的配置和驱动，浏览器中没有这些依赖
• 直接在客户端执行数据库操作存在严重安全风险（会暴露数据库凭证）
• 之前在非客户端组件（服务端组件）中能正常调用，是因为服务端组件运行在服务器上，具备执行数据库查询的环境和权限

两种解决方案 #

方案1：创建API路由，客户端通过Fetch调用 #

把数据库查询逻辑移到Next.js的API路由中，客户端组件通过HTTP请求获取数据：

1. 创建API路由文件

// app/api/articles/route.ts
import { sql } from '@vercel/postgres'; // 根据你实际使用的数据库库调整
import { NextResponse } from 'next/server';
import type { IArticle } from '@/types'; // 你的文章类型定义

export async function GET() {
  try {
    const reqArticles = await sql<IArticle>`SELECT * FROM articles`;
    return NextResponse.json(reqArticles.rows);
  } catch (error) {
    return NextResponse.json({ message: "Cannot get articles" }, { status: 500 });
  }
}

2. 修改客户端组件的调用代码

'use client';
import { useState, useEffect } from 'react';
import type { IArticle } from '@/types';

export default function ArticlesPage() {
  const [articles, setArticles] = useState<IArticle[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        const res = await fetch('/api/articles');
        if (!res.ok) throw new Error('获取文章失败');
        const data = await res.json();
        setArticles(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : '未知错误');
      }
    };
    fetchArticles();
  }, []);

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

  // 渲染文章列表
  return (
    <div className="article-list">
      {articles.map(article => (
        <div key={article.id} className="article-item">
          <h3>{article.title}</h3>
          <p>{article.content}</p>
        </div>
      ))}
    </div>
  );
}

方案2：服务端组件获取数据，传给客户端组件 #

如果页面仅部分需要客户端交互，可以保留页面为服务端组件，先获取数据再传给客户端组件：

1. 服务端页面组件（无"use client"标记）

// app/articles/page.tsx
import { ArticleService } from '@/services/ArticleService';
import ArticlesClientComponent from './ArticlesClientComponent';

export default async function ArticlesPage() {
  // 在服务端执行数据库查询
  const articlesData = await new ArticleService().getArticles();

  // 处理查询错误
  if ('message' in articlesData) {
    return <div>错误：{articlesData.message}</div>;
  }

  // 将数据传给客户端组件
  return <ArticlesClientComponent initialArticles={articlesData} />;
}

2. 客户端子组件

'use client';
import { useState } from 'react';
import type { IArticle } from '@/types';

type Props = {
  initialArticles: IArticle[];
};

export default function ArticlesClientComponent({ initialArticles }: Props) {
  // 用服务端传来的初始数据初始化state
  const [articles, setArticles] = useState<IArticle[]>(initialArticles);

  // 这里可以添加客户端交互逻辑，比如筛选、排序等
  const handleSortByDate = () => {
    const sorted = [...articles].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
    setArticles(sorted);
  };

  return (
    <div>
      <button onClick={handleSortByDate}>按日期排序</button>
      <div className="article-list">
        {articles.map(article => (
          <div key={article.id} className="article-item">
            <h3>{article.title}</h3>
            <p>{article.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

额外注意点 #

• 不要在客户端组件中直接导入或调用包含数据库操作的服务类，所有数据库操作必须放在服务端环境（API路由、服务端组件、Server Actions）
• 如果你用的是Next.js 13+ App Router，Server Actions也是另一种可选方案，可以直接在客户端组件中调用带'use server'标记的异步函数执行数据库操作

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