Reactjs NEXT.JS-从Wordpress rest api加载帖子非常慢

我正在学习Next.js，无法解决生产中页面加载缓慢的问题

出于某些原因，对于从wordpress REST API以低分辨率图像和标题调用的2篇文章，页面加载时间至少为2秒。该应用程序是完全基本的学习，没有额外的图书馆

有人知道我做错了什么吗

下面是我在Vercel上部署的演示页面：

尝试单击“下一步”按钮以查看缓慢的性能

下面是组件代码：

import Link from 'next/link'
import Card from '../../components/Card'
import Container from '../../components/Container'
import Flex from '../../components/Flex'
import { useRouter } from 'next/router'
import { url } from '../api/url'
const postsPerPage = 2

const Posts = ({ posts, page, countPages }) => {
const router = useRouter()
    return(
      <Container>
          <Flex>
            {posts.map((post) => (
                <Card key={post.id}>
                    <Link href={ `/posts/${ post.id }` }>
                        <a  href={ `/posts/${ post.id }` }>
                            <p>{post.title.rendered}</p>
                            <img src={
                            post.better_featured_image 
                            ? post.better_featured_image.media_details.sizes.medium.source_url 
                            : 'https://images.unsplash.com/photo-1559311648-874c28a0b7c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1931&q=80'} 
                        />
                        </a>
                    </Link>
                </Card>
            ))}
        </Flex>
        <button onClick={ () => router.push(`/posts/test?page=${page - 1}`)} disabled={page<=1}>Prev</button>
        <button onClick={ () => router.push(`/posts/test?page=${page + 1}`)} disabled={page>=countPages}>Next</button>
        <small>page: {page}</small>
      </Container>
    )
}
  export async function getServerSideProps({query: { page = 1 }}) {
    const res = await fetch(`${url}wp-json/wp/v2/posts?per_page=${postsPerPage}&page=${page}&?_fields=id,title,content,acf,featured_media,better_featured_image`)
    const posts = await res.json()
  
        const allPages = await fetch(`${url}wp-json/wp/v2/posts?_fields=id`)
        const resPages = await allPages.json();
        const countPages = resPages.length / postsPerPage

    return {
      props: {
        posts,
        page: +page,
        countPages
      }
    }
  }
  export default Posts

从“下一个/链接”导入链接
从“../../components/Card”导入卡
从“../../components/Container”导入容器
从“../../components/Flex”导入Flex
从“下一个/路由器”导入{useRouter}
从“../api/url”导入{url}
常量postsPerPage=2
const Posts=（{Posts，page，countPages}）=>{
const router=useRouter（）
返回(
{posts.map（（post）=>(
))}
router.push（`/posts/test？page=${page-1}`）}禁用={pagePrev
router.push（`/posts/test？page=${page+1}`）}已禁用={page>=countPages}>Next
页码：{page}
)
}
导出异步函数getServerSideProps（{query:{page=1}}）{
const res=wait fetch（`${url}wp json/wp/v2/posts？per_page=${postsPerPage}&page=${page}&？_fields=id、title、content、acf、特色媒体、特色图片`）
const posts=wait res.json（）
const allPages=wait fetch（`${url}wp json/wp/v2/posts？\u fields=id`）
const resPages=await allPages.json（）；
const countPages=resPages.length/postsPerPage
返回{
道具：{
帖子，
页码：+page，
数页
}
}
}
导出默认帖子