返回

React Server Component 构建一个支持 Client Component 且结合 SSR 的 demo

前端

前言

React Server Component 是 React 官方在去年推出的新特性。它允许我们在服务端渲染 React 组件。这带来了诸多好处，例如更快的页面加载速度和更好的 SEO。

实现步骤

  1. 安装依赖
npm install --save react-dom/server react-ssr-prepass
  1. 创建 server.js 文件
const express = require('express');
const ReactDOMServer = require('react-dom/server');
const React = require('react');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    <div>
      <h1>Hello, world!</h1>
    </div>
  );

  res.send(html);
});

app.listen(3000);
  1. 创建 client.js 文件
const React = require('react');
const ReactDOM = require('react-dom');

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
  1. 在 index.html 文件中添加以下代码
<!DOCTYPE html>
<html>
  <head>
    
    <script src="client.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  1. 运行应用
npm start

访问 http://localhost:3000，你会看到一个简单的“Hello, world!”应用程序。

总结

通过本文，我们成功地构建了一个支持 Client Component 且结合 SSR 的 React Server Component demo。这个demo展示了如何使用 React Server Component 与 Client Component 相结合，以及如何利用 SSR 来提升用户体验。