服务器端渲染功能如何利用 DB 调用？答案

【问题标题】：How can server side rendering functions utilize DB calls?服务器端渲染功能如何利用 DB 调用？
【发布时间】：2021-01-30 00:33:59
【问题描述】：

由于他们需要在构建时之后获取的数据，我该如何延迟上述函数的执行，直到收到数据？

export async function getStaticPaths() {
  // get the paths we want to pre render based on products
 
  const paths = products.map((product) => ({
    params: { slug: 
      product.slug }
  }));
console.log(paths,"Paths in getStaticPaths()")
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // get product data based on slug

  const product = products.filter((single) => single.slug === params.slug)[0];
  console.log(product,"In getStaticProps()")
  return { props: { product } };
}

在上面，products 包含所有导入的原始数据。

我需要将这个数据导入替换为一个返回数据的函数的导入，但由于调用尚未完成，我最终得到了 null。

【问题讨论】：

请用不适合您的示例详细说明您的问题！
当前本地存储的数据有助于生成所需的路径。现在从外部数据库调用数据，该数据库仅在几秒钟后才可用，当 getStaticProps() 和 .....Paths () 使用空数据点，因为它尚未填充数据库数据。
不会有这样的工作吗？ ``` // db.js 导出 const db = createDb(config); // main.js import { db } from './src/db/';导出异步函数 getStaticPaths() { const paths = await db.readDocument('PATH'); return { paths, fallback: true or false // 参见下面的“fallback”部分 }; } ```
请添加代码示例
导入一个保存应该保存数据的变量和导入一个具有调用时返回数据的函数的类之间有什么区别？顺便说一句，数据库调用是异步的，它将数据库值存储在一个单例中，然后我试图访问它。但是由于上面的 getStaticPaths() 是在任何我得到 null insitead 数据之前执行的。不会发生同样的事情，还是等待（如您上面的代码）阻止这种情况？

标签： reactjs react-native next.js

【解决方案1】：

您可以使用两个useEffect 钩子，在第一个启动数据时，将其设置为状态data，在第二个useEffect 中，您可以执行以下操作：

useEffect(()=>
 if(data){
   // setLoader(false)
}else{
 // setLoader(true)
},[data])

并在返回时进行条件渲染：

if (loading){
 return(<ActivityIndicator/>)
}else{
 return // your component
}

【讨论】：

这是调用数据库api时的解决方案。 getStaticProps 和 getStaticPaths 在执行前如何知道何时接收到数据？由于它们与 react-components 无关，因此钩子或任何此类过程都无法工作。
redux 可以用来连接组件到普通的js文件。
“导出异步函数”会不会无法从连接语句中读取数据？
你可以不用connect函数直接读取存储状态，你使用const unsubscribe = store.subscribe(() => true); const yourState = store.getState().yourState; unsubscribe();
Redux 存储在构建期间不会不可用，而 getStaticPaths () 和 getStaticProps () 是 Next。 Js 方法，在构建期间执行？