16、React服务器端渲染与UI框架组件全解析

React服务器端渲染与UI框架组件全解析

1. React服务器端渲染基础

在Node.js服务器上渲染React组件时，数据转换代码会同时被客户端和服务器使用。因为在初始加载时，服务器需要与API通信，之后浏览器中的组件也需要与API通信。而且，不仅要考虑转换服务返回的数据，还要考虑为其提供输入，比如创建或修改资源时。

作为React开发者，需要做出的基本调整是假设实现的任何组件都可能需要在服务器上渲染。这看似是个小调整，但细节很关键。

React将服务器视为渲染内容的目标，就像浏览器一样。服务器发送已渲染的内容可以大大提高应用程序初始页面加载的性能。浏览器获取初始内容后，可以使用服务器上用于初始渲染的相同组件。

2. 渲染为字符串

在Node.js中渲染组件意味着将其渲染为字符串，而不是尝试将其插入DOM。字符串内容随后返回给浏览器，浏览器立即将其显示给用户。

以下是一个示例：

// 要渲染的组件
import React from "react";
import PropTypes from "prop-types";
export default function App({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

App.propTypes = {
  items: