Question

我想在用户单击后从CDN或终结点加载静态HTML，并使其具有“反应性”或交互性。

让我们说我有一个从路由中获取一些静态HTML的组件

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      html: '',
    }
  }

  createMarkup(html) {
    return { __html: html }
  }

  loadPartial = async () => {
    const route = '/html'
    const res = await fetch(route)
    console.log('res', res)
    const html = await res.text()
    this.setState({ html })
  }

  render() {
    return (
      <div>
        <button onClick={this.loadPartial}>
          Load Partial
        </button>
        <div
          id="partial-root-html"
          dangerouslySetInnerHTML={this.createMarkup(this.state.html)} >
        </div>
      </div>
    );
  }
}

在这种情况下，HTML端点是调用renderToString()

的快速路由

app.use('/html', async (req, res) => {

  const app = <ConnectedPartial />
  const appString = ReactDOM.renderToString(app);

  res.set('Content-Type', 'text/html').end(appString);
});

相对于仅使用静态HTML，我希望在单击后进行水化的交互式标记，以便我可以发送新的道具并响应数据更新。

根据react文档

React希望服务器和客户端之间呈现的内容相同。

这与我要执行的操作有所不同，因为我是通过click事件在客户端上进行渲染的。 FWIW，我知道我可以仅通过单击来渲染组件，而无需执行fetch / angeredSetInnerHTML，但这不是本实验的目的。

假设所有这些操作都发生在同一react-root中，那么我该如何合并从客户端上的远程资源获取的静态html？

我的最终目标是将数据获取/ react html渲染卸载到分布式缓存/ cdn，但是我在react eco系统中没有找到很多文献记载的策略

水合客户端加载的HTML部分

0 个答案: