react如何实现服务端渲染

乐悠刘
204 阅读2分钟

前端服务端渲染（Server-side Rendering，SSR）指的是在服务器端生成 HTML 的技术，可以提高应用程序的性能和 SEO（搜索引擎优化）。

以下是一些前端服务端渲染实现方案：

  1. Next.js： Next.js 是一种可用于 React 的 SSR 框架，其提供了完整的前后端渲染解决方案、自动预取和静态页面生成等特性。Next.js 可以轻松地为您的 React 应用程序启用服务器端渲染并进行全面的自定义。
  2. Nuxt.js：Nuxt.js 是基于 Vue.js 的服务端渲染框架，它是一个基于配置的解决方案，可以帮助您快速构建 SSR 应用程序。它提供了内置的 SEO、自动记录和分析等功能，并提供了许多插件和服务器端中间件，以支持开箱即用的应用程序开发。
  3. Angular Universal：Angular Universal 是用于 Angular 的服务器端渲染框架。它通过使用 Node.js 和 Express，将应用程序转换为 HTML，提供更快的加载速度、更优秀的 SEO 和更好的用户体验。
  4. Gatsby： Gatsby 是一个静态站点生成器，它使用 React 作为比较常见的 React SSR 方案。通过 Gatsby，您可以在编译时渲染 HTML，并在客户端开始渲染应用程序。

要在 React 中实现服务端渲染，可以使用类似于 Next.js 的框架，或者使用自己编写的 SSR 代码。下面是一个使用自己编写的代码实现 React SSR 的示例：

  1. 安装相关依赖：
npm install react react-dom express babel-core babel-preset-env babel-preset-react
  1. 创建一个 express 应用程序，并在其中添加路由：
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App').default;

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(React.createElement(App));
  res.send(`
    <html>
      <head>
        <title>React SSR Demo</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/main.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log(`Server is listening on port 3000`);
});
  1. 创建一个组件（例如 App.js）：
import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello, React SSR World!</h1>
    </div>
  );
}
  1. 创建一个 webpack 配置文件并配置 babel：
const path = require('path');

module.exports = {
  entry: './client.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};
  1. 创建一个客户端入口文件（例如client.js）：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('app'));
  1. 编译代码并启动服务器：
npm run build
node server.js

在浏览器中访问 http://localhost:3000 ，将会看到 React 组件在服务器端渲染的 HTML 中被渲染出来，然后客户端 JS 代码会重新挂载它，成为一个交互式 React 应用程序。

avatar
文章
阅读
粉丝