1、什么是 SSR

SSR 是 server side render 的缩写,从字面上就可以理解

在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM

2、为什么要实现服务器端渲染

传统的 SPA 应用 (如 react ),存在不利于优化,首屏加载慢等。

服务器端渲染:

增加首屏加载速度,解决白屏问题

可以直接渲染页面,利于 SEO 优化

3、SSR 的实现

1. 创建 webpack 配置文件

webpack.config.dev        即开发环境的配置

webpack.config.prod        即生成环境的配置

webpack.config.node        服务器端的配置文件

配置文件基本配置完成

2、修改 pakage.json 文件

我们需要修改 package.json 文件

3、dev/prop 入口文件

4、node 服务端

Node webpack 中的打包代码即是 App 该组件。

查看 ssr 服务器

服务器代码实现

主要实现技术:

这里主要是用了 react 提供的 renderToString 方法

renderToString  主要是接收一个 react 组件,并且返回一段 html 结构字符串。

readerToString 与 renderToStaticMakeUp

他们的作用相同

区别在于:

renderToString 渲染的时候带有 data-reactId ,这样就会增加流量,不过在客户端对比就会重新渲染

renderToStaticMarkUp 渲染的时候不带 data-reactId ,节省流量,在客户端会重新刷新,出现闪屏

想了解更多知识(源码等),想知道更多精华,看看我的博客吧   https://gilea.cn/

https://www.cnblogs.com/jiebba

react实现ssr服务器端渲染总结和案例(实例)的更多相关文章

  1. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  2. React服务器端渲染值Next.js

    昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...

  3. 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)

    细说后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr). 1. 后端 ...

  4. 基于React服务器端渲染的博客系统

    系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...

  5. 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)

    继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...

  6. 玩转 React 服务器端渲染

    React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基 ...

  7. React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法

    在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素.在做技术选型的时候决定采用nextjs.项目开发过程中,nextjs的体验非常棒,个人 ...

  8. React 服务器端渲染流程

    其实我们在访问客户端渲染的页面时,请求到的只是一个 html 空壳,里面引入了一个 js 文件,所有的内容都是通过 js 进行插入的,正是因为页面是由 js 渲染出来的,所以会带来如下几个问题: 1. ...

  9. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

随机推荐

  1. ACM_01背包(恰好装满)

    背包2 Time Limit: 2000/1000ms (Java/Others) Problem Description: 有n个重量和价值分别为Wi,Vi的物品,现从这些物品中挑选出总量刚好为 W ...

  2. DHTML_____document对象的方法

    <html> <head> <meta charset="utf-8"> <title>document对象的方法</titl ...

  3. virtualwrapper使用

    1.创建: mkvirtualenv 虚拟环境目录 2.查看虚拟环境 workon lsvirtualenv 3.进入虚拟环境 workon 虚拟环境目录 4.退出虚拟环境 deactivate 5. ...

  4. Java 8 (1) 行为参数化

    行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...

  5. 6.12---esultMap查询所有

  6. CF814C An impassioned circulation of affection

    思路: 对于题目中的一个查询(m, c),枚举子区间[l, r](0 <= l <= r < n),若该区间满足其中的非c字符个数x不超过m,则可以将其合法转换为一个长度为r-l+1 ...

  7. overflow实现隐藏滚动条同时又可以滚动

    .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...

  8. FCC 基础JavaScript 练习6

    1.对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的, 对象适合用来存储结构化数据,就和真实世界的对象一模一样,比如一只猫. 任务 创建一个叫做myDog的对象,它里 ...

  9. Vue实战之插件 sweetalert 的使用

    安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...

  10. Functional language 函数

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...