next.js 我怎样才能避免用无头CMS钻道具呢？我认为上下文API会伤害SEO

kpbpu008 于 2022-11-05 发布在 SEO

关注(0)|答案(2)|浏览(229)

我想在我的NextJs应用中使用一个无头CMO（例如Sanity.io）。内容对SEO来说特别重要。如果我看对了，我只能通过getStaticProps服务器端接收页面级的数据，以预先呈现它（对SEO来说很重要）。
如果我现在想把数据从页面组件发送到一个嵌套很深的子组件，通过属性钻取会很麻烦，我首先想到的是使用React的Context API（参见代码）。
然而，我怀疑在构建过程中，Context API的状态并没有接管这些值（例如SEO文本），所以预呈现的页面并没有无头CMO的SEO内容。

是否有方法通过getStaticProps将无头CMO的值发送到深度嵌套的子对象，而不需要进行属性钻取？或者上下文API在SEO /预渲染方面是否适合？

第一个

next.js

来源：https://stackoverflow.com/questions/74088275/how-can-i-avoid-prop-drilling-with-a-headless-cms-the-context-api-i-think-hurts

2条答案

按热度按时间

bvn4nwqk1#

Next.js的未来版本将使这一点变得更加容易，但同时您可以尝试使用SWR或React Query来获取数据以进行预呈现，然后在嵌套组件内进行查询。

赞(0）回复(0）举报 2022-11-05

fumotvh32#

有几种方法可以实现这一点。首先想到的是使用像React Context API这样的东西。然而，你也可以使用像Redux这样的东西。
以下是使用上下文API的示例：

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  const [seotext, setSeotext] = useState("SEO Text");

  const test = {seotext, setSeotext}
  console.log("I am Running AppContext: " + test);

  return (
    <AppContext.Provider value={{
      content: test,
    }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

赞(0）回复(0）举报 2022-11-05

我来回答

next.js 我怎样才能避免用无头CMS钻道具呢？我认为上下文API会伤害SEO

2条答案

相关问题

热门标签

最新问答