22、React 服务器端渲染与相关工具

React 服务器端渲染与相关工具

在构建 JavaScript 应用程序时，我们有多种渲染方式可供选择。客户端渲染（CSR）虽然是常用的方式，但也存在一些性能上的问题。而服务器端渲染（SSR）则能在一定程度上解决这些问题，提升用户体验。本文将介绍如何实现服务器端渲染，以及 Next.js 和 Gatsby 这两个强大工具的使用。

1. 服务器端渲染基础

可以使用 ReactDOM.renderToString 方法在服务器上渲染 UI。服务器拥有强大的资源和安全性，能访问浏览器无法访问的资源和安全数据。我们以一个食谱应用为例，展示如何进行服务器端渲染。

首先，创建一个 index.js 文件，代码如下：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Menu } from "./Menu"; 

const data = [ 
  { 
    name: "Baked Salmon", 
    ingredients: [ 
      { 
        name: "Salmon", 
        amount: 1, 
        measurement: "lb" 
      }, 
      { 
        name: "Pine Nuts", 
        amount: 1, 
        measurement: "cup" 
      },