React 服务端渲染初步尝试

最新推荐文章于 2024-08-17 12:59:04 发布
最新推荐文章于 2024-08-17 12:59:04 发布
阅读量76 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：https://segmentfault.com/a/1190000002941042
版权
查找 React 中文文档请往 https://doc.react-china.org/

简聊代码用了 React 存在, 存在加载缓慢的问题. 一些表单页面也会受到影响
于是开始尝试做服务端渲染, 方便在打开时能更快渲染页面
JavaScript 代码以 defer 模式等待页面渲染完成, 然后开始加载

脚手架和打包相关的代码我做了整理托管在 Teambition GitHub 上
https://github.com/teambition...
另外一些注意点在下边做一些笔记

服务端渲染

  • checksum 问题

React 在服务端渲染之后, 会在根节点生成一个 checksum 用于校验
同时 React 在浏览器端也会进行一次判断, 看 HTML 内容和客户端渲染是否一致
一般都用 React 不会出问题, 但是比如空白符, 或者内容不一致, 就会给出提示

  • script defer 执行

为了 JavaScript 延迟加载, 可以用 defer 属性指明, 或者直接把标签放在 <body> 后边
因为我们渲染的 HTML 是直接把 <body> 替换的, 所以用 defer 完成了功能

  • 上线之后 CSS 加载问题

实际使用虽然 Webpack 能够打包 CSS, 但是页面加载时的效果不能缺少 CSS
所以 CSS 实际上还是应该跟着 HTML 的 <header> 一起加载的
这个实际上会影响打包的复杂度, 在我的例子当中, 所以使用了一个 CSS 文件

  • 初始化数据

JavaScript 的初始化数据使用 HTML 形式的 <script> 方式写入变量, 客户端运行过程读取

JSX

初始 HTML 内容, 也就是 <body> 外面的部分, 不属于 React Component
但也可以用 React 的方式写, 不过要注意 <!DOCTYPE HTML> 在 React 中不存在

  • script 标签关闭方式

JSX 语法类似 XML, 标签都是需要关闭的

  • body 周围空白符验证

生成的 HTML 不要有随便的空格或者换行, 否则会出现警告
即便是挂载的 React 组件外面有空格, 也会出现警告

  • stir-template

https://github.com/mvc-works/...
stir 是个小模块, 我用来生成 HTML, 语法类似 React, 但仅仅用于生成字符串
这种写法在 CoffeeScript 当中写起来会比较清晰, 对于 JavaScript 用户开发不是很必要
因为个人原因, 部分 HTML 代码会使用 CirruScript 书写, 避免一些特殊符号, 区别一下就好了

Webpack

代码热替换方案比较啰嗦, 目前的用法主要参考这篇文章
http://kevinold.com/2015/02/0...
具体涉及打包等等, 看开头我们仓库当中给出的例子

前后端共用代码

  • 特殊代码的 try

前后端共享代码对于有些库来说还是会麻烦, 我们遇到的是一些 jQuery 组件没有做好判断
原理上我们应该 fork 代码提供一个两种环境都能运行的版本
实际操作中部分代码我们临时用了 try 语句捕捉 Node 环境当中的错误
目前尝试的项目很小, 未来这个问题应该会凸显, 需要注意一下

weixin_33736832
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从简单React SSR项目透视服务端渲染原理
Java_AiNiYo的博客
10-12 1245
原文发布于咱们前端团队的公众号，建议读者进入公众号看原文，CSDN的排版和配色太难受了，作为一个前端不能忍 一、为什么要进行服务端渲染 随着前端技术栈和工具链的迭代成熟，前端工程化、模块化的趋势也愈发明显，在这波前端技术浪潮中，涌现了诸如React、Vue、Angular等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有渲染性能好、可维护性高等优点。但也同时带来了两...
简聊初步尝试服务端渲染的一些感想
weixin_34349320的博客
12-12 96
多多少少有些不开心的事, 觉得精力没有被投入在重点上创业公司遇到问题变成盲人摸象也许正常吧不过最近这段时间因为服务端的策略调整, 我开始做一些服务端渲染主要的站点是简聊的登录页面, 整体从 Jade 切换到了 Reacthttps://account.jianliao.com/signin以及做了一些整体项目结构统一的工作, 或者说一些思...
【React Hooks原理 - useSyncExternalStore】
weixin_44273311的博客
07-19 787
从基本使用、源码解析（Mount首次渲染、Update更新渲染）、举例说明来介绍了useSyncExternalStore的基本原理和使用，并举例扩展了其实关于SSR的水合阶段的介绍
React 官网为什么那么快？
QQ_____365392777的博客
08-12 2459
无论是哪种渲染方式，一开始都是要请求一个HTML文本，但是区别就在于这个文本是否已经被服务端组装好了客户端渲染还需要去下载和执行额外的Javascript脚本之后才能得到我们想要的页面效果，所以速度会比服务端渲染慢很多服务端渲染得到的HTML文档就已经组合好了对应的文本，浏览器请求到之后直接解析渲染出来即可，不需要再去下载和执行额外的Javasript脚本，所以速度会比客户端渲染快很多对于一些内容不经常变化的网站，我们甚至可以在服务端渲染的基础上予以改进，将每次请求服务端都渲染一次HTML。...
React Native 从入门到原理
along
06-18 1813
[转自: http://www.jianshu.com/p/978c4bd3a759] React Native 从入门到原理 React Native 是最近非常火的一个话题，介绍如何利用 React Native 进行开发的文章和书籍多如牛毛，但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分：上半部分用通俗的语言解释了相关的名词，重点介绍 React N
react学习笔记之hook
浩星
07-15 388
摘自官网：入口 目录： Hook 简介 Hook 概览 使用 State Hook 使用 Effect Hook Hook 规则 自定义 Hook Hook API 索引 Hooks FAQ Hook 简介 Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // .
【前端面试题】2024年前端面试真题之React篇
Web面试那些事儿的博客
06-18 802
在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
React移动端项目-01
m0_73442777的博客
08-03 1059
>本项目对标`CSDN`、`博客园`等竞品，致力成为更加贴近年轻 IT 从业者的科技资讯类应用 >产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交 >用户特点：年轻有活力，对IT领域前言科技信息充满探索欲和学习热情
前端React教程第二课 React生命周期设计思想
fegus的博客
05-14 379
02 为什么 React 16 要更改组件的生命周期？（上） React 生命周期已经是一个老生常谈的话题了，几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍。然而，入门教材在设计上往往追求的是“简单省事、迅速上手”，这就导致许多同学对于生命周期知识的刻板印象为“背就完了、别想太多”。 “背就完了”这样简单粗暴的学习方式，或许可以帮助你理解“What to do”，到达“How to do”，但却不能帮助你去思考和认知“Why to do”。作为一个专业的 React 开发者，我们必须要求自
详解React 服务端渲染方案完美的解决方案
10-17
主要介绍了详解React 服务端渲染方案完美的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-react服务端渲染同构框架
08-15
"react-koa-mobx-server-side-render-master"这个压缩包可能包含了一个使用React、Koa和MobX实现的服务端渲染同构框架的示例项目。 首先，让我们深入了解React服务端渲染的工作原理。传统的客户端渲染模式中，...
详解React服务端渲染从入门到精通
10-17
React服务端渲染是一种技术，它允许React组件在服务器端生成HTML字符串，然后发送给浏览器进行初步渲染，从而提高首屏加载速度并优化SEO。本文将详细介绍如何从零开始掌握React服务端渲染。 首先，我们需要了解...
React服务端渲染（总结）
08-30
React服务端渲染总结 React服务端渲染是指使用React框架在服务器端生成初始HTML的技术。这种技术可以提高页面的渲染速度和搜索引擎优化（SEO）。 知识点一：为什么需要服务端渲染 服务端渲染的主要优点是可以...
vue 2.x + @vue/cli 4.x开发阶段使用Vite
m0_44963501的博客
08-14 357
vue/cli 升级 vite 动态菜单vite处理
ES6 (一）——ES6 简介及环境搭建
m0_62701594的博客
08-13 1088
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
VUE框架面试整理-Webpack
不务正业的猿
08-13 209
Webpack 是一个流行的前端资源打包工具，用于将项目中的各种资源（JavaScript、CSS、图片等）打包成可以在浏览器中运行的静态文件。通过 Webpack，你可以高效地管理和打包前端资源，使得开发和部署过程更加顺畅。以上示例展示了基本的 Webpack 配置和使用方法，你可以根据项目需求进行更高级的配置和优化。以下是一个完整的 Webpack 配置示例，包括入口、输出、加载器和插件。入口是指 Webpack 用来构建内部依赖图的起点，通常是项目的主文件。3. 配置 Webpack。
Webpack高级配置（干货2）
最新发布
dlnu2015250622的博客
08-17 81
webpack高级配置,codeSplit
vue-cli(一)
qq_64669006的博客
08-13 451
‌vue-cli脚手架是‌Vue.js项目的官方脚手架，基于‌Node.js与‌Webpack构建，用于快速生成Vue工程化项目的工具。开箱即用提供了一套完整的项目结构和配置，减少了手动配置的工作量。基于Webpack利用Webpack的资源打包和优化功能，提高项目的性能和稳定性。功能丰富且易于扩展支持创建Vue2和Vue3的项目，提供了丰富的功能和插件系统，便于定制和扩展。支持命令行操作通过命令行接口（CLI）进行项目创建和管理，提升了开发效率。‌。
"深入React服务端渲染：完整讲义与实操指南
React服务端渲染是一种在服务器端将React组件渲染为HTML的方法。它提供了一种有效的方式，可以在前端和后端之间共享组件，并更好地处理搜索引擎优化和性能优化。 React是一种用于构建用户界面的JavaScript库。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值