NextJS 组件服务器端呈现，使用来自调用者组件的参数注入

Question

我正在构建一个带有店面的应用程序，它使用 nextJS。我可以在加载新页面时使用 getServerSide 道具。

该页面包含许多组件，每个组件都需要自己的数据。目前，我正在将所有这些放入一个结果数组中，然后从 getServerSideProps 返回，如下所示。

export async function getServerSideProps({query}) {
  let sid = query.shop

  let promises = []
  promises.push(getShopCategories(sid))
  promises.push(getShopInfo(sid))
  promises.push(offersFromShop(sid))

  try {

  let allPromises = Promise.all(promises)
  let results = await allPromises;

  //console.log("Shop Info:", results[1])
  return {props: {
      id: sid,
      shopCategories: results[0],
      shopInfo:  results[1],
      offers4u: results[2].products
  }}
  } catch(e) {
    console.error("Failure:", e)
    return { props: {}}
  }
}

但是这样一来，我就得一次把所有组件需要的数据都搞定。我在想，如何让页面中的每个子组件都有自己的'getServerSideProps'。我可以在每个组件中实现它，但我不确定是否传递所需的参数（例如 shopId、productId 等，我会在主页中获取这些参数）。

一种方法是使用 cookie，以便服务器端可以获取这些值。有更好的解决方案吗？

Answer 1

getServerSideProps 仅适用于 page folder

下的直接组件

如果您想在页面中的子组件上获取更多数据，请考虑使用 useEffect 挂钩或 componentDidMount 来完成这项工作。

NextJS 组件服务器端呈现，使用来自调用者组件的参数注入

NextJS component server side rendering with params injection from a caller component

javascript

storefront

reactjs

react-redux-form

next.js