Go Back

NextJS数据获取方式

技术

关于posts的数据获取，有下面几种方式：

  1. 直接在postsList里访问数据库获取posts
  2. 将getPosts写进postsAction然后调用action获取posts
  3. 在api/blog/list里写GET方法，然后postsList里fetchapi的绝对路径获取posts
  4. 将postList改为客户端，在api/blog/list里写GET方法，在客户端fetch到posts这几种方法哪种最好？

以下为Copilot的回答

最佳的获取 posts数据的方式是直接在 postsList.jsx中访问数据库获取posts（方法1）。以下是各方法的分析：

1. 直接在 postsList 里访问数据库获取 posts

优点：

  • 简化数据获取流程，减少中间层。
  • 利用 Next.js 服务器组件的优势，减少客户端的负担和延迟。

缺点：

  • 数据访问逻辑与组件逻辑混合，可能影响代码的可维护性。

2. 将 getPosts写进 postsAction 然后调用 action 获取 posts

优点：

  • 分离数据获取逻辑和组件逻辑，提高代码的可维护性。

缺点：

  • 如果 postsAction 主要用于数据获取，可能不符合“action”设计用于数据修改的初衷。

3. 在 api/blog/list 里写 GET 方法，然后 postsList 里 fetch API 的绝对路径获取

posts

优点：

  • 清晰的 API 设计，适用于需要在多个地方复用数据获取逻辑的情况。

缺点：

  • 增加了一次 HTTP 请求，可能带来性能上的开销。
  • 增加了代码的复杂性。

4. 将 postList 改为客户端，在 api/blog/list 里写 GET 方法，在客户端 fetch 到

posts

优点：

  • 前端组件可以更灵活地处理数据和状态。

缺点：

  • 客户端进行数据获取，可能导致首次加载时间变长。
  • 增加了客户端的复杂性和潜在的安全风险。

推荐

基于以上分析，方法1 是最佳选择，特别是在使用 Next.js 服务器组件时。它简化了数据获取流程，充分利用了服务器端渲染的优势，减少了不必要的客户端请求和复杂性。同时，可以通过适当的代码结构优化，实现逻辑与组件的合理分离。

// postsList.jsx
import { connectToDb } from '@/lib/connectToDb';
import { Post } from '@/lib/models/post';
import Link from 'next/link';
import React from 'react';
​
export default async function PostList() {
  await connectToDb();
  const posts = await Post.find().lean();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post._id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}