React 中的服务器渲染组件

在前后分离架构以前,所有的 Html 业务都是后端渲染,返回前前端显示,后端渲染把前后端逻辑耦合在一起,增大系统的复杂度,不易于扩展。React 中的 Server组件,准确的说是服务器进行渲染,无论是什么框架,最后都是生成Dom Tree 进行页面展示,React 渲染中的 Commit 阶段就是进行 Dom Tree 的更新。那么我们为什么需要服务器渲染,服务渲染主要是 SEO 友好,每个页面都可以进行 SEO 优化,React 服务端渲染,我们可以利用 React 强大组件能力进行页面的开发,从而减少了于服务代码的耦合,本文将讲述在原生 React 下实现服务器渲染。

安装依赖

初始化客户端项目并安装 Express 服务端依赖。

yarn install express

代码实现

React 中服务器的渲染不只是服务器处理,客户端也需要处理,服务器生成 Html,客户端进行浏览器中的后续处理。那么为什么服务器不能全部处理?原因不难理解,由于 React 的处理方式和原生的 JS 是有很大区别,React 了很多封装,服务器只需生成 Html,客户端进行事件绑定,如果服务出现任何异常客户端会再次渲染做兜底处理。
在这里插入图片描述

服务器代码

创建 server 目录,并在目录中创建文件

  • index.js
// server/index.js
require("ignore-styles");require("@babel/register")({ignore: [/(node_modules)/],presets: ["@babel/preset-env", "@babel/preset-react"],
});require("./server");
  • render.js
// server/render.js
import React from "react";
import { renderToPipeableStream } from "react-dom/server";
import { ServerApp } from "../src/ServerApp.js";
import manifest from "../build/asset-manifest.json"
export const render = (response) => {const stream = renderToPipeableStream(<ServerApp />, {bootstrapScripts: [manifest.files['main.js']],onShellReady() {response.setHeader("content-type", "text/html");stream.pipe(response);},onError(error) {console.error(error);}});
};
  • server.js
//server/server.js 
const express = require("express");
const app = express();
const { render } = require("./render");
const path = require('path');app.use('/static', express.static(path.resolve(__dirname, '..', 'build/static'),{ maxAge: '30d' },
));app.get("/", (req, res) => {render(res);
});app.listen(3005, () => {console.log("listening on port 3005 " + path.resolve(__dirname, '..', 'build'));
});

组件

创建一个简单的组件,服务器端渲染不要做特别处理

import React from "react";
export function ServerApp(){const handler = ()=>{ console.log("sdfasdf")}return (<html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>My app</title></head><body><h1>test</h1><div><button onClick={handler}>OK</button></div></body></html>    )
}

客户端

需要将客户端入口进行修改:

import {hydrateRoot} from 'react-dom/client';
import {ServerApp} from './ServerApp';hydrateRoot(document, <ServerApp/>);

编译并运行

编译运行

npm run build
node server/index.js

在这里插入图片描述

总结

React 服务器渲染功能强大,将客户端服务的进行整合,通过 hydrateRoot 进行关联,把展示和事件处理进行了分离,在架构设计上给系统带来更灵活的处理方式,完全可以替代模板引擎。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31259.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Tello无人机】使用Matlab完成控制器的设计—建模

模型辨识篇 在实际的无人机系统中&#xff0c;控制器的设计至关重要&#xff0c;它直接影响无人机的稳定性和响应能力。然而&#xff0c;要设计出高效、可靠的控制器&#xff0c;首先必须准确理解无人机的动态行为&#xff0c;这就需要通过收集输入输出数据来辨识其运动学模型。…

Java面试八股之Mybatis和JPA的区别

Mybatis和JPA的区别 Mybatis 和 JPA&#xff08;Java Persistence API&#xff09;是两种在 Java 应用程序中用于数据持久化的框架&#xff0c;它们各有特点和适用场景。下面是它们之间的一些主要区别&#xff1a; 映射方式&#xff1a; Mybatis 是半自动的 ORM 框架&#xf…

MACER

MACER: A Modular Framework for Accelerated Compilation Error Repair 基本信息 博客贡献人 页禾七 作者 Darshak Chhatbar&#xff0c; Umair Z. Ahmed&#xff0c;Purushottam Kar 摘要 自动编译错误修复&#xff0c;即对无法编译的错误程序提出修复建议的问题&…

Android集成mapbox教程

目录 简介准备工作创建Token系统开发简介 Mapbox是来自美国的一家为开发者提供地图服务和开发工具的开放平台。Mapbox以开源的形式构建了矢量瓦片技术生态,开发了矢量切片工具、瓦片服务传输框架。Mapbox的底图平台非常受欢迎,特别是开发者和学生群体,可以使用免费的开源软…

吊打Unity的角色动画重定向专业版工具FPS手臂武器动画动物动画角色动作微调烘焙20240620

今天发现一款关注已久的Unity插件上架商店了&#xff0c;可以将动画从一个通用/人形角色重新定位到另一个通用角色。 吊打Unity的角色动画重定向专业版工具FPS手臂武器动画动物动画角色动作微调烘焙202406201103 Unity 中任何通用角色的终极解决方案。它没有 Humanoid 系统的限…

C++的智能指针 RAII

目录 产生原因 RAII思想 C11的智能指针 智能指针的拷贝与赋值 shared_ptr的拷贝构造 shared_ptr的赋值重置 shared_ptr的其它成员函数 weak_ptr 定制删除器 简单实现 产生原因 产生原因&#xff1a;抛异常等原因导致的内存泄漏 int div() {int a, b;cin >> a…

生成对抗网络——CGAN(代码+理解)

目录 一、CGAN模型介绍 二、CGAN训练流程 1. 初始化 2. 数据准备 3. 输出模型计算结果 4. 计算损失 5. 反向传播和优化 6. 迭代训练 三、CGAN实现 1. 模型结构 &#xff08;1&#xff09;生成器&#xff08;Generator&#xff09; &#xff08;2&#xff09;判别器…

ShuffleNet系列论文阅读笔记(ShuffleNetV1和ShuffleNetV2)

目录 ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devices摘要Approach—方法Channel Shuffle for Group Convolutions—用于分组卷积的通道重排ShuffleNet Unit—ShuffleNet单元Network Architecture—网络体系结构 总结 ShuffleNet V2: Pra…

Vmware与Windows之间复制、粘贴内容、拖拽文件

Vmware17.0Ubuntu20 Vmware正确安装完linux虚拟机之后&#xff0c;这里以Ubuntu为例&#xff08;其他linux或windows系统也是类似的&#xff09;&#xff0c;如果你使用的默认配置&#xff0c;正常情况下就可以复制、粘贴和拖拽内容的&#xff0c;双方向都是支持的。如果不能复…

nvdiadocker相关配置S3Gaussian

https://download.csdn.net/download/sinat_21699465/89458214 dockerfile文件参考&#xff1a; https://download.csdn.net/download/sinat_21699465/89458214 prework&#xff1a; 显卡驱动决定了cuda版本支持的上限。例如nvdia535驱动最高支持cuda12.2所以显卡驱动版本选…

15.树形虚拟列表实现(支持10000+以上的数据)el-tree(1万+数据页面卡死)

1.问题使用el-tree渲染的树形结构&#xff0c;当数据超过一万条以上的时候页面卡死 2.解决方法&#xff1a; 使用vue-easy-tree来实现树形虚拟列表&#xff0c;注意&#xff1a;vue-easy-tree需要设置高度 3.代码如下 <template><div class"ve-tree" st…

2024广东省职业技能大赛云计算赛项实战——OpenStack搭建

OpenStack搭建 前言 搭建采用双节点安装&#xff0c;即controller控制节点和compute计算节点。 CentOS7 系统选择 2009 版本&#xff1a;CentOS-7-x86_64-DVD-2009.iso 可从阿里镜像站下载&#xff1a;https://mirrors.aliyun.com/centos/7/isos/x86_64/ OpenStack使用竞赛培…

JaveEE进阶----Spring Web MVC入门

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、什么是 Spring Web MVC&#xff1f;&#xff1f;1.1MVC 定义1.2 什么是Spring MVC ?1.3过浏览器和用户程序交互 二、 RequestMapping 注解三、Postman 前言…

容器基本概念_从虚拟化技术_到容器化技术_开通青云服务器_并远程连接_容器安装---分布式云原生部署架构搭建007

这一部分,属于以前都会用到的,会快速过一遍,对于关键技术问题会加以说明 https://www.yuque.com/leifengyang/oncloud文档地址在这里,可以看,有些命令可以复制使用 可以看到容器的出现就是 目的就是,让你做的所有的软件,都可以一键部署启动 打包就是docker build 然后: 对于…

陈晓婚前婚后大变样

陈晓婚前婚后大变样&#xff1f;陈妍希揭秘甜蜜与现实的碰撞在娱乐圈的星光璀璨中&#xff0c;有一对夫妻总是津津乐道&#xff0c;那就是陈晓和陈妍希。他们的爱情故事&#xff0c;从荧幕到现实&#xff0c;一直备受关注。然而&#xff0c;近日陈妍希在节目中透露&#xff0c;…

差分总结(一维+二维)

差分&#xff0c;可以视作前缀和的逆运算。 前缀和用于去求一个区间段的和 差分用于改变一个区间的值&#xff08;比如说某个区间都加上或者减去一个数&#xff09; P2367 语文成绩 #include<bits/stdc.h> using namespace std; #define int long long int n,p; int a…

RabbitMQ 学习笔记

RabbitMQ学习笔记 一些概念 Broker &#xff1a;RabbitMQ服务。 virtual host&#xff1a; 其实就是分组。 Connection&#xff1a;连接&#xff0c;生产者消费者与Broker之间的TCP连接。 Channel&#xff1a;网络信道&#xff0c;轻量级的Connection&#xff0c;使用Chann…

2024广东省职业技能大赛云计算赛项实战——Minio服务搭建

Minio服务搭建 前言 这道题是比赛时考到的&#xff0c;没找到具体题目&#xff0c;但在公布的样题中找到了&#xff0c;虽然很短~ 使用提供的 OpenStack 云平台&#xff0c;申请一台云主机&#xff0c;使用提供的软件包安装部署 MINIO 服务并使用 systemctl 管理 Minio是一个…

HTML静态网页成品作业(HTML+CSS)——手机电子商城网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…

python API自动化(Pytest+Excel+Allure完整框架集成+yaml入门+大量响应报文处理及加解密、签名处理)

1.pytest数据参数化 假设你需要测试一个登录功能&#xff0c;输入用户名和密码后验证登录结果。可以使用参数化实现多组输入数据的测试: 测试正确的用户名和密码登录成功 测试正确的用户名和错误的密码登录失败 测试错误的用户名和正确的密码登录失败 测试错误的用户名和密码登…