服务器端渲染的特点

服务器端渲染固然耗CPU,但可以使用服务器端缓存的方式解决,并不是每个用户访问都需要重新渲染一遍。而且服务器端渲染甚至可以潜在地增加服务器效率(这点在参考资料第二个里有提到,不过是纯英文的,我有空会翻译下)。2. 服务器端和客户端可以共享某些代码,避免重复定义。这样可以使结构更清晰,增加可维护性3. 首次加载页面的速度加快。客户端渲染的一个缺点是,当用户第一次进入站点,此时浏览器中没有缓存,需要下载代码后在本地渲染,时间较长。而服务器渲染则是,用户在下载的已经是渲染好的页面了,打开速度比本地渲染快。4. SEO。服务器端渲染可以让搜索引擎更容易读取页面的meta信息以及其他SEO相关信息,大大增加网站在搜索引擎中的可见度。其实并不一定要争个好坏,服务器端和客户端渲染各有各的优缺点。建议根据实际需求,在某些页面使用服务器渲染,某些页面使用客户端渲染,以达到最佳解决方案。

首先,是服务器渲染的好处,很明显,服务器渲染肯定比客户端渲染,首屏加载的速度要快一些。配合bigpipe这种网页加载模型速度会显著提升。

其次,服务器渲染使用react的好处是,服务端和网页端可以共享同一套jsx代码。不使用js的话,通常服务器需要自己使用后端语言拼接字符串,或者php,jsp,asp这种代码/html混写的风格,或者特定平台的模板引擎库去输出页面。无论,那种,服务端都要自己实现一段代码。而前端页面js也要写一套代码用来渲染ajax的异步数据,其实这部分工作是重复的。如果使用nodejs开发,那么前后端因为都使用js语言,因为前后端同构可以避免这种重复代码。

总结一下:1.提升了团队的工作效率(想想前后端配合的各种坑)。2.代码复用度更好。3.网站性能更好。

react.js在服务器端渲染好处:

  提升性能是需要再浏览器端的性能提升还是服务端的 性能提升,是两个概念,服务端渲染会给服务端造成一定的压力,减轻客户端的压力;好处:在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些;

  渲染的流程主要是:

  1. 准备数据,一般从数据库或外部API获得 (一般要先 render React 一次,去触发所需的API)
  2. 数据和React结合生成HTML Markup
  3. 除了把HMTL Markup输出外, 还要把‘State‘输出,这要在客户端才能保留‘State‘
时间: 2024-11-14 22:16:49

服务器端渲染的特点的相关文章

玩转 React 服务器端渲染

React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基础,它移除了服务器端对于浏览器环境的依赖,所以让服务器端渲染变成了一件有吸引力的事情. 服务器端渲染除了要解决对浏览器环境的依赖,还要解决两个问题: 前后端可以共享代码 前后端路由可以统一处理 React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说明. R

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

系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-render 3. 总结 正文 1. 开发前准备 1. 1 技术选型 对于个人的博客系统而言,服务器计算能力往往不是需要考虑,而其中的 I/O 操作是比较复杂的,同理对前端的交互要求也是较高的,所以这次主要还是围绕 Node系 ,React系 框架进行开发.对于 2016 年后的互联网产品, Reac

【大前端之前后分离】JS前端渲染VS服务器端渲染

前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现实问题,因为如果我是一个服务器端,我便会觉得不是很有必要,为什么要前后分离,前后分离后遗留了什么问题,如何解决,都得说清楚,这样才能说服团队使用前端渲染的方案,而最近我刚好遇到了框架选型的抉择. 来到新公司开始新项目了,需要做前端框架选型,因为之前内部同事采用的fis框架,而这边又是使用的php,这

服务器端渲染VS浏览器端渲染

1)浏览器渲染和服务器渲染区别:何为渲染?如果我们只是想显示一堆不变的数据,那么我们直接写一个a.html丢到服务器上让客户端访问就可以了.但这是基本不可能的事情,数据一般是变化的.你不可能为每套数据写一个视图,所以我们需要分离数据和视图,然后使用一种技术将数据塞到视图中,这种技术就叫渲染.这工作放在服务器上做就是服务器渲染,放在浏览器做就是浏览器渲染. 这里的渲染,就是指生成html文档的过程,和浏览器渲染html没有关系.浏览器端渲染,指的是用js去生成html,前端做路由.举例:React

编程学习之如何在Node.js中优化服务器端渲染?[图]

编程学习之如何在Node.js中优化服务器端渲染?[图]在 Airbnb,我们花了数年时间将所有前端代码迁移到 React 架构,Ruby on Rails 在 Web 应用中所占的比例每天都在减少.实际上,我们很快会转向另一个新的服务,即通过 Node.js 提供完整的服务器端渲染页面.这个服务将为 Airbnb 的所有产品渲染大部分 HTML.这个渲染引擎不同于其他后端服务,因为它不是用 Ruby 或 Java 开发的,但它也不同于常见的 I/O 密集型 Node.js 服务.一说起 Nod

nuxt中-axios跨域- 服务器端渲染

今天在做项目中,遇到一个问题,在一个点击事件中利用axios发请求,出现了跨域问题,之前都是直接用的服务器端渲染,然后就一直没出现,还是解决了很久的,所以决定把问题及解决方案记录下来. tree.vue : 最终解决方案 在nuxt项目中的server文件中的index.js中拦截一个地址替我们发这个请求, server/index.js或者vue中的server.js 此时就需要在我们的点击事件中请求我在server的index.js的地址,及   /api/user/login 页面地址:t

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

细说后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr). 1. 后端模板渲染 前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html 后,返回给前端,前端再用 js 去操作 dom 或者渲染其他动态的部分. 这个过程大致分成以下几个步骤: 前端请求一个地址 url 后端接收到这个请求,然后根据请求信息,从数据库或者其他地方获取相应的数据 使用

vue的服务器端渲染

0. 服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面. 但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application)

vue服务器端渲染

Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序. 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行. 传统的SPA(单页应用(Single-Page Appli