小小千想和您聊一聊

当前位置: 首页> 技术分享> 什么是前端同构渲染

什么是前端同构渲染

  同构渲染指的是前后端都使用了js,首次渲染的时候使用nodejs加载了我们的HTML文件,用小白的话来说,同构渲染既不属于后端渲染,也不属于前端渲染,它是介于二者之间的共有部分。同构渲染的实现其实就是SSR+CSH,他们是通过一份代码而实现的。

  在这里提到了前端渲染和后端渲染,他们各自都有自己的优势吧。前端渲染的优势包括:可以局部刷新、可以实现懒加载技术、可以使用js实现各种炫酷的效果、可以通过cdn服务器访问资源、前后端分离开发、学习成本相对较低。后端主要的优势有:可以很好的解决首屏加载的问题、利于seo的优化。

  随着技术的发展,像Vue和React框架已经能够实现很好的同构渲染,也就是我们常说的SSR,比如说nuxt.js和next.js。在前端渲染异常普遍的今天,我们为什么会有同构渲染的技术出现呢?

  上面已经介绍到了,同构渲染其实可以解决首屏加载缓慢和SEO的优化问题。

  传统的搜索引擎通过从 HTML文件 中抓取我们所需要的数据,这样的话前端渲染的页面就无法被抓取到。开发过vue和react项目的开发者都知道,我们常使用的 SPA 会把所有 JS 整体打包,不可忽略的一个问题就是文件太大,导致渲染前等待很长时间。特别是网速差的时候,让用户等待白屏结束并非一个很好的体验。

  服务端渲染可以先将使用的数据渲染成最终 HTML 直接展示,理想情况下能避免白屏问题。但是凡事无绝对,如果一个页面的数据量过大,那也不可避免的会有等待情况的发生。

  说到PHP,JSP的渲染模式,他们都是前端写完页面之后交给后端,后端通过模板引擎渲染出来的HTML页面,后缀名为php或者jsp。通过中的SSR其实原理也是一样的,只不过多了一层CSH而已,它的实现需要服务端提供一份初始化的数据。

上一篇:cookie

下一篇:作为前端入门,有没有必要学习高难度css和js特效

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码