掌握Next.js中数据映射与渲染的最佳实践

// 原始的 getAllBlogs 函数（通常在服务端执行）
const getAllBlogs = async () => {
  await connectDB(); // 连接数据库
  const blogs = await posts.find({}); // 查询所有博客
  return blogs;
};

// 原始的 Blogs 异步组件
async function Blogs(): Promise<JSX.Element> {
  const posts: BlogsProps[] = await getAllBlogs(); // 直接等待数据获取
  return (
    <>
      <section
        className={`grid max-sm:grid-cols-1 md:grid-cols-2 md:grid-cols-3 gap-6 m-6 cursor-default ${outfit.className}`}
      >
        {posts.map((post) => (
          <div key={post._id}>
            <h1>{post.title}</h1>
            <h1>{post.subTitle}</h1> {/* 假设这里可能不显示 */}
            <h1>{post.author}</h1>   {/* 假设这里可能不显示 */}
            <h1>{post._id}</h1>
            <h1>{post.heading}</h1>  {/* 假设这里可能不显示 */}
            <h1>{post.quote}</h1>    {/* 假设这里可能不显示 */}
          </div>
        ))}
      </section>
    </>
  );
}

export default Blogs;

// app/api/blogs/route.ts
import { NextResponse } from 'next/server';
import connectDB from '@/lib/db'; // 假设您的数据库连接工具
import Post from '@/models/Post'; // 假设您的Mongoose模型

export async function GET() {
  try {
    await connectDB(); // 连接数据库
    const blogs = await Post.find({}); // 从数据库获取所有博客文章
    return NextResponse.json(blogs); // 返回JSON格式的博客数据
  } catch (error) {
    console.error('Error fetching blogs:', error);
    return NextResponse.json({ message: 'Failed to fetch blogs' }, { status: 500 });
  }
}

// Blogs.tsx (客户端组件)
'use client'; // 明确声明这是一个客户端组件

import { useState, useEffect } from 'react';
import { outfit } from '@/app/layout'; // 假设字体导入

// 定义博客文章的数据接口，确保包含所有预期字段
interface BlogItem {
  _id: string;
  title: string;
  subTitle?: string; // 使用可选属性，因为这些字段可能在某些文章中不存在
  author?: string;
  heading?: string;
  quote?: string;
  // 根据实际数据结构添加其他字段
}

function Blogs(): JSX.Element {
  const [posts, setPosts] = useState<BlogItem[]>([]); // 使用 useState 管理博客数据
  const [loading, setLoading] = useState<boolean>(true); // 管理加载状态
  const [error, setError] = useState<string | null>(null); // 管理错误状态

  useEffect(() => {
    async function fetchBlogsData() {
      try {
        setLoading(true); // 开始加载，设置加载状态为 true
        setError(null); // 清除之前的错误信息

        // 从API路由获取数据
        const response = await fetch('/api/blogs');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: BlogItem[] = await response.json(); // 解析JSON数据
        setPosts(data); // 更新博客数据状态
      } catch (err) {
        console.error("Failed to fetch blogs:", err);
        setError("Failed to load blog posts."); // 设置错误信息
      } finally {
        setLoading(false); // 无论成功或失败，结束加载
      }
    }

    fetchBlogsData(); // 组件挂载时调用数据获取函数
  }, []); // 空依赖数组确保只在组件首次挂载时执行一次

  // 根据加载和错误状态渲染不同的内容
  if (loading) {
    return <p>Loading blog posts...</p>;
  }

  if (error) {
    return <