react服务端渲染框架

客户端渲染

加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件

动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档

没有任何其他内容

服务端渲染

加载出来的就带有完整的html文档内容(同时带有数据)

流程: 浏览器发送请求 --> 服务器端运行react代码生成页面 --> 服务器端返回渲染的页

客户端渲染:react代码在浏览器上执行,消耗的是用户浏览器的性能

服务端渲染:react代码在服务器上执行,消耗的是服务器端的性能

服务器端渲染好处:SEO可以得到优化,首屏速度加快

虚拟DOM是真实DOM的一个js对象映射

虚拟DOM可以通过ReactDOM的render方法,转化为真实DOM挂载到页面的DOM节点上

也可以通过renderToString ,转化为一个字符串

js默认遵守commonjs规范

此时是没有办法运行的,因为不识别 jsx 的语法

yarn add webpack babel-core babel-loader  webpack-cli

webpack可以帮助我们打包客户端代码和服务端代码,但是需要加上 target参数

表示打包的是服务端代码

2者的区别  let path = require(‘path‘)

在服务端不需要将其一起打包进 编译的文件中

但是在客户端需要一起打包,因为服务器端(node端) 已经有运行依赖的库

yarn add babel-preset-react  babel能够解析 jsx 语法

yarn add babel-preset-stage-0  babel-preset-env

注意在:babel8中 有些包是已经废弃了的,比如:babel-preset-react需要换成 @babel/preset-react

由于使用了webpack和stage-0 服务器端代码完全可以使用ES6的模块引入方式,最终编译后还是 require这种

代码引入方式

打包命令: webpack --config webpack.server.js (不写文件名称,默认为webpack.config.js)

webpack-node-externals 虽然自带的模块不会打包进最后生成的文件中,但是 node_modules第三方模块会被打包

所以需要这个插件,来过滤掉这个包里面的文件

renderToString 将组建渲染成字符串

webpack 服务端基本配置

-w (或者 --watch) 表示一直处于监听状态    监听的是配置文件中的入口文件(及其依赖文件) 只要文件发生改变就会重新编译该文件

发现一个问题

1. 编译可以监听了,但是需要每次 重新启动服务器

--watch后面的参数表示只要 build 目录中的文件改变了就会重新启动服务器

2.但是还是需要启动2个窗口

可以使用 npm-run-all 来提升开发效率,一个窗口可以执行多条命令

cnpm install npm-run-all -g

--parallel 表示并行执行

同构:一套react代码,在服务器端执行一次,在浏览器端也执行一次

问题:renderToString 只会渲染组件的基本内容,像点击事件等是不会起作用的

在客户端执行一段代码

静态文件必须放在 public中才能被访问到,访问静态文件的配置

服务器端代码

使用render方法也可以,但是会有警告

同构的时候使用这个 hydrate 涉及到数据的注水和脱水

这样按钮的点击就可以使用了,因为组件在客户端重新渲染了一遍

执行流程

1. 服务器端运行react代码渲染出html

2.发送html给浏览器

3.浏览器收到内容展示

4.浏览器加载js静态文件

5.js中的react代码在浏览器端重新执行一遍,此后js中的react代码接管页面的操作

服务器端使用路由

使用StaticRouter 代替 BrowerRouter

客户端路由也会重新执行一遍,服务器和客户端路由要统一

否则会出现警告

服务器端路由必须先获取路径,才能找到对应的组件     context里面是数据的传递

nodejs作为一个中间层,只负责后端接口的调用和页面的展示

服务端中使用redux :服务端和客户端都需要创建store

当服务端没有用Provider包裹的时候会提示 store 找不到

直接导出store会使得整个应用只有一个store ,这样所有用户共享一个store,显然是不对的

需要返回一个函数

服务端数据渲染

异步数据服务器渲染:loadData方法及路由重构

给组件增加loadData静态方法,负责在服务端渲染页面之前将这个路由的数据准备好

这种路由是不能定义 loadData 方法的

store里面应该填充什么数据,需要结合当前用户输入的地址

具体步骤:

1.改写路由

原文地址:https://www.cnblogs.com/escapist/p/10699787.html

时间: 2024-10-09 09:27:05

react服务端渲染框架的相关文章

react服务端渲染(同构)

学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对react组件进行解析并生成html字符串后返回视图页面. 后台为什么可以解析react组件?因为Node.js是一个Javascript运行环境,nodejs与javascript语法基本是相同的,所以nodejs可以正常解析react组件. 一.准备动作 1.安装nodejs与安装express 安

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

React服务端渲染总结

欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方恳请各位指出 O(∩_∩)O          序:前言.原因与思路.注意事项与问题.详解.       一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该“按需”对页面进行渲染 ——“首次加载/首屏”

react服务端渲染(九)proxy代理&&多级路由&&数据的脱水和注水

使用reducer之后 我们现如今无法使用reducer来替代createStore来实现服务端的渲染! 服务端渲染之后,客户端会再次渲染,因为我们的客户端创建的store为空.解决办法:在服务端渲染的时候将获取到的数据赋值一个全局变量,客户端创建的store以这个变量的值作为初始值. const Store = createStore(Rducer,window.info,applyMiddleware(thunk)); 中间层代理转发,我们的浏览器端渲染之前是直接发送'http://47.9

react服务端渲染(八)路由改写

每一个用户使用不同的store 请求发送axios/fetch,选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送,无需安装.但是服务端会报error:fetch is not defined,因为fetch()是为浏览器设计的,然后在第三方模块中后端移植到node.js,所以需要安装node-fetch: import fetch from 'node-fetch' 定义常量保存字符串 避免错误难以发现 componentDidMount只会在客户端执行 服务端不执行,

react服务端渲染(七)redux添加

使用,添加一个redux-thunk中间件,支持异步action操作 import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import Router from '../router' import Rducer from '../reducer' const Store = createStore

nuxt项目服务端渲染应用部署及使用pm2守护进程

服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generat

基于vue的nuxt框架cnode社区服务端渲染

nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue-router vuex nuxt axios simplemde ES6/7 stylus 目录结构 ├─npm-shrinkwrap.json ├─nuxt.config.js # nuxt配置文件 ├

react+laravel与服务端渲染的思考

1.首先 controller 几乎不写代码是不可能的.我现在就是 react.js 和 laravel 一起用,前后端完全分离的. 用 react.js 搭建前端视图,然后用 ajax 或者 fetch 来和 laravel 通信.laravel 写的接口代码几乎都在 controller 里面. 2.不要 react.js 和 laravel 的 blade 混写,要么要么完全分离,要么就完全用 blade 不然项目大一点痛苦就来了. 3.更不要想用 laravel 来服务端渲染 react