Next.js 13服务端组件插入MongoDB文档后页面不更新数据问题

你的问题核心是Next.js 13默认对Server Components执行静态预渲染：

• 开发模式下，为了调试便利，每次请求都会重新渲染组件并查询数据库，刷新就能看到新数据。
• 执行npm run build时，Next.js会预渲染该路由为静态页面，把数据库查询结果固化到静态文件中；启动npm run start后，服务器只会返回这份预渲染的静态内容，不会再重新查询数据库，所以看不到新数据。路由被标记为静态是默认行为，但不符合你需要实时获取数据的场景。

解决方法 #

方法1：强制动态渲染（推荐，适合实时数据场景） #

在tickets.js组件顶部添加export const dynamic = 'force-dynamic'，让Next.js在每次用户请求时都重新执行组件内的数据库查询，确保获取最新数据：

import clientPromise from "../../../lib/mongodb";

// 强制路由为动态渲染，每次请求都重新执行组件逻辑
export const dynamic = 'force-dynamic';

export default async function Tickets() {
    const client = await clientPromise;

    const db = client.db('sample_mflix');
    const collection = db.collection('contact');
    const result = await collection.find().toArray()
    console.log("Database fetched")

    return(
    <>
    {result.map(el => {
        return (
            <div key={el._id}>
                {el.name}
                {el.email}
                {el.message}
            </div>
        )
    })}
    </>
    )
}

方法2：增量静态再生（ISR，适合允许短暂缓存的场景） #

如果不需要严格实时，希望兼顾性能与数据更新，可以设置revalidate字段，指定页面在N秒后自动重新生成（重新查询数据库）：

import clientPromise from "../../../lib/mongodb";

// 每60秒重新生成页面，获取最新数据
export const revalidate = 60;

export default async function Tickets() {
    // 组件逻辑保持不变
    const client = await clientPromise;

    const db = client.db('sample_mflix');
    const collection = db.collection('contact');
    const result = await collection.find().toArray()
    console.log("Database fetched")

    return(
    <>
    {result.map(el => {
        return (
            <div key={el._id}>
                {el.name}
                {el.email}
                {el.message}
            </div>
        )
    })}
    </>
    )
}

补充：优化MongoDB连接逻辑 #

你的/lib/mongodb.js当前未区分开发与生产模式，建议补充环境判断，避免生产模式下误用全局变量：

import { MongoClient } from 'mongodb'

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
}

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (process.env.NODE_ENV === 'development') {
  console.log("DEVELOPMENT MODE MONGODB")
  // 开发模式用全局变量保存连接，避免HMR重复创建
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // 生产模式直接创建连接，模块加载时初始化一次
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

export default clientPromise

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