开发者社区> 小结巴巴> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

react实现ssr服务器端渲染总结和案例(实例)

简介: 1、什么是 SSR     SSR 是 server side render 的缩写,从字面上就可以理解     在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM   2、为什么要实现服务器端渲染     传统的 SPA 应用 (如 react ),存在不利于优化,首屏加载慢等。
+关注继续查看

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 Hooks来编写一个todolist案例(一)
用纯react Hooks来编写一个todolist案例(一)
0 0
初识React -七个知识点 + 俩个案例 - 让你入门React(下)
初识React -七个知识点 + 俩个案例 - 让你入门React
0 0
初识React -七个知识点 + 俩个案例 - 让你入门React(上)
初识React -七个知识点 + 俩个案例 - 让你入门React
0 0
React全家桶:React_redux 求和案例
React全家桶:React_redux 求和案例
0 0
React全家桶: github搜索案例_详细拆解
React全家桶: github搜索案例_详细拆解
0 0
React全家桶: TodoLis案例_详细拆解
React全家桶: TodoLis案例_详细拆解
0 0
React全家桶: React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
React全家桶: React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
0 0
在react项目实战中使用Redux(案例讲解)
上篇文章讲解了redux的基本使用方法,这篇文章通过小案例教大家如何在实际的react的项目中实现redux,加深对redux的理解和掌握,基础内容不清楚的可以看看上篇文章
0 0
搞懂react中Hooks 状态的用法(案例讲解)
本篇文章带大家学习react中hooks的用法,自己也是在学习过程中进行记录,如果有总结不恰当的地方欢迎大家指出来,一起交流~
0 0
react中高阶函数与高阶组件的运用—(下)(案例详解登录鉴权与增强props)
上篇文章给大家介绍了高阶函数的相关的概念,了解了高阶函数的思想后,这篇来带大家学习高阶组件相关的知识
0 0
+关注
小结巴巴
高级前端工程师,喜欢写一些总结和例子
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
React Native项目实战优化之路
立即下载
React Native 全量化实践
立即下载