Визуализация удаленного компонента на стороне сервера Next.js - PullRequest
Новая
       12

Визуализация удаленного компонента на стороне сервера Next.js

1 голос
/ 14 марта 2019

Я пытаюсь создать библиотеку компонентов React, которая может быть развернута независимо от приложений, которые ее используют. Я делаю это, загружая компоненты по сети, а затем рендеринг их в приложении Next.js. Я знаю, что могу добиться этого, используя response-umd-loader , но это работает только на стороне клиента, потому что оно опирается на scriptjs. Я смог заставить это работать с помощью пакета VM PMP. Так выглядит моя страница в Next.js. 

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 

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'
},

Это на самом деле работает нормально, но я хочу, чтобы компонент извлек данные и затем отобразил эти данные, которые не работают. 

<code>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)}
); } }

Я думаю, что причина этого не в том, что выборка асинхронна, а страница отображается и возвращается клиенту до завершения выборки. Я попытался использовать fetch-susse , но это не сработало. Я вижу Promise { <pending> } на консоли сервера, так что, может быть, обещание получения не выполняется?

Можно ли заставить сервер ждать ответа до завершения выборки из API?

Мое полное репо на https://github.com/bernardwolff/ReactRemoteComponentSsr

Спасибо!

...