Next.js中服务端父组件与客户端子组件如何共享PostgreSQL连接？

核心问题原因 #

• 数据库连接是服务端专属资源，不能直接通过props传递给客户端组件（会泄露数据库凭证，且客户端环境无法兼容服务端连接对象）。
• React的CreateContext属于客户端上下文API，服务端组件不支持初始化或使用客户端上下文，因此无法通过Context传递连接。

可行解决方案 #

1. 通过API路由处理客户端查询

客户端组件通过fetch请求调用Next.js API路由，由API路由统一处理数据库查询（复用连接池），避免客户端直接接触数据库连接。

• 新建API路由文件app/api/table-cell-data/route.js：

import { sql } from '@vercel/postgres'; // 替换为你的数据库操作库

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const rowId = searchParams.get('rowId');
  
  const queryResult = await sql`SELECT * FROM your_table WHERE id = ${rowId}`;
  return Response.json(queryResult.rows[0]);
}

• 修改客户端组件TableCell：

'use client';
import { useEffect, useState } from 'react';

export default function TableCell({ rowId }) {
  const [cellData, setCellData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const res = await fetch(`/api/table-cell-data?rowId=${rowId}`);
      const data = await res.json();
      setCellData(data);
    }
    loadData();
  }, [rowId]);

  return <td>{cellData?.content}</td>;
}

2. 服务端预取数据后通过props传递

如果TableCell需要的数据可以提前在服务端组件Display中查询完成，直接将数据作为props传给客户端组件，无需客户端再发起查询。

• 修改服务端组件Display：

import { sql } from '@vercel/postgres';
import TableCell from './TableCell';

export default async function Display() {
  // 服务端预取所有需要的数据
  const tableData = await sql`SELECT id, content FROM your_table`;

  return (
    <table>
      <tbody>
        {tableData.rows.map(row => (
          <tr key={row.id}>
            <TableCell data={row} />
          </tr>
        ))}
      </tbody>
    </table>
  );
}

• 简化客户端组件TableCell：

'use client';

export default function TableCell({ data }) {
  return <td>{data.content}</td>;
}

3. 使用Next.js Server Actions

通过Server Actions定义服务端查询逻辑，客户端组件可以直接调用该动作执行数据库操作，无需编写单独的API路由。

• 新建动作文件app/actions.js：

'use server';
import { sql } from '@vercel/postgres';

export async function getTableCellData(rowId) {
  const result = await sql`SELECT * FROM your_table WHERE id = ${rowId}`;
  return result.rows[0];
}

• 修改客户端组件TableCell：

'use client';
import { useState } from 'react';
import { getTableCellData } from './actions';

export default function TableCell({ rowId }) {
  const [cellData, setCellData] = useState(null);

  const loadData = async () => {
    const data = await getTableCellData(rowId);
    setCellData(data);
  };

  return (
    <td>
      <button onClick={loadData}>加载数据</button>
      {cellData?.content}
    </td>
  );
}

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