在服务端组件之间共享数据

Question

我可以提高效率，而不必两次调用 getPosts 吗？我想使用初始帖子来创建不同的布局，但我不想继续使用 getPosts() 或者这是不可能的？

import { getPosts } from "../../sanity-utils"
 
 
 export default async function Server() {
    const posts = await getPosts();
  
    return (
        <div className="">
        {posts.map((post) => (
          <div key={post.id } className="">
            <h1>{post.title}</h1>
            <img src={post.image} alt="image"  className="w-1/3 "/>
          </div>
        ))}
        </div>
    );
  }
 export async function Card() {
    const posts = await getPosts();

    return (
        <div className="">
        {posts.map((post) => (
          <div key={post.id } className="flex">
            <h1>{post.title}</h1>
            <img src={post.image} alt="image"  className="w-1/3 "/>
          </div>
        ))}
        </div>
    );
}

Answer 1

您这样做的方式实际上是当前使用 Next.js 时的首选方法。接下来将根据需要自动批处理和缓存获取请求（可以覆盖），这样您就不会为相同的数据对服务器进行不必要的调用。您应该在使用数据的地方获取数据，并且通常允许 Next 处理其余部分。

这是关于该主题的相关文档的相关摘录，同样适用于您的情况：

很高兴知道：对于布局，无法在父布局与其子组件之间传递数据。我们建议直接在需要数据的布局内获取数据，即使您在路由中多次请求相同的数据也是如此。在幕后，React 和 Next.js 将缓存和删除重复请求，以避免多次获取相同的数据。

Answer 2

是的 - 您可以使用 React 的

cache

功能来缓存昂贵的服务器端代码

文档页面的直接示例：

import {cache} from 'react';
import calculateUserMetrics from 'lib/user';

const getUserMetrics = cache(calculateUserMetrics);

function Profile({user}) {
  const metrics = getUserMetrics(user);
  // ...
}

function TeamReport({users}) {
  for (let user in users) {
    const metrics = getUserMetrics(user);
    // ...
  }
  // ...
}

在这种情况下，获取指标所需的工作仅计算一次。

重要提示：确保您知道

cache

函数会浅层比较参数的相等性，以确定是否存在缓存命中。坚持使用字符串等基元或确保传递相同的对象引用.