Next.js中getInitialProps的服务端与客户端数据获取问题

嘿，这个场景我太熟了！我之前用Next.js+Express自定义服务器的时候也碰到过一模一样的问题😎

核心问题就是：客户端环境没有权限（也不应该）直接连接数据库，所以必须通过API接口作为中间层来获取数据。下面是具体的实现方案：

1. 先在Express服务器上写一个数据接口 #

既然你已经用Express搭了自定义服务器，直接在里面加一个API路由就行，专门用来处理数据库查询并返回数据：

// server.js（你的Express服务器文件）
const express = require('express');
const next = require('next');
const db = require('./your-db-connection'); // 替换成你的数据库连接模块

const app = express();
const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });
const handle = nextApp.getRequestHandler();

// 新增：处理数据请求的API接口
app.get('/api/your-page-data', async (req, res) => {
  try {
    // 这里写你的数据库查询逻辑，比如PostgreSQL的query或者MongoDB的find
    const queryResult = await db.query('SELECT * FROM your_target_table');
    // 返回JSON格式的数据给客户端
    res.json(queryResult.rows);
  } catch (error) {
    console.error('数据库查询失败:', error);
    res.status(500).json({ error: '获取数据时发生错误' });
  }
});

// 处理Next.js的页面路由
app.all('*', (req, res) => handle(req, res));

nextApp.prepare().then(() => {
  app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
  });
});

2. 在页面的getInitialProps里区分环境处理 #

getInitialProps可以通过ctx.req判断当前是服务端还是客户端：存在ctx.req就是服务端环境，直接连数据库；不存在就是客户端环境，调用上面写的API接口。

// pages/your-target-page.js
import fetch from 'isomorphic-unfetch'; // 用这个库可以兼容前后端的请求，或者用axios也可以

const YourTargetPage = ({ pageData }) => {
  return (
    <div>
      {/* 渲染你的数据 */}
      {pageData.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
};

YourTargetPage.getInitialProps = async (ctx) => {
  let pageData;

  if (ctx.req) {
    // 服务端环境：直接查询数据库
    const db = require('../your-db-connection');
    const queryResult = await db.query('SELECT * FROM your_target_table');
    pageData = queryResult.rows;
  } else {
    // 客户端环境：调用API接口获取数据
    const response = await fetch('/api/your-page-data');
    pageData = await response.json();
  }

  return { pageData };
};

export default YourTargetPage;

3. 一些需要注意的细节 #

• 请求库选择：客户端环境不能用Node.js的http模块，推荐用isomorphic-unfetch或者axios这种前后端通用的请求库，或者直接用浏览器原生的fetch（注意低版本浏览器兼容性）。
• 数据库连接复用：服务端的数据库连接要做好复用，不要每次请求都新建连接，否则会导致性能问题。
• 错误处理：不管是服务端查询还是客户端请求，都要加try/catch捕获异常，避免页面直接崩溃。
• Next.js版本提示：如果你的Next.js是9.3+版本，其实更推荐用getServerSideProps（仅在服务端运行，无需判断环境）或者getStaticProps（静态生成），不过上面的方案完全适配你当前用getInitialProps的场景。

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