Javascript React-ssr（下一步）-getInitialProps将React节点插入到props渲染中

在下一个（react-ssr）中，我尝试呈现这样的页面使用

//这个公共元素，在我的私有节点\u模块中，很多项目都使用它
常量头=（{result}）=>{result}；
const renderComponent=async（）=>{
//嘲弄某人的请求
const result=等待承诺。解决（10）；
返回；
};
静态getInitialProps=async ctx=>{
返回{
元素：Wait renderComponent（）
}
}
呈现（{Element}）{
console.log（元素）
返回元素
}

• 在服务器端，需要正确的渲染和控制台

{“$$typeof”：符号（react.element），
类型：[函数：标头]，
key:null，
ref:null，
道具：{result:10}，
_所有者：空，
_存储：{}

• 在webside dom中，一次呈现正确，但很快就会将错误抛出到空页面，控制台是

{key:null，ref:null，props:{…}，{u owner:null，{u store:{…}
键：空
ref:null
道具：{结果：10}
_所有者：空
_存储：{}
__原型：对象

---

因此，如何正确呈现公共元素。

正确的方法如HMR所述，并在getInitialProps中获取数据，这将呈现组件两次，您需要自己处理空/空状态

static getInitialProps = async ctx => {
  const result = await Promise.resolve(10);
  return {
    result
  }
}

render() {

  // Handle empty state;
  if(!result) return null; // Or <EmptyPage />

  return (
     <Header result={result} />
  )
}

static getInitialProps=async ctx=>{
const result=等待承诺。解决（10）；
返回{
结果
}
}
render（）{
//处理空状态；
如果（！result）返回null；//或
返回(
)
}

我注意到

getInitialProps

返回的内容将在第一次加载时在客户端序列化（JSON.stringify），因此如果它返回

{Component:（）=>}

，那么它就没有

组件了。它还将中断
{result:}
。您可以在页面的呈现功能中返回
结果
并执行
。是的，正如您所说，服务器内存无法共享到web内存。下一步将呈现两次。它将在web端呈现为空页面。