Question

我有一个非常有趣的问题。我有一个CSR React应用程序。当应用程序在浏览器中执行时，它会对支持的REST API进行api调用。此API返回SSR React组件。这种架构存在的原因有很多。渲染我们的SSR React组件非常昂贵（因此我们将其缓存）并且需要将此SSR React组件作为简单的HTML页面提供。现在，当应用程序请求SSR React组件的REST API时，我需要将其合并到我们的CSR应用程序中。我为此创建了一个工作POC。我想知道是否有人之前处理过这个用例，如果我的解决方案不是完全疯狂的话，我还需要一些验证。可在此链接上找到所提供代码的操场：https://codesandbox.io/s/m410ovlyxj

说明：

SSR ：服务器端渲染
CSR ：客户端渲染

POC ：

import React from "react";
import { render, hydrate } from "react-dom";
import { renderToString } from "react-dom/server";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const Test = () => <div>test</div>;

class TestSSR extends React.Component {
  componentDidMount() {
    hydrate(<Test />, this.el);
  }

  render() {
    return (
      <div
        ref={(el) => {
          this.el = el;
        }}
        dangerouslySetInnerHTML={{ __html: this.props.ssr }}
      />
    );
  }
}

const TestSSRString = renderToString(<Test />);

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
    <TestSSR ssr={TestSSRString} />
  </div>
);

render(<App />, document.getElementById("root"));

将SSR React组件注入CSR React应用程序

0 个答案: