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;这就需要通过收集输入输出数据来辨识其运动学模型。…

业务使用redis分布式锁

伴随着业务体量的上升&#xff0c;我们的qps与并发问题越来越明显&#xff0c;这时候就需要用到让代码一定情况下进行串行执行的工具&#xff1a;锁 1.业务场景代码 OverrideTransactional(rollbackFor Exception.class)public Object testBatch(User user) {LambdaQueryWrapp…

Java8的Lambda表达式

Java中的Lambda表达式是Java 8引入的一种新特性&#xff0c;主要用于简化代码&#xff0c;特别是在处理函数式编程和集合操作时。Lambda表达式允许你将功能作为方法参数传递&#xff0c;使代码更加简洁和易读。 1.基本语法 Lambda 的格式由3个部分组成 其标准格式为&#xf…

Go语言 获取服务器资源磁盘Disk情况

1、获取整个磁盘的总量、已使用量、使用率 package mainimport ("fmt""github.com/shirou/gopsutil/disk""log" )func main() {// 获取所有挂载点的磁盘使用率信息partitions, err : disk.Partitions(false)if err ! nil {log.Fatalf("Err…

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…

《web应用技术》第12次课后作业

1、了解servlet技术 Servlet(server applet)&#xff1a;运行在服务器的小程序&#xff0c;Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问到的规则。将来我们自定义一个类&#xff0c;实现Servlet接口&#xff0c;复写方法。 Servlet本身不能独立运行&#xff0c…

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 前言…

Python中栈的实现与应用

Python中栈的实现与应用 一、引言 栈&#xff08;Stack&#xff09;是一种重要的数据结构&#xff0c;它遵循后进先出&#xff08;LIFO&#xff0c;Last In First Out&#xff09;的原则。栈的基本操作包括入栈&#xff08;push&#xff09;和出栈&#xff08;pop&#xff09…

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

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

关于后端幂等性问题分析与总结

后端幂等性&#xff08;Idempotency&#xff09;是指对系统执行一次操作或多次执行相同的操作&#xff0c;其结果始终如一。在分布式系统和API设计中&#xff0c;这是一个关键概念&#xff0c;因为它能保证用户无论请求被路由到哪个节点&#xff0c;多次执行相同的请求都不会导…