如何仅通过一个请求即可渲染页面并生成元数据？

Question

我需要生成元数据并使用 仅一个请求渲染页面，我想使用一个请求，因为我正在构建一个博客页面，多个请求或缓存会导致 viewCounter 计数不正确

我当前的代码

获取博客功能

export async function getTurkishPostBySlug(TrSlug) {
    const res = await fetch(`http://localhost:8080/post/${TrSlug}`, { cache: "no-store" })
    if (res.status === 200) {
        return res.json()
    } else {
        return "err"
    }
}

Page.js

export async function generateMetadata({ params, searchParams }, parent) {
    const res = await getTurkishPostBySlug(params.slug)
    if (res.blog) {
        return {
            title: res.blog.TR_title,
        }
    }
}

async function CodeDetail({params}) {
    let post = null
    
    let res = await getTurkishPostBySlug(params.slug)
    if (res.blog) {
        post = res.blog
    }

    if (post) {
        return ("RENDER HERE...")

我尝试缓存但计数错误

Answer 1

无法一次性调用

generateMetadata

和页面组件。但由于您使用的是

fetch()

，因此两个调用结果为一个，正如您可以在 doc 上读到的那样：

React 扩展了

fetch

API 以自动记住具有相同 URL 和选项的请求。这意味着您可以在 React 组件树中的多个位置调用相同数据的获取函数，而只需执行一次。