为什么我不'；当我在next.js中使用getStaticProps时，我看不到html中的div（在浏览器中查看页面源代码）

我尝试基于Next.js+React+Apollo制作测试SSR应用程序。 但我无法理解SSR是如何工作的

我阅读了文档，发现要在第一次SSR渲染时获得一些重要数据，我们需要使用

getStaticProps

，函数调用的结果将传递给我尝试渲染的组件的props

取决于这些道具，我可以渲染我想要的任何东西，例如，我有下一个代码：

import React from "react";
import {GetServerSideProps, GetStaticProps} from "next";

const Home = (props) => {
  return (
    <div>{props.ValFromGetStaticProps}</div>
  )
};

export const getStaticProps: GetStaticProps = async (context) => {
  return { props: {ValFromGetStaticProps: 'ValFromGetStaticProps!'} }
};

export default Home;

从“React”导入React；
从“下一步”导入{GetServerSideProps，GetStaticProps}；
const Home=（道具）=>{
返回(
{props.ValFromGetStaticProps}
)
};
导出常量getStaticProps:getStaticProps=async（上下文）=>{
返回{props:{ValFromGetStaticProps:'ValFromGetStaticProps！'}
};
导出默认主页；

我希望在服务器端看到呈现的代码，如果我打开HTML源代码，我应该会看到这个div。但我看到的只是一些道具对象。。。而且没有div((

---

备注：在DOM中存在此div，但出于SEO目的，此div应存在于页面源中。

Ohh…我没有看到它，因为我在父组件的早期阻止了第一次呈现：

_app.tsx

这就是为什么第一次渲染没有正确渲染的原因

export default function ({ Component, pageProps }) {
   <BackendDataProvider>
      <Component {...pageProps}>
   </BackendDataProvider>
}

const {data, error, loading} = useQuery(BACKEND_QUERY)

if (error || loading) {
   return null;
}