Next.js中getServerSideProps数据获取及dns模块缺失问题排查

一、「Module not found: Can't resolve 'dns'」错误修复 #

这个错误的核心原因是：MongoDB的Node.js驱动依赖Node.js内置的dns模块，但该模块仅存在于Node.js环境，浏览器端没有。你的报错指向MongoDB依赖和API路由，大概率是MongoDB相关逻辑被意外打包到了客户端代码中，或者Next.js在客户端编译时误触发了对dns模块的查找。

解决方法：

1. 隔离服务端逻辑：确保所有MongoDB的连接、查询操作只在服务端代码中运行——比如getServerSideProps内部、pages/api/下的API路由文件里，绝对不要在页面组件的客户端渲染部分（比如组件的render、useEffect钩子）调用MongoDB相关代码。
2. 配置Webpack排除Node.js内置模块：如果上述操作后仍报错，在next.config.js中添加Webpack配置，让客户端打包时忽略这些仅服务端存在的模块：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        dns: false,
        net: false,
        tls: false
      };
    }
    return config;
  },
};

二、关于getServerSideProps的疑问 #

1. 错误是否源于getServerSideProps？ #

正常情况下不会。getServerSideProps是仅在服务器端执行的函数，不会参与客户端代码打包，所以它本身不会触发dns模块的查找错误。问题大概率出在你代码的其他地方——比如页面组件中直接import了MongoDB库，或者在客户端钩子（如useEffect）里调用了依赖dns的逻辑。

2. getServerSideProps能否实现无刷新更新数据？ #

不能。getServerSideProps的作用是在每次页面请求时，在服务端预获取数据并传给页面组件渲染，它只在页面加载阶段运行一次。页面加载完成后，要实现删除用户后无刷新更新列表，必须用客户端数据交互的方式：

• 用useState维护页面的用户列表状态
• 初始化时通过useEffect调用API接口获取数据
• 删除用户后，要么重新调用获取列表的接口更新状态，要么直接从本地状态中移除删除的用户

示例代码：

import { useState, useEffect } from 'react';

export default function UsersPage({ initialUsers }) {
  // 用状态管理客户端数据，初始值来自getServerSideProps的服务端数据
  const [users, setUsers] = useState(initialUsers);

  // 删除用户逻辑
  const deleteUser = async (userId) => {
    // 调用删除API
    await fetch(`/api/users/${userId}`, { method: 'DELETE' });
    // 方式1：重新获取最新列表
    const res = await fetch('/api/users');
    const updatedUsers = await res.json();
    setUsers(updatedUsers);
    
    // 方式2：直接更新本地状态（更高效，无需重新请求）
    // setUsers(prev => prev.filter(user => user._id !== userId))
  };

  return (
    <div>
      {users.map(user => (
        <div key={user._id}>
          <span>{user.name}</span>
          <button onClick={() => deleteUser(user._id)}>删除</button>
        </div>
      ))}
    </div>
  );
}

// 保留getServerSideProps做首屏服务端渲染（可选，提升首屏加载速度）
export async function getServerSideProps() {
  // 服务端调用MongoDB获取初始用户列表
  const users = await fetchUsersFromMongoDB();
  return { props: { initialUsers: users } };
}

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