什么是SSR（服务器渲染）

SSR
服务器渲染就是向后端服务器请求数据，然后在后端生成完整的首屏html页面返回给浏览器，
服务器渲染返回给浏览器的是已经获取了异步数据并执行js脚本的最终html页面，网络爬虫可以抓取到完整的页面信息，
SSR另一个很大的作用是加速首屏渲染，
因为无需等待所有的js脚本下载并执行，所以用户会很快看到渲染完成的首屏页面。

什么是 SSR
SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单，就是服务端直接渲染出 HTML 字符串模板，浏览器可以直接解析该字符串模版显示页面，因此首屏的内容不再依赖 Javascript 的渲染（CSR - 客户端渲染）。
SSR 的核心优势：

首屏加载时间：因为是 HTML 直出，浏览器可以直接解析该字符串模版显示页面。
SEO 友好：正是因为服务端渲染输出到浏览器的是完备的 html 字符串，使得搜索引擎能抓取到真实的内容，利于 SEO。
SSR 需要注意的问题：

虽然 SSR 能快速呈现页面，但是在 UI 框架（比如 React）加载成功之前，页面是没法进行 UI 交互的。
TTFB (Time To First Byte)，即第一字节时间会变长，因为 SSR 相对于 CSR 需要在服务端渲染出更对的 HTML 片段，因此加载时间会变长。
更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面，显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例，它的 renderToString() 方法是同步 CPU 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。

什么是SSR（服务器渲染）相关推荐

浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
【Nuxt3 ssr 服务器渲染】
Nuxt3 ssr 服务器渲染前言大家肯定遇到这样的面试题vue怎样seo?vue怎样提高首页速度?那么答案之一就是ssr服务器渲染. vue的ssr技术最好的选择就是nuxt了!因为迁移起来非常 ...
修改vue项目到服务器端渲染,现有vue-cli3搭建的vue项目改ssr服务器渲染
项目简介 vue+node+koa2 安装ssr依赖 npm install vue-server-renderer webpack-node-externals cross-env --save-d ...
Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程
Vapper 简介 Vapper 是一个基于 Vue 的服务端渲染(SSR)框架,它的核心目标是:简单.灵活.强大. 简单:尽最大的努力让开发 SSR 应用与开发 SPA 应用保持一致的体验,降&g ...
vue ssr服务器渲染笔记
服务器端server 和客户端client 服务端渲染主要使用vue-server-renderer插件 https://www.cnblogs.com/aliwa/p/8505284.html 通 ...
apache上代理转发nuxt ssr服务器渲染配置
1.找到apache目录中 /config/httpd.conf中开启 LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_h ...
什么是服务器渲染(SSR)、客户端渲染
什么是服务器渲染.客户端渲染一.介绍 1.1 服务端渲染(SSR) 简述: 又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解 ...
单页面SPA(如react，vue)网站的服务器渲染SSR之SEO大杀器rendertron(超详细配置+避坑)
单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上go ...
前端后分离深入分析 ——浏览器渲染和服务器渲染区别
1.为什么会有服务器渲染与客户端渲染? 首先理解服务器和浏览器客户端之间传递的是什么--HTML,CSS,JavaScript的文件以及数据载体json(xml)等文件,而文件都是静态,之所以动态是应 ...
vue_SSR框架：搭好的Vue服务器渲染框架，用vue做网站开发、做seo的首选。
前端江太公搭好的Vue服务器渲染框架,用vue做网站开发.做seo的首选最成熟的Vue ssr框架,一个命令就能启动和部署.零侵入开发,跟开发vue纯客户端一模一样. 体验优秀成熟的ssr框架使 ...

什么是SSR（服务器渲染）

什么是SSR（服务器渲染）相关推荐

最新文章

热门文章