如何在组件中使用getServerSideProps并传递Sanity数据

问题描述 #

• 已掌握pages目录下页面组件使用getServerSideProps的开发方式
• 需求为在非页面级的普通组件中使用服务端渲染获取的数据，暂不清楚如何将从Sanity拉取的内容传入普通组件
• 问题已自行排查解决，根因为开发过程中遗漏了父页面向子组件的props传参步骤

解决方案 #

getServerSideProps本身仅支持在pages目录下的路由页面文件中定义执行，普通组件内部编写的getServerSideProps不会被Next.js框架识别运行，正确的数据流转方式如下：

• 所有服务端数据拉取逻辑（包括Sanity内容查询）统一在对应页面的getServerSideProps方法中完成，写法和页面内直接使用的逻辑完全一致
• 页面组件接收到框架注入的props数据后，按照普通组件的入参要求，将需要的Sanity数据通过组件属性显式传入即可，和常规父子组件传参逻辑没有区别

最简实现代码参考：

// pages/article/[slug].js 路由页面文件
import { sanityClient } from '../../utils/sanity'
import ArticleContent from '../../components/ArticleContent'

export default function ArticlePage({ articleDetail }) {
  // 关键步骤：将页面层拿到的Sanity数据作为props传给普通子组件，漏写这步就会导致组件拿不到数据
  return (
    <main className="article-container">
      <ArticleContent detail={articleDetail} />
    </main>
  )
}

export async function getServerSideProps(context) {
  // 服务端数据拉取逻辑全部在页面层处理
  const { slug } = context.params
  const articleDetail = await sanityClient.fetch(
    `*[_type == "article" && slug.current == $slug][0]`,
    { slug }
  )
  return {
    props: {
      articleDetail
    }
  }
}

排查提示：如果遇到组件拿不到数据的情况，先在页面组件层打印getServerSideProps返回的props，确认Sanity数据拉取正常后，顺着组件层级逐层检查传参是否遗漏即可。

内容的提问来源于stack exchange，提问作者Julia Schafer