Next.js 中 MongoDB 页面数据更新问题：如何解决？

在 Next.js 中使用 MongoDB 时解决页面数据更新问题

问题：

在使用 Next.js 从 MongoDB 数据库查询和呈现页面数据时，有时会遇到数据更新无法在页面上反映的问题。这通常发生在生产环境中，但在开发模式下运行应用程序时数据更新却能正常工作。

原因：

当使用 npm run build 构建应用程序时，Next.js 将路由标记为静态，导致页面上的数据无法重新验证。

解决方案：

1. 修改 lib/mongodb.js 文件：

   将客户端连接移动到一个单独的函数中，并导出该函数：

   import { MongoClient } from 'mongodb'
   
   const connectToDatabase = async () => {
     if (!client) {
       client = new MongoClient(uri, options)
     }
     return client.connect()
   }
   
   export default connectToDatabase
   

2. 修改 tickets.js 组件：

   使用导出的 connectToDatabase 函数连接到数据库：

   import connectToDatabase from "../../../lib/mongodb";
   
   export default async function Tickets() {
     const client = await connectToDatabase()
   
     const db = client.db('sample_mflix');
     const collection = db.collection('contact');
     const result = await collection.find().toArray()
   
     return(
     <>
     {result.map(el => {
         return (
             <div key={el._id}>
                 {el.name}
                 {el.email}
                 {el.message}
             </div>
         )
     })}
     </>
     )
   }
   

3. 重新构建应用程序：

   运行 npm run build 重新构建应用程序，这将将路由标记为服务器端渲染而不是静态。

4. 重新启动服务器：

   重新启动服务器（npm run start），现在数据库中的更改应该会反映在页面上了。

常见问题解答：

1. 为什么在开发模式下数据更新可以正常工作？

在开发模式下，应用程序运行在开发服务器上，该服务器会实时监视文件更改并重新加载页面。因此，数据库更新后，页面上的数据也会自动更新。

2. 构建应用程序时标记路由为静态有什么影响？

将路由标记为静态可以让应用程序在首次加载后更快地响应请求。但是，它也意味着页面上的数据无法在客户端重新验证。

3. 为什么将客户端连接移动到一个单独的函数中很重要？

将客户端连接移动到一个单独的函数中可以确保在每次请求中创建一个新的客户端连接。这有助于防止内存泄漏和其他与数据库连接相关的问题。

4. 还需要采取哪些其他步骤来确保页面数据正确更新？

确保数据库查询在服务器端执行，而不是客户端。您还可以使用 Next.js 的 getStaticProps 或 getServerSideProps 函数来预取数据并将其传递给页面组件。

5. 此解决方案是否适用于所有使用 Next.js 和 MongoDB 的情况？

此解决方案适用于大多数使用 Next.js 从 MongoDB 数据库查询和呈现页面数据的场景。但是，对于某些复杂的应用程序，可能需要采取其他方法。