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.rhkb.cn/news/362187.html

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

相关文章

计算机网络 —— 应用层(FTP)

计算机网络 —— 应用层&#xff08;FTP&#xff09; FTP核心特性&#xff1a;运作流程&#xff1a; FTP工作原理主动模式被动模式 我门今天来看应用层的FTP&#xff08;文件传输协议&#xff09; FTP FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#x…

Electron快速入门(三):在(二)的基础上修改了一个文件夹做了个备忘录

Lingering Memories 诗绪萦怀 修改index.html <!--index.html--> <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-e…

检索增强生成RAG系列1--RAG的实现

大模型出现涌现能力之后&#xff0c;针对大模型的应用也如雨后春笋般。但是&#xff0c;在大模型真正落地之前&#xff0c;其实还需要做好最后一公里&#xff0c;而这个最后一公里&#xff0c;其中不同应用有着不同的方法。其中prompt、微调和RAG都是其中方法之一。本系列就是针…

抖音外卖服务商有哪些,盘点这几家正规服务商!

当前&#xff0c;抖音外卖的关注度不断上涨&#xff0c;抖音外卖服务商也逐渐成为了众多创业者心中的理想创业赛道。在此背景下&#xff0c;抖音外卖服务商的入局途径多次引发创业者热议&#xff0c;以抖音外卖服务商有哪些公司为代表的相关话题更是长期位居创业者问题榜单的前…

解决数据丢失问题的MacOS 数据恢复方法

每个人都经历过 Mac 硬盘或 USB 驱动器、数码相机、SD/存储卡等数据丢失的情况。我们中的一些人可能认为已删除或格式化的数据将永远丢失&#xff0c;因此就此作罢。对于 macOS 用户来说&#xff0c;当文件被删除时&#xff0c;垃圾箱已被清空&#xff0c;他们可能不知道如何恢…

【最新综述】基于伪标签的半监督语义分割

Semi-Supervised Semantic Segmentation Based on Pseudo-Labels: A Survey 摘要&#xff1a; 语义分割是计算机视觉领域的一个重要而热门的研究领域&#xff0c;其重点是根据图像中像素的语义对其进行分类。然而&#xff0c;有监督的深度学习需要大量数据来训练模型&#xff…

数据恢复篇:适用于Windows 的顶级数据恢复软件

适用于Windows的免费和付费的最佳数据恢复软件 **嘿&#xff0c;我要和大家一起泄露所有的测试工具。在评论中留下您的想法和最喜欢的选择&#xff01; 适用于 Windows 的最佳数据恢复软件 1.奇客数据恢复 奇客数据恢复版是Microsoft操作系统的顶级数据恢复软件应用程序之一&a…

基于协方差信息的Massive MIMO信道估计算法性能研究

1. 引言 随着移动互联网不断发展&#xff0c;人们对通信的速率和可靠性的要求越来越高[1]。目前第四代移动通信系统已经逐渐商用&#xff0c;研究人员开始着手研究下一代移动通信系统相关技术[2][3]。在下一代移动通信系统中要求下行速率达到10Gbps&#xff0c;这就要求我们使…

怎么把图片转成jpg格式?其他格式快速转换成jpg图片的方法

怎么把图片在线转jpg&#xff1f;jpg格式的图片是现在使用最广泛的一种图片格式&#xff0c;一般在网上传图时都会需要使用jpg格式的图片&#xff0c;那么当手中的图片不满足使用的要求时&#xff0c;如何操作能够快速将其他格式的图片转换jpg格式呢&#xff1f; 下面来教大家…

【Unity】Excel配置工具

1、功能介绍 通过Excel表配置表数据&#xff0c;一键生成对应Excel配置表的数据结构类、数据容器类、已经二进制数据文件&#xff0c;加载二进制数据文件获取所有表数据 需要使用Excel读取的dll包 2、关键代码 2.1 ExcelTool类 实现一键生成Excel配置表的数据结构类、数据…

iptables(11)target(SNAT、DNAT、MASQUERADE、REDIRECT)

简介 前面我们已经介绍了ACCEPT、DROP、REJECT、LOG,这篇文章我们介绍SNAT、DNAT、MASQUERADE、REDIRECT,这几个参数的定义我们在上篇文章中都有介绍,我这里再列出回顾一下 DNAT(目标地址转换)和 SNAT(源地址转换) 原理:修改数据包的源或目标 IP 地址。通常用于 NAT(…

重生之我要学后端0--HTTP协议和RESTful APIs

http和RESTful APIs HTTP协议RESTful APIs设计RESTful API设计实例 HTTP协议 HTTP&#xff08;超文本传输协议&#xff09;是用于分布式、协作式和超媒体信息系统的应用层协议。它是网页数据通讯的基础。工作原理简述如下&#xff1a; 客户端请求&#xff08;Request&#xf…

Linux下Cmake安装或版本更新

下载Cmake源码 https://cmake.org/download/ 找到对应的版本和类型 放进linux环境解压 编译 安装 tar -vxvf cmake-3.13.0.tar.gz cd cmake-3.13.0 ./bootstrap make make install设置环境变量 vi ~/.bashrc在文件尾加入 export PATH/your_path/cmake-3.13.0/bin:$PAT…

【D3.js in Action 3 精译】第一部分 D3.js 基础知识

第一部分 D3.js 基础知识 欢迎来到 D3.js 的世界&#xff01;可能您已经迫不及待想要构建令人惊叹的数据可视化项目了。我们保证&#xff0c;这一目标很快就能达成&#xff01;但首先&#xff0c;我们必须确保您已经掌握了 D3.js 的基础知识。这一部分提到的概念将会在您后续的…

Psychtoolbox 脑电实验范式之mp4视频绘制

1. 读取 首先需要使用到Screen(‘OpenMovie’)函数&#xff0c;该函数可以读取mp4、gif格式的数据&#xff0c;具体方式如下&#xff1a; clear; clc; Screen(Preference, SkipSyncTests, 1); screens Screen(Screens); screenNum max(screens); [window, screenRect] Scr…

AL8807是一款降压型DC/DC转换器,旨在以恒定电流驱动LED,可串联驱动多达9个LED,从6V至36V的电压源

一般描述 AL8807是一款降压型DC/DC转换器&#xff0c;旨在以恒定电流驱动LED。根据LED的正向电压&#xff0c;该设备可串联驱动多达9个LED&#xff0c;从6V至36V的电压源。LED的串联连接提供相同的LED电流&#xff0c;从而实现均匀的亮度&#xff0c;并消除了对镇流电阻…

数学建模 —— 矩阵的运算(上)

目录 调用函数运算 sum : 求和函数 prod : 求乘积函数(product) cumsum : 计算累积和(cumulative sum) diff : 计算差分(difference) mean : 计算平均值 (average) median : 计算中位数 mode : 计算众数 var : 计算方差 (variance) std : 计 算 标 准 差 (standard d…

教程:在 Kubernetes 集群上部署 WordPress 网站

WordPress 是专为每个人设计的开源软件&#xff0c;强调创建网站、博客或应用程序的可访问性、性能、安全性和易用性。WordPress 是一个基于 PHP 的内容管理系统&#xff08;CMS&#xff09;&#xff0c;使用 MySQL 作为数据存储&#xff0c;目前很多网站、电商独立站、个人博客…

华为od-C卷200分题目3 - 两个字符串间的最短路径问题

华为od-C卷200分题目3 - 两个字符串间的最短路径问题 题目描述 给定两个字符串&#xff0c;分别为字符串A与字符串B。 例如A字符串为ABCABBA&#xff0c;B字符串为CBABAC可以得到下图m*n的二维数组&#xff0c;定义原点为(0, 0)&#xff0c;终点为(m, n)&#xff0c;水平与垂…

知识图谱介绍及其应用领域分析

1.知识图谱 知识图谱(Knowledge Graph)乃一种精心设计的技术,旨在储存并整合交织的描述性知识信息。此技术通过构建由实体及其相互关系所组成的网络结构,实现对知识的有序组织与呈现。这些实体涵盖广泛的范畴,包括但不限于具体的物体、事件或抽象概念,它们经由多样化的关…