React Server Render 项目教程

最新推荐文章于 2024-10-11 07:33:29 发布

廉霓津Max

最新推荐文章于 2024-10-11 07:33:29 发布

阅读量485

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00943/article/details/142050375

版权

React Server Render 项目教程

react-server-renderReact Server side rendering demo项目地址:https://gitcode.com/gh_mirrors/re/react-server-render

项目介绍

React Server Render 是一个用于在服务器端渲染 React 组件的开源项目。它允许开发者将 React 组件在服务器端渲染为 HTML 字符串，然后将这些字符串发送到客户端，从而提高应用的首次加载性能和 SEO 友好性。

项目快速启动

安装依赖

首先，克隆项目到本地：

git clone https://github.com/revathskumar/react-server-render.git
cd react-server-render

然后，安装项目依赖：

npm install

启动项目

在项目根目录下运行以下命令启动服务器：

npm start

启动后，访问 http://localhost:3000 即可看到服务器端渲染的 React 组件。

示例代码

以下是一个简单的 React 组件示例，展示了如何在服务器端渲染该组件：

// src/components/HelloWorld.js
import React from 'react';

const HelloWorld = () => {
  return <div>Hello, World!</div>;
};

export default HelloWorld;

在服务器端渲染该组件的代码如下：

// src/server.js
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import HelloWorld from './components/HelloWorld';

const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<HelloWorld />);
  res.send(`
    <html>
      <head><title>React Server Render</title></head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});