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. 275 H-Index II H指数 II

    这是 H指数 进阶问题:如果citations 是升序的会怎样?你可以优化你的算法吗? 详见:https://leetcode.com/problems/h-index-ii/description/ ...

  2. Java对象简单实用(计算器案例)

    对 Java中的对象与属性,方法的使用,简单写了个案例 import java.util.Scanner; class Calculste { int a; //定义两个整数 int b; Strin ...

  3. Web前端开发与iOS终端开发的异同

    语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...

  4. Java 8 (2) 使用Lambda表达式

    什么是Lambda? 可以把Lambda表达式理解为 简洁的表示可传递的匿名函数的一种方式:它没有名称,但它有参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. 使用Lambda可以让你更 ...

  5. System.AppDomain类详解(二)

    进程是存在独立的内存和资源的,但是AppDomain仅仅是逻辑上的一种抽象.一个process可以存在多个AppDomain.各个AppDomain之间的数据时相互独立的.一个线程可以穿梭多个AppD ...

  6. cocos2d-x win7 部署

    1. 安装 下载python  https://www.python.org/downloads/release/python-279/ 2.从官网下载cocos2d-x  http://www.co ...

  7. Python基础语法(转)

    作者:Peter 出处:http://www.cnblogs.com/Peter-Zhang/   Python 基础语法(一) Python的特点 1. 简单 Python是一种代表简单思想的语言. ...

  8. golang 自定义time.Time json输出格式

    工作中使用golang时,遇到了一个问题.声明的struct含time.Time类型.使用json格式化struct时,time.Time被格式化成”2006-01-02T15:04:05.99999 ...

  9. SDK_列表控件的使用

    列表控件的使用 列表控件是通用控件,响应WM_NOTIFY 消息 主要包含了 4 种风格,我们学的是 report 风格 如何设置列表的扩展风格 LVS_EX_GRIDLINES: 列表拥有表格线 L ...

  10. linux shell学习笔记二---自定义函数(定义、返回值、变量作用域)介绍

    linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...