Next.js 服务器渲染组件窗口对象

Posted 2023-03-06

【中文标题】Next.js 服务器渲染组件窗口对象

【英文标题】：Next.js server rendered component window object

【发布时间】：2018-03-23 19:41:37

【问题描述】：

我有一个组件通过 js google api 库处理 google 登录。

export default class Index extends React.Component 
  componentDidMount() 
    window.onGoogleLoginSuccess = this.onGoogleLoginSuccess.bind(this)
  

  render() 
    return (
      <div
          className="g-signin2"
          data-onsuccess="onGoogleLoginSuccess"
          data-theme="dark"
      />
  
 

由于我使用 express 作为我的服务器，因此组件正在服务器中呈现。

我放了一些日志，发现服务器中正在调用渲染方法，并且从未调用过componentDidMount。

当 next.js 在服务器中渲染组件时，是否有任何回调可以放置一些将在客户端执行的代码？我可以在哪里访问窗口对象。

【问题讨论】：

从未调用过 (componentDidMount)？根据 next.js 文档“此生命周期方法将仅在客户端上执行。”。您是否检查过组件是否实际安装在客户端？

@PieroDivasto 它永远不会被调用。由于在服务器端调用了 render 方法，我认为该组件正在安装在服务器端。我的问题是，当组件安装在服务器端时，是否有任何回调方法可以放置在客户端执行的代码。

【参考方案1】：

onComponentDidMount 是访问window 的正确位置，因为组件仅安装在客户端（但渲染发生在客户端和服务器上）。

也许这不是完整的组件，但在您的示例中似乎不存在 this.onGoogleLoginSuccess 的任何内容，因为 this 将引用该上下文中的反应实例。

【讨论】：

我没有提供实现，因为示例不需要，但我已经实现了方法。我的代码正在运行，但我添加了一个快速服务器以在路由中进行一些验证，现在不再调用 onComponentDidMount。

我发现问题是由我的js文件中的错误引起的，由于Chrome无法解析文件，它停止执行并且从未执行过onComponentDidMount。我会接受你的回答，因为正是因为她，我才确定问题不在 next.js 流程中。感谢您的帮助。