web 前端 如何分享到instagram_好程序员web前端分享什么是前端同构渲染

好程序员web前端分享什么是前端同构渲染，同构渲染指的是前后端都使用了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而已，它的实现需要服务端提供一份初始化的数据。