Question

我正在尝试构建一个React组件库，该库可以从使用它的应用程序中独立部署。我这样做是通过在网络上加载组件，然后在Next.js应用程序中呈现它们。我知道我可以使用react-umd-loader来实现这一点，但这仅适用于客户端，因为它依赖于scriptjs。我可以使用vm npm软件包使它正常工作。这就是Next.js中的my page的样子。

const Index = (props) => {
  let sandbox = {'React': React, 'ReactDOM': ReactDOM, 'MyComponent': null, 'self': {}};
  vm.runInNewContext(props.MyComponent, sandbox);
  const MyComponent = sandbox.MyComponent.default;
  return (<div><p>Hello from Next.js</p><MyComponent /></div>)
}

Index.getInitialProps = async function() {
  const res = await fetch('http://localhost:3001/MyComponent.bundle.js')
  const script = await res.text()
  return { MyComponent: script }
}

MyComponent是使用以下webpack.config.js

构建的react组件

entry: {
    MyComponent: "./src/components/MyComponent",
},
output: {
    path: path.resolve(__dirname, 'build/static/js'),
    filename: "[name].bundle.js",
    libraryTarget: "umd",
    library: "[name]",
    umdNamedDefine: true,
    globalObject: 'this'
},

这实际上可以正常工作，但是，我希望the component提取数据然后显示该数据，这是行不通的。

class MyComponent extends Component {
  constructor() {
      super();
      this.state = {data: {msg: 'data not loaded'}};
  }
  componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => this.setState({data: json}))
      .catch(err => console.log(err));
  }
  render() {
      return (
      <div style={{border: '1px solid black'}}>
          <h1>My Component</h1>
          This data was fetched from an API:
          <pre>
              {JSON.stringify(this.state.data)}
          </pre>
      </div>
      );
  }
}

我认为这不起作用的原因是因为获取是异步的，并且在获取完成之前呈现了页面并将其返回给客户端。我尝试使用fetch-suspense，但这没有用。我在服务器控制台上看到Promise { <pending> }，所以也许获取承诺还没有完成？

是否可以让服务器等待响应，直到从API提取完成？

我的完整仓库位于https://github.com/bernardwolff/ReactRemoteComponentSsr

谢谢！

在服务器端Next.js上渲染远程组件

0 个答案: