使用 Next JS 静态生成单个组件

Question

我正在开发一个使用 Nextjs 和 React 的网站。我们混合使用静态生成和 SSR。我们正在使用的组件之一由网站上的每个页面共享。它是一个标题。问题是他的标题需要一些非常大的查询才能获得正确呈现所需的所有信息。理想情况下，我们希望“静态渲染”这个组件，以便在构建时所有页面都可以使用它，即使对于非静态渲染的页面也是如此。就目前而言，每次用户访问我们的网站时都呈现此标头会显着增加加载时间，并给我们的数据库带来不必要的负载。

有没有什么方法可以“静态渲染”每个页面共享的单个组件？标头的部分代码类似于

const { loading, error, data } = useQuery(QUERY);
const { loading: productLoading, data: productData } = useQuery(QUERY_PRODUCT);
const { data: otherData } = useQuery(OTHER_DATA);
const { data: otherOtherData } = useQuery(OTHER_OTHER_DATA);

理想情况下，我们不希望每次用户访问网站时都运行这些查询。

Answer 1

如果您要为每个页面使用相同的数据，您可以考虑使用 redux-store 或将它们存储在上下文提供程序中。

您可以使用类似于https://stackoverflow.com/a/64924281/2822041 的代码示例，在其中创建可在所有页面中访问的上下文和提供程序。

理想情况下，另一种方法是使用 Redis “缓存”，这样您就不需要一遍又一遍地查询数据。