如何在 React 项目中进行服务器端渲染(SSR),它有什么优势
大白话如何在 React 项目中进行服务器端渲染(SSR),它有什么优势
什么是服务器端渲染(SSR)
在传统的 React 项目里,页面的渲染工作是在浏览器里完成的。也就是当你访问一个网页时,浏览器会先下载 HTML、CSS 和 JavaScript 文件,接着运行 JavaScript 代码来生成页面内容。而服务器端渲染(SSR)则是让服务器先把 React 组件渲染成 HTML 字符串,再把这个 HTML 字符串发送给浏览器。这样一来,浏览器就能直接显示已经渲染好的页面,不用再等待 JavaScript 代码运行了。
SSR 的优势
- 更快的初始加载速度:因为浏览器拿到的是已经渲染好的 HTML,所以能更快地显示页面内容,减少用户等待时间。
- 更好的 SEO:搜索引擎爬虫可以直接读取服务器返回的 HTML 内容,有利于网站在搜索引擎中的排名。
- 更好的用户体验:特别是在网络较慢的情况下,用户能更快地看到页面内容,提升体验。
如何在 React 项目中进行 SSR
下面我会一步步教你如何在 React 项目中实现 SSR。
1. 创建 React 项目
首先,你得创建一个新的 React 项目。可以使用 create-react-app
来创建:
npx create-react-app my-ssr-app
cd my-ssr-app
2. 安装必要的依赖
我们需要安装一些额外的依赖,像 express
用于创建服务器,react-dom/server
用于在服务器端渲染 React 组件。
npm install express react-dom
3. 修改项目结构
在项目根目录下创建一个 server.js
文件,这个文件将用于创建服务器和处理 SSR。
4. 编写 server.js
文件
下面是 server.js
文件的详细代码,每一行都有注释:
// 引入 express 模块,用于创建服务器
const express = require('express');
// 创建一个 express 应用实例
const app = express();
// 引入 React 库
const React = require('react');
// 引入 ReactDOMServer 用于在服务器端渲染 React 组件
const ReactDOMServer = require('react-dom/server');
// 引入 App 组件,这里假设你的主组件是 App
const App = require('./src/App').default;// 处理根路径的请求
app.get('/', (req, res) => {// 使用 ReactDOMServer.renderToString 方法将 App 组件渲染成 HTML 字符串const html = ReactDOMServer.renderToString(<App />);// 定义一个完整的 HTML 页面模板,将渲染好的 HTML 字符串插入到模板中const page = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My SSR App</title></head><body><!-- 插入渲染好的 HTML 字符串 --><div id="root">${html}</div><!-- 引入客户端的 JavaScript 文件 --><script src="/static/js/bundle.js"></script></body></html>`;// 将完整的 HTML 页面发送给客户端res.send(page);
});// 监听 3001 端口,启动服务器
const port = 3001;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});
5. 修改 src/index.js
文件
在 src/index.js
文件中,我们需要使用 hydrateRoot
方法来将服务器端渲染的 HTML 与客户端的 React 代码进行关联。
// 引入 React 库
import React from 'react';
// 引入 ReactDOM 用于在客户端渲染 React 组件
import ReactDOM from 'react-dom/client';
// 引入 App 组件
import App from './App';// 获取 id 为 root 的 DOM 元素
const rootElement = document.getElementById('root');
// 使用 hydrateRoot 方法将服务器端渲染的 HTML 与客户端的 React 代码进行关联
const root = ReactDOM.hydrateRoot(rootElement, <App />);
6. 运行项目
首先,启动服务器:
node server.js
然后,在浏览器中访问 http://localhost:3001
,你就可以看到已经使用 SSR 渲染的页面了。
总结
通过以上步骤,你就可以在 React 项目中实现服务器端渲染(SSR)了。SSR 能带来更快的初始加载速度、更好的 SEO 和用户体验。希望这个教程能帮助你理解和实现 SSR。
如何优化React项目的服务器端渲染性能?
在 React 项目里,优化服务器端渲染(SSR)性能可从多方面着手,下面是一些实用的优化方法和对应的代码示例。
1. 代码分割
代码分割能减少初始加载的 JavaScript 代码量,让页面更快加载。在 React 中,可使用 React.lazy
和 Suspense
来实现。
// 假设这是你的路由配置文件
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));const App = () => {return (<Router><Suspense fallback={<div>Loading...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Suspense></Router>);
};export default App;
上述代码借助 React.lazy
来懒加载组件,Suspense
则在组件加载期间显示加载提示。
2. 缓存机制
使用缓存可避免对相同内容的重复渲染,提升服务器性能。在 Node.js 服务器中,可使用 lru-cache
来实现简单的缓存。
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const LRU = require('lru-cache');
const App = require('./src/App').default;const app = express();
// 创建一个 LRU 缓存实例,最大缓存项数为 100
const cache = new LRU({ max: 100 });app.get('/', (req, res) => {const cacheKey = req.url;// 检查缓存中是否存在该 URL 的渲染结果if (cache.has(cacheKey)) {const cachedHtml = cache.get(cacheKey);return res.send(cachedHtml);}const html = ReactDOMServer.renderToString(<App />);// 将渲染结果存入缓存cache.set(cacheKey, html);res.send(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My SSR App</title></head><body><div id="root">${html}</div><script src="/static/js/bundle.js"></script></body></html>`);
});const port = 3001;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});
此代码利用 lru-cache
来缓存渲染结果,若缓存中存在请求的 URL 对应的渲染结果,就直接返回缓存内容。
3. 异步数据获取优化
在 SSR 中,异步数据获取是性能瓶颈之一。可使用 React Query
或 SWR
等库来优化数据获取。
import React from 'react';
import { useQuery } from 'react-query';// 模拟异步数据获取函数
const fetchData = async () => {const response = await fetch('https://api.example.com/data');return response.json();
};const MyComponent = () => {// 使用 useQuery 进行数据获取const { data, isLoading, error } = useQuery('myData', fetchData);if (isLoading) return <div>Loading...</div>;if (error) return <div>Error: {error.message}</div>;return (<div>{data.map(item => (<div key={item.id}>{item.name}</div>))}</div>);
};export default MyComponent;
上述代码使用 React Query
的 useQuery
钩子来进行数据获取,它会自动处理缓存、重试等操作。
4. 服务器优化
合理配置服务器资源也很关键,可使用 pm2
来管理 Node.js 进程,保证服务器的高可用性和性能。
# 全局安装 pm2
npm install -g pm2
# 使用 pm2 启动服务器
pm2 start server.js
5. 优化 CSS 加载
采用 CSS-in-JS 或 extract-text-webpack-plugin
等工具,将 CSS 提取到单独的文件中,避免内联 CSS 带来的性能问题。
// 在 webpack 配置中使用 MiniCssExtractPlugin 提取 CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {// 其他配置...module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash].css'})]
};
上述代码借助 MiniCssExtractPlugin
把 CSS 提取到单独的文件中。
通过以上这些方法,能显著优化 React 项目的服务器端渲染性能。
相关文章:
如何在 React 项目中进行服务器端渲染(SSR),它有什么优势
大白话如何在 React 项目中进行服务器端渲染(SSR),它有什么优势 什么是服务器端渲染(SSR) 在传统的 React 项目里,页面的渲染工作是在浏览器里完成的。也就是当你访问一个网页时,浏览器会先下…...
JVM 01
今天是2025/03/20 16:36 day 09 总路线请移步主页Java大纲相关文章 今天进行JVM前二个模块的归纳 首先是JVM的相关内容概括的思维导图 以下是针对思维导图中 内存管理 和 垃圾回收(GC) 模块的详细说明: 1. 内存管理(运行时数据…...
MATLAB 调用arduino uno
为了授课,必须重新把arduino用上。 采用MATLAB编码,可以简化相关程序授课部分 1 安装包 MATLAB Support Package for Arduino Hardware - File Exchange - MATLAB Central (mathworks.com) 需要这个插件。 当然也可下载simulink的模块,但…...
WPS宏开发手册——JSA语法
目录 系列文章2、JSA语法2.1、打印输出2.2、注释2.3、变量2.4、数据类型2.5、函数2.6、运算符2.7、比较2.8、if else条件语句2.9、for循环2.10、Math对象(数字常用方法)2.11、字符串常用方法2.12、数组常用方法 系列文章 使用、工程、模块介绍 JSA语…...
linux如何释放内存缓存
[rootredis ~]# sync #将内存缓存数据强制写入磁盘(保存数据后再做释放) [rootredis ~]# echo 1 > /proc/sys/vm/drop_caches #释放内存缓存...
2025年渗透测试面试题总结-某360-企业蓝军面试复盘 (题目+回答)
网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 360-企业蓝军 一、Shiro绕WAF实战方案 二、WebLogic遭遇WAF拦截后的渗透路径 三、JBoss/WebLogic反序…...
Atlas 800I A2 双机直连部署DeepSeek-R1-w8a8
一、环境信息 1.1、硬件信息 Atlas 800I A2 * 2 1.2、环境信息 操作系统:openEuler 22.03 LTS NPU驱动:Ascend-hdk-910b-npu-driver 24.1.0 linux-aarch64.run NPU固件:Ascend-hdk-910b-npu-firware 7.5.0.3.220.run MindIE镜像ÿ…...
OpenHarmony 入门——ArkUI 跨页面数据同步和页面级UI状态存储LocalStorage小结(二)
文章大纲 引言一、在代码逻辑使用LocalStorage二、从UI内部使用LocalStorage三、LocalStorageProp和LocalStorage单向同步四、LocalStorageLink和LocalStorage双向同步五、兄弟组件之间同步状态变量七、将LocalStorage实例从UIAbility共享到一个或多个视图 引言 前面一篇文章主…...
自我革命!优利德全面进入智能示波器时代
AI重构电子测试新范式 春节期间,DeepSeek(深度求索)火遍全网。作为国内首个全面对标GPT-4技术架构的AI大模型,DeepSeek凭借其自主研发的通用大语言模型体系,涵盖了从7B到超千亿参数的完整模型矩阵,在数学推…...
Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建
本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库,并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。 一、技术栈准备 Vue3:采用 Composition API 开发mxGraph:JavaScript 流程图库(版本 …...
Python-金融相关代码讲解
文章目录 概要整体架构流程1.代码部分2.逐个讲解1)# -*- coding: utf-8 -*-2)基本库引入3)函数模块4)主程序 小结1. 问题拆解思维2. 文件处理三件套3. 字典的妙用:4. 上下文管理器(with open...)…...
深度解读DeepSeek:开源周(Open Source Week)技术解读
深度解读DeepSeek:开源周(Open Source Week)技术解读 深度解读DeepSeek:源码解读 DeepSeek-V3 深度解读DeepSeek:技术原理 深度解读DeepSeek:发展历程 文章目录 一、开源内容概览Day1:FlashMLAD…...
【算法】十大排序算法(含时间复杂度、核心思想)
以下是 **十大经典排序算法** 的时间复杂度、空间复杂度及稳定性总结,适用于面试快速回顾:排序算法对比表 排序算法最佳时间复杂度平均时间复杂度最差时间复杂度空间复杂度稳定性核心思想冒泡排序O(n)O(n)O(n)O(1)稳定相邻元素交换,大数沉底…...
TCP传输---计算机网络
TCP结构 源端口和目标端口:标识通信的应用程序。序列号:标记发送的数据段的顺序序号。确认号 ( ACK):确认接收到的数据序号。标志位:控制连接状态,包括 SYN(同步)、ACK(确认…...
创建vue2项目
1、前往 Node.js 官网下载并安装 Node.js,安装完成后,npm 会随之安装。确认 Node.js 和 npm 是否成功安装,可以在命令行中运行以下命令检查版本: node -v npm -v 运行结果:(如下,表示node和n…...
从投机到可持续发展:ETHDenver 2025 的关键启示!
ETHDenver 2025 重点讨论了 Web3 向可持续发展转型,特别强调了人才培养、去中心化治理和激励机制的紧密结合。Polkadot 一直以来的长期观点也进一步支持了行业从投机转向长期、社区驱动增长的趋势。随着 ETHDenver 2025 会议的的落幕,Polkadot 生态中的贡…...
WPS宏开发手册——使用、工程、模块介绍
目录 系列文章前言1、开始1.1、宏编辑器使用步骤1.2、工程1.3、工程 系列文章 使用、工程、模块介绍 JSA语法 第三篇练习练习题,持续更新中… 前言 如果你是开发人员,那么wps宏开发对你来说手拿把切。反之还挺吃力,需要嘻嘻…...
操作系统为ubantu的服务器上部署nginx软件基础步骤总结
今天在这里,我们总结一下ubantu的服务器上部署nginx软件,请按照以下步骤进行安装: 1、更新包列表: 首先更新你系统中的可用软件包列表,以确保你可以安装最新版本。 sudo apt update2、 Ubuntu上更新已安装软件包&…...
批量给 PPT 文档添加或删除保护,批量设置打开密码和只读密码
为了保护保护档的安全,我们经常会给 PPT 文档添加打开密码或者只读密码保护。有些场景下,我们也可能会碰到需要删除 PPT 文档的打开密码或者只读密码的需求。今天就给大家介绍一种方法可以一次性批量给多个 PPT 文档添加打开密码或者只读密码保护&#x…...
Elasticsearch 中的数据分片问题
Elasticsearch 分片机制 Elasticsearch 在存储数据时采用 分片(Shard)机制,以提高性能和可扩展性。它索引中的数据被划分成多个 主分片(Primary Shard) 和 副本分片(Replica Shard),…...
如何在IPhone 16Pro上运行python文件?
在 iPhone 16 Pro 上运行 Python 文件需要借助第三方工具或远程服务,以下是具体实现方法和步骤: 一、本地运行方案(无需越狱) 使用 Python 编程类 App 以下应用可在 App Store 下载,支持直接在 iPhone 上编写并运行 …...
Xinference安装、使用详细笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Xinference安装、使用详细笔记 支持推理引擎安装Xinference启动Xinference关于模型的推理引擎运行 qwen2.5-instruct管理模型官方详细文档:具体使用:对…...
NAT 模式
使用LVS的 NAT 模式实现 3 台RS的轮询访问。IP地址和主机自己规划。 1.节点规划 主机角色系统网络IPclientclientredhat 9.5仅主机192.168.180.100/24lvslvsredhat 9.5仅主机 NAT192.168.180.200/24 VIP 192.168.72.8/24 DIPnginxrs1redhat 9.5NAT192.168.226.7/24nginxrs2r…...
【中间件】Rabbit离线部署操作
准备安装包: 1.rabbitmq-server-4.0.7-1.el8.noarch.rpm 2.erlang-26.2.5.4-1.el9.x86_64.rpm 3.socat-1.7.4.1-6.el9.x86_64.rpm 操作步骤: 1.上传将RabbitMQ文件夹上传至服务器的home中 2.先安装erlang服务,顺序执行以下命令 设置服务的S…...
thinkphp漏洞再现
Thinkphp5x远程命令执行及getshell 1、开环境 2、使用工具攻击 开启工具 输入地址,点击漏洞检测 存在漏洞之后,选择漏洞,执行命令 3、也可以执行远程命令 执行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…...
a-date-picker 格式化日期格式 YYYY-MM-DD HH:mm:ss
<template><a-range-pickerv-model:value"dateRange":show-time"{ format: HH:mm:ss, // 时间部分格式defaultValue: [moment(00:00:00, HH:mm:ss), moment(23:59:59, HH:mm:ss)] // 默认时间范围}"format"YYYY-MM-DD HH:mm:ss" // 整体…...
【前端】在<el-form>里循环插入list内容
这里的list为日志list【logList】 <el-row v-if"logList && logList.length > 0" style"display: flex; flex-direction: column; align-items: center;"><el-rowv-for"(log, index) in logList" :key"index" s…...
Spring Boot 一个接口实现任意表的 Excel 导入导出
Java的web开发需要excel的导入导出工具,所以需要一定的工具类实现,如果是使用easypoi、Hutool导入导出excel,会非常的损耗内存,因此可以尝试使用easyexcel解决大数据量的数据的导入导出,且可以通过Java8的函数式编程解…...
华为交换相关
端口模式 (1)access:只能属于单个VLAN,一般用于连接计算机端口 (2)trunk:端口允许多个VLAN通过,可以接收和发送多个VLAN报文,默认情况下只有管理VLAN不携带标签信息 &…...
「宇树科技」13家核心零部件供应商梳理!
2025年2月6日,摩根士丹利(Morgan Stanley)发布最新人形机器人研报:Humanoid 100: Mapping the Humanoid Robot Value Chain(人形机器人100:全球人形机器人产业链梳理)。 2025年2月20日…...
Kafka Snappy 压缩异常分析与解决方案
1. 问题描述 在使用 Kafka 进行消息发送时,遇到了以下异常: org.apache.kafka.common.KafkaException: java.lang.UnsatisfiedLinkError: /tmp/snappy-1.1.7-ee0a2284-1d05-4116-9ddc-a0d5d4b3f8cd-libsnappyjava.so: Error loading shared library ld…...
Agent系列——Manus调研
一、Manus核心技术解析(代码实现原理) 1. 多智能体协同架构 class PlanningAgent: # 任务规划代理def decompose_task(self, task):return ["unzip_files", "extract_info", "match_skills"]class ExecutionAgent: # …...
CS实现票据样式效果
效果图 代码 <template> <div class"outer"><div class"outer-container"></div></div> </template> <script langts> import { reactive, toRefs, onBeforeMount, onMounted } from vue import { useRouter, …...
Maven 简介及其核心概念
Maven 是 Apache 软件基金会组织维护的一款自动化构建工具,专注服务于 Java 平台的项目构建和 依赖管理。 官网: Introduction – Maven 下载地址: Download Apache Maven – Maven 1 Introduction Maven, a Yiddish word meaning accumulator of knowledge, began as an …...
阿里开源的免费数据集成工具——DataX
企业里真实的数据流转是什么样子的呢? 左侧描述了一个企业真实的样子,我们总是需要把数据从一个地方搬到另一个地方,最后就是搬来搬去搬成了一张张解不开的网。 右侧则表达了使用DataX为中心实现数据的同步。 什么是DataX DataX是一个异构…...
医学图像分割数据集肺分割数据labelme格式6299张2类别
数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图像分辨率:1024x1024 图片数量(jpg文件个数):6299 标注数量(json文件个数):6299 标注类别数:2 标注类别名称:["leftl…...
Spring IoC的设计与实现
IoC,Inversion of Control 控制反转,将原本由应用程序负责对象创建的工作,交给IOC容器来完成。容器通过依赖注入(DI,Dependency Injection)来实现。 作用:降低类对象之间的耦合度,减少代码量。…...
微信小程序开发:页面结构与样式设计
微信小程序页面结构与样式设计研究 摘要 微信小程序作为移动互联网的重要应用形式,其页面结构与样式设计对于用户体验和功能实现具有关键作用。本文深入探讨微信小程序的页面结构与样式设计,包括WXML语法与页面结构搭建、WXSS样式编写与页面美化提升以…...
Linux paste命令
目录 一. 简介二. 基本语法三. 小案例 一. 简介 paste 命令用于合并多个文件的行,按列方式输出,默认以制表符(Tab)分隔。 ⏹基本语法 paste [选项] 文件1 文件2 ...二. 基本语法 <()的方式模拟文件流paste命令将2个文件流粘…...
关于Object.assign
Object.assign 基本用法 Object.assign() 方法用于将所有可枚举属性的值从一个或者多个源对象source复制到目标对象。它将返回目标对象target const target { a: 1, b: 2 } const source { b: 4, c: 5 }const returnedTarget Object.assign(target, source)target // { a…...
新能源汽车充换站如何实现光储充一体化管理?
长三角某换电站光伏板晒到发烫,却因电网限电被迫切机;北京五环充电站每月多缴6万超容费;深圳物流车充电高峰排队3小时...当95%的充换站深陷“用不起绿电、扛不住扩容、算不清碳账”困局,安科瑞用一组真实数据撕开行业潜规则&#…...
Flink 流处理框架的核心特性
文章目录 事件时间支持Flink状态编程一、状态的类型1. 托管状态(Managed State)2. 原始状态(Raw State) 二、状态的管理和容错 Flink端到端的一致性1、检查点机制2、幂等3、事务 水位线窗口操作1、窗口类型2、窗口操作的时间语义 …...
蓝桥杯之AT24C02的页写页读
一、原理: 1、页写:一次性向AT24C02里的多个数据存储单元地址写入多个数据 (1)在AT24C02的页写模式下,每次写入数据后,存储单元地址会自动加1。 (2)一页有8个数据存储单元ÿ…...
计算机二级web易错点(7)-选择题
在 JavaScript 中,substr() 方法用于从字符串中提取子字符串。它接受两个参数,第一个参数表示开始提取的位置(索引从 0 开始),第二个参数表示要提取的字符数量。 在代码 var str"abcdefgh"; alert(str.subs…...
WordPress子主题插件 Child Theme Configurator
一、插件介绍 Child Theme Configurator 是一款强大的 WordPress 插件,专为创建和管理子主题(Child Theme)而设计。使用子主题可以安全地自定义 WordPress 站点,而不会影响原主题(Parent Theme),同时确保主题更新时不会丢失修改。 该插件适用于初学者和高级开发者,提…...
[网鼎杯 2020 白虎组]PicDown1 [反弹shell] [敏感文件路径] [文件描述符]
常见读取路径 /etc/passwd一些用户和权限还有一些乱七八糟的 /proc/self/cmdline包含用于开始当前进程的命令 /proc/self/cwd/app.py当前工作目录的app.py /proc/self/environ包含了可用进程的环境变量 /proc/pid/exe 包含了正在进程中运行的程序链接; /proc/pid…...
基于Spring Boot的乡村养老服务管理系统的设计与实现(LW+源码+讲解)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
ElasticSearch 可观测性最佳实践
ElasticSearch 概述 ElasticSearch 是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储、检索数据;本身扩展性很好,可以扩展到上百台服务器,处理 PB 级别(大数据时代)的数据。ES 也使用 Java 开…...
Java----正则表达式的学习
正则表达式可以检验字符串是否满足一定规则,并用来校验数据格式的合法性。 在一段文本当中查找满足需求的内容: import java.math.BigDecimal; import java.math.BigInteger; import java.util.Random;import static java.lang.Math.abs; import static…...
为何AI系统比以往任何时候都更需要红队测试
AI 系统已深度融入现代生活,但并非无懈可击。红队测试作为一项关键技术,正通过系统性地挖掘 AI 漏洞,显著提升其安全性与可靠性。随着人工智能技术的快速迭代,这种全面测试的需求愈发迫切,不仅能防范潜在危害ÿ…...