全面的React服务端渲染指南，从零开始！

前端

2023-12-05 04:32:51

现代Web开发高度依赖React等前端框架，这些框架提供了卓越的客户端渲染性能和可维护性。但是，它们也引入了服务端渲染（SSR）带来的挑战。

本指南将深入探讨SSR，从其基本概念到复杂实现，帮助您掌握从零开始构建React SSR应用程序所需的技能。

导言：服务端渲染简介

SSR是一种技术，可以在服务器端预先渲染页面，然后将渲染后的HTML发送给客户端。与仅在客户端渲染页面的传统单页应用程序（SPA）不同，SSR提供了以下优势：

更快的初始加载速度： 由于页面已经在服务器上预渲染，因此客户端加载时无需等待渲染过程。
更好的SEO： 搜索引擎更容易抓取和索引预渲染的页面，从而提高网站的可见性和排名。
可访问性： SSR使应用程序更易于访问，即使是禁用JavaScript的客户端也可以正常加载页面。

从零开始构建React SSR应用程序

1. 初始化项目

使用create-react-app创建新的React项目：

npx create-react-app my-ssr-app --template @nrwl/react

2. 安装SSR依赖项

安装以下依赖项：

npm install next react-dom/server

3. 创建页面组件

创建页面组件（例如Home.tsx）：

import { ServerStyleSheet } from 'styled-components';
import { renderToString } from 'react-dom/server';

export const Home = () => {
  const sheet = new ServerStyleSheet();
  const html = renderToString(sheet.collectStyles(<div>Hello, world!</div>));
  sheet.getStyleTags();
  return html;
};

4. 设置服务器端渲染

在next.config.js中配置服务器端渲染：

module.exports = {
  reactStrictMode: true,
  experimental: {
    outputStandalone: true,
  },
  pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
};

5. 创建服务器入口点

创建服务器入口点（server.js）：

const express = require('express');
const next = require('next');

const app = express();
const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });

const handle = nextApp.getRequestHandler();

nextApp.prepare().then(() => {
  app.get('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(3000, () => {
    console.log('SSR server listening on port 3000');
  });
});