NextJS 13.4 - 如何从服务器和客户端上我自己的 API 获取

Question

我已经构建了从数据库获取的 API，然后我想使用该 API 在服务器和客户端上获取数据。看起来我无法在服务器上使用 fetch 执行此操作（我是否只需将逻辑从route.js 复制到服务器组件？）。我尝试使用 getServerSideProps，但看起来它不适用于 NextJS 13。然后它适用于客户端，但仅适用于开发人员。在生产中，它不适用于客户端（因为据我所知，API 路由尚未构建）。

那么我该如何使用我的 API 呢？

应用程序 pi\产品 oute.js

import { Product } from '@/models/product'
import { mongooseConnect } from "@/lib/mongoose"

export async function GET(request) {
    await mongooseConnect()
        const products = await Product.find()
    return new Response(JSON.stringify(products))
}

fetchProducts.js

"use server"

export async function fetchProducts(page, filter) {
    const apiUrl = `${process.env.URL}/api/products?page=${page}&filter=${filter}`

    try {
        const response = await fetch(apiUrl)
        const data = await response.json()
        return data
    } catch (error) {
        console.log(error)
        return null
    }
}

产品组成：

import { fetchProducts } from "@/actions/fetchProducts"
import LoadMoreProducts from "@/components/load-more-products"
import ProductsContainer from "./products-container"
export default async function Products() {

    const products = await fetchProducts(1)

    if (products === null) {
        return <></>
    }

    return (
        <div className="border-b border-b-hlinoteka-special">
            <ProductsContainer products={products} />
            <div className="mt-16">
                <LoadMoreProducts />
            </div>
        </div>
    )
}

在作为客户端组件的 LoadMoreProducts 中，我还异步运行 fetchProducts() 来获取其余部分。

编辑：我尝试在服务器组件内运行 API 的逻辑：

import LoadMoreProducts from "@/components/load-more-products"
import ProductsContainer from "./products-container"
import { Product } from "@/models/product"
import { mongooseConnect } from "@/lib/mongoose"

export default async function Products() {

    await mongooseConnect()
    const products = await Product.find()

    return (
        <div className="border-b border-b-hlinoteka-special">
            <ProductsContainer products={products} />
            <div className="mt-16">
                <LoadMoreProducts />
            </div>
        </div>
    )
}

但我遇到了未处理的运行时错误。错误：超出最大调用堆栈大小。但是，如果我尝试渲染像

<pre>{JSON.stringify(products, null, 2)}</pre>

这样的结果，我就不会明白。当我将它应用到任何组件时，我就进入了无限循环。

Answer 1

看来我已经修复了它，我有 NextJS Image 组件从 S3 存储桶中获取源代码，不知何故导致了崩溃。我还在获取中添加了一个

cache: 'no-store'

对象，因此这可能也会有所帮助。