服务器渲染_服务器端渲染 - CSDN
精华内容
参与话题
  • 服务器渲染与前端渲染

    千次阅读 2019-02-09 14:51:30
    服务器渲染(后端渲染) 浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。 传统的jsp、php都是属于服务器渲染。 客户端渲染(前端渲染) 服务器端处理请求后将数据返回...

    服务器渲染(后端渲染)
    浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。
    传统的jsp、php都是属于服务器渲染。

    客户端渲染(前端渲染)
    服务器端处理请求后将数据返回给浏览器,浏览器通过拼接html字符串或者使用js模板引擎,或者React这类框架进行页面渲染,又称作 : 局部渲染

    前端渲染的优势:

    1. 局部更新页面,无需每次都进行完整页面请求
    2. 懒加载。页面初始时只加载可视区域内的数据,随着滚动等操作再加载其他数据
    3. 节约服务器成本
    4. 关注分离设计。服务器只用于访问数据库提供接口,前端关注展现。
    5. 富交互,使用 JS 实现各种酷炫效果
    展开全文
  • 之所以选择服务器渲染,主要出于以下两点考虑: 能够为客户提供更理想的性能 提供更为一致的SEO表现 正是由于SSR拥有上述优势,因此我们在将自有堆栈转换为React与Node.js时,投入了大量时间与...

    我们在walmart.com网站上的大多数页面采用服务器端渲染(简称SSR)方式。之所以选择服务器端渲染,主要出于以下两点考虑:

    • 能够为客户提供更理想的性能

    • 提供更为一致的SEO表现

    正是由于SSR拥有上述优势,因此我们在将自有堆栈转换为React与Node.js时,投入了大量时间与精力以优化SSR性能。其中的一项关键性指标正在于页面内“明显位置”的渲染性能。我们发布的开源项目Electrode框架当中包含多种模块,能够有效提升SSR性能。感兴趣的朋友可以点击下面链接参阅我之前发布的各模块助益评述。

    https://medium.freecodecamp.com/using-fetch-as-google-for-seo-experiments-with-react-driven-websites-914e0fc3ab1

    在发布Electrode框架并强调其面向SSR的设计思路之后,我收到了大量关于SSR优势的疑问与评论。在今天的博文中,我将专门探讨使用SSR在性能层面带来的改善效果——另外亦感谢Andrew Farmer与Patrick Hund在SEO优势评述方面提供的协助。

    理论性能收益

    首先我们将通过下面这份简单的时间线图展示SSR与CSR(即客户端渲染)之间的区别。

    可以看到其中最大的区别在于,在使用SSR的情况下您的服务器对浏览器的响应结果属于已做好准备并可进行渲染的页面HTML,而CSR的浏览器响应结果则属于链接至您JavaScript的空文档。这意味着您的浏览器将立足服务器进行HTML渲染,而无需等待全部JavaSciprt代码的下载与执行。在这两种情况下,我们都需要下载React并利用同样的流程构建一个虚拟dom,而后附加各事件以实现页面交互——但在SSR方面,用户可在执行上述流程的同时查看到页面内容。而在CSR方面,大家则需要等待上述流程全部执行完成,而后方可进行查看。

    现在,我们来了解以下注意事项:

    • 尽管在SSR方面,页面会提前进行渲染以帮助客户更早查看页面内容,但在React真正执行完成之后,查看到的内容并无法进行交互。如果客户在此期间点击某按钮,该操作亦需要等待React执行完成后方可起效;

    • SSR TTFB(即第一字节时间)速度比CSR更慢,因为您的服务器需要耗费时间为页面创建HTML,而非直接发送相对较空的响应内容;

    • SSR的服务器数据吞吐量要远低于CSR数据通量。以React为例,这种数据吞吐量的差异将造成显著区别。ReactDOMServer.renderToString为一项同步CPU绑定调用,其中包含该事件循环,意味着服务器将无法在ReactDOMServer.renderToString完成之前处理其它请求。这里我们假定您的页面需要500毫秒进行SSR,则意味着您每秒至多只能执行2项请求。

    实际案例

    在下图当中,我们就walmart.com网站上的各生产应用对SSR与CSR进行渲染效果比对。

    我们将三款应用(即主页、分类与搜索)分别立足SSR与CSR方式进行比较。相关结果来自Chrome浏览器所捕捉到的页面渲染时间指标。大家可能已经注意到,SSR渲染速度要更快一些,而使用CSR则意味着加载过程中浏览器内将显示空白页面。大多数使用CSR的应用都会利用加载图标来取代这种难看的空白页面,但由于我们在正常操作中默认使用SSR,因此在CSR测试中页面仍保持未经发动的空白样式。需要注意的是,上述结果皆为我们的设备在一天中特定时段内配合实际生产配置捕捉到的结果,因此经过定制化调整的方案也许在性能上有所区别——不过总体而言,其仍然足以反映一般性趋势。

    上图为主页、分类与搜索页面的首次服务器响应对比。在这里我忽略掉了绿色指标条,因为其更多反映的是网络图中的其它元素。这里最值得关注的其实是文档大小与TTFB。由于服务器会利用HTML对页面进行响应,因此大家可以看到SSR的文档总是相对较大。另外需要强调的是,正如前文中所提到,CSR响应速度更快(除了主页,这是因为受到本次测试中某些因素的影响)。

    这里再次向大家强调,上述测量指标会随着应用类型、延迟、服务器、位置以及多种其它变量的变化而有所浮动,因此请不要将其视为科学的客观事实——而仅用于反映一种普遍规律。

    Electrode框架

    在我们对SSR与CSR进行A/B测试时,得出了以上总体趋势,而我们的数字也显示尽早进行渲染往往能够带来更理想的操作体验。

    考虑到这些理由,我们的开源应用平台Electrode高度关注SSR。其默认启用SSR,而我们亦构建起多种模块以进一步提升SSR性能表现。感兴趣的朋友亦可点击此处参阅另一篇文章,我在其中展示了如何利用其中两款模块将RenderToString()时间缩短达70%。

    这里再次感谢Mayakumar与Caoyang协助我审查并调整了本篇博文的具体内容。

    原文链接:https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

    今日荐文

    点击下方图片即可阅读

     区块链技术与微服务架构之间有什么关系?


    今年,架构师关注的技术点有何不同?从云计算、大数据、微服务、容器,到现在的人工智能,架构师应该怎么做?这里推荐一场会议,为你总结了100+国内外技术专家现阶段的架构实践,8折即将截止,点击“阅读原文”,看看对你有何启发。

    展开全文
  • render()函数进行服务器渲染(详细)

    万次阅读 2018-10-13 11:24:25
    框架 怎么来的? 安装package.json => npm init 新建app.js 安装express框架 =&...新建public文件夹/index.html(客户端渲染) 创建views文件夹/product.js order.js app.js const expres...

    使用 Express 做服务端框架的时候,如果选择一种类似于 EJS这种模板引擎渲染前端页面的时候,经常服务端在响应 http 请求的时候调用 res.render({options}) 去向模板中渲染数据, 可以把视图响应给客户端.

    框架
    在这里插入图片描述
    怎么来的?

    安装package.json => npm init
    新建app.js
    安装express框架 => npm install express --save
    模块什么时候用什么时候安装
    node app
    新建public文件夹/index.html(客户端渲染)
    创建views文件夹/product.js order.js

    app.js

    const express = require('express');
    const app = express();
    app.use(express.static('public'));
    app.listen(7000,function(){
        console.log('服务已经启动,请访问http://localhost:7000');
        // 访问http://localhost:7000 
    })
    

    报错cannot get/ 原因没有设置静态资源目录 管线
    就是加入管线 app.use(express.static('public'));

    为什么能找到public文件夹?
    把app.use看成管道,第一道网就是public,带进入这个文件夹,默认进入index.js

    index.html

    <body>
        <h1>我是主页</h1>
        <a href="http://www.baidu.com">百度</a>
        <a href="/user.html">用户</a>
        <!-- 跳转使用render函数 -路由 -->
        <a href="/order/list">订单列表</a>
        <a href="/product/list">产品列表</a>  
        <a href="/api/product/list">产品列表</a>  
    </body>
    

    1打通路
    在这里插入图片描述
    加入管线
    在这里插入图片描述
    效果:返回一个json
    在这里插入图片描述

    2.怎么让他返回一个HTML页面?

    express约定的视图文件夹views
    在这里插入图片描述
    node app
    效果:找不到文件
    在这里插入图片描述
    缺少一道网 -->视图模板 必须用它来找views/.html并且可以解析它->安装ejs

    npm install ejs --save
    

    引入 const ejs = require('ejs');
    加入管线(设置视图引擎) app.engine('ejs',ejs.renderFile);
    在这里插入图片描述
    3.怎么让他去找到views文件夹? app.set('views','views'); set和use功能一样
    // 第一个参数是视图模板(固定),第二个参数是视图模板所在的位置,默认express框架把views文件夹当成视图文件的位置

    app.engine('ejs',require('ejs').renderFile);//优化
    

    查文档 http://www.expressjs.com.cn/4x/api.html#app.engine

    如果想让他解析jsp文件(安全性高)
    app.engine(‘jsp’,require(‘ejs’).renderFile);//优化
    views/ order.jsp
    router/order.js ->res.render(‘order.jsp’)//ejs后缀可以省略
    在这里插入图片描述
    改成ejs
    app.engine(‘ejs’,require(‘ejs’).renderFile);
    views/ order.ejs
    router/order.js ->res.render(‘order’)
    在这里插入图片描述
    错误表示没有解析器,设置一个解析器
    app.set(‘view engine’,‘ejs’);

    相当于

    解析HTML,js

    app.engine('ejs',require('ejs').renderFile);
    

    解析ejs

    app.set('view engine','ejs');
    

    两个作用一样
    4.怎么让视图动态化?

    原来:视图模板里面发起ajax请求 ,脚本,jQuery $.get 获取数据,绑定到视图上(dom绑定)

    现在:要动态渲染,需要数据

    数据从哪里来?

    回到render函数

    res.render('order',[option]);
    
    // 第一个参数是视图的名称,如果是.ejs文件,必须省略后缀名,如果是.html,.jsp,.abc,.def等自己定义的后缀名时,必须加后缀。
     // 第二个参数是视图需要的数据
    

    数据传过去了如何使用?

    ejs语法

    <%= title %>
    

    app.js

    app.set('views','views');//可以省略。默认
    app.set('view engine','ejs');//与下两行等效  如果是.ejs文件,可省略后缀名,
    // 需要使用视图模板引擎,让他解析views文件中的.html文件
    // 需要安装视图模板引擎:npm install ejs --save
    	//      const ejs = require('ejs');
    	//      app.engine('ejs',ejs.renderFile);
    	// 设置视图引擎
    	// 加()立即执行了,没有加()相当于绑定到前面
    	// app.engine('ejs',require('ejs').renderFile);//要在order.js里加 res.render('order.ejs')  如果是.ejs文件,必须加上后缀名,
    //------------------------------------------------------
    app.use(require('./router/order.js'));
    app.use(require('./router/product.js'));
    // 理解在接口前多加一个前缀
    app.use('/api',require('./router/product.js'));
    

    router/order.js

    const express = require('express');
    const route = express.Router(); 
    
    // 方盒子-属性,不加括号、 立方体-方法加括号
    // a标签发起的是get请求,如果要让他发起post请求,要设置监听事件
    route.get('/order/list',function(req,res,next){
        // res.json({code:200});
      
        res.render('order',{
            title:'我是订单列表页',
            content:'<h2>我是标题2</h2>',
            person:{
                name:'张三',
                age:20,
                sex:true,
                fav:['读书','听音乐','唱歌']
            }
        });
    });
    
    module.exports = route;
    

    模板用ejs渲染
    views/order.ejs

    <body>
        订单列表
        <!-- 带=的不会解析HTML标签,
            带-的会解析HTML标签 
            判断语句注意:1.不能加=号 2.闭合{}-->
        <%= title %>
        <hr>
        <%- content %>
        <hr>
        姓名:<%= person.name %><br />
        年龄:<%= person.age %><br />
        姓别:<%= person.sex?"男":"女" %><br />
        姓别:<% if(person.sex){ %>
                    <span style="color: red">男</span>
              <% }else{     %>
                    女
              <% } %>
        <hr>
        爱好:
        <% for(var i = 0; i < person.fav.length ;i++){%>
        <%=     person.fav[i]%>
        <%  }%>
    </body>
    

    在这里插入图片描述

    router/product.js

    const express = require('express');
    
    const route = express.Router();
    
    route.get("/product/list",function(req,res,next){
        res.render('product',{
            id:1,
            name:'华为',
            price:2000,
            amount:309,
            products:[
                {id:2,name:'华为1',price:200, amount:309},
                {id:3,name:'华为2',price:20, amount:309}
            ]
        });
    });
    
    module.exports = route;
    

    product.ejs

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table{
                /* 为表格设置合并边框模型 */
                border-collapse: collapse;
                width: 600px;
            }
            th,td{
                border:1px solid #ccc;
                height:40px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>产品列表</h2>
        <table>
            <tr>
                <td>编号</td>
                <th>产品名称</th>
                <th>单价</th>
                <th>库存量</th>
            </tr>
            <tr>
                <td><%=id%></td>
                <td><%=name%></td>
                <td><%=price%></td>
                <td><%=amount%></td>
            </tr>
            <% for(var i = 0;i < products.length;i++ ){ %>
            <tr>
                <td><%= products[i].id %></td>
                <td><%= products[i].name %></td>
                <td><%= products[i].price %></td>
                <td><%= products[i].amount %></td>
            </tr>   
            <% } %>
        </table>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 1.引入模块 "esri/tasks/GenerateRendererTask", "esri/tasks/GenerateRendererParameters", "esri/tasks/ClassBreaksDefinition", "esri/tasks/AlgorithmicColorRamp", 2.与前两个...
    1.引入模块
    			"esri/tasks/GenerateRendererTask",
                "esri/tasks/GenerateRendererParameters",
                "esri/tasks/ClassBreaksDefinition",
                "esri/tasks/AlgorithmicColorRamp",
    
    2.与前两个相比

    当数据量很大的时候,服务器渲染的速度明显快过客户端渲染。
    客户端和服务端的渲染都分为两种:唯一值渲染和分类渲染

    3.服务器分类步骤相比客户端较多,有层次
    1. 创建对象
    				var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
    				var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color("#FFFFCC"));
    				//创建服务器渲染对象
    				var RenderAnalyst = new GenerateRendererTask("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1");
    				//创建服务器渲染参数对象
    				var params = new GenerateRendererParameters();   
    				//创建颜色坡道对象
                    var colorRamp = new AlgorithmicColorRamp();
    
    1. 设置颜色位置、类型
    				//颜色的起始位置
                    colorRamp.fromColor = dojo.colorFromHex("#998ec3");
    				//颜色的终止位置
                    colorRamp.toColor = dojo.colorFromHex("#f1a340");
    				//颜色的类型
                    colorRamp.algorithm = "hsv";
    
    1. 渲染器样式、分类字段,怎么分,分几类
    				//渲染器样式
    				var unidef = new ClassBreaksDefinition();
    				//分类字段
    				unidef.classificationField = "Shape.STArea()";
    				//如何分类
                    unidef.classificationMethod="natural-breaks";
    				//几类
    				unidef.breakCount = 3;
    
    1. 显示分类符号,颜色,赋值渲染
    				//默认的符号
                    unidef.baseSymbol=fill;
    				//将自定义的颜色坡道告诉服务器
                    unidef.colorRamp=colorRamp;
    				//给渲染参数对象赋值
                    params.classificationDefinition = unidef;
    				//进行服务器渲染
                    RenderAnalyst.execute(params, showRender);		
    
    4.贴代码
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>GenerateRendererTask</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
        <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
        <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
        <style type="text/css">
            .MapClass{
                width:100%;
                height:500px;
                border:1px solid #000;
            }
        </style>
        <script type="text/javascript">
    
            require(["esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
    			"dojo/dom",
    			"dojo/on",
                "esri/tasks/GenerateRendererTask",
                "esri/layers/FeatureLayer",
                "esri/symbols/SimpleFillSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/tasks/GenerateRendererParameters",
                "esri/tasks/ClassBreaksDefinition",
                "esri/tasks/AlgorithmicColorRamp",
                "dojo/domReady!"], function
                    (Map,
                     ArcGISDynamicMapServiceLayer,
    				 dom,on,
                     GenerateRendererTask,
                     FeatureLayer,
                     SimpleFillSymbol,
                     SimpleLineSymbol,
                     GenerateRendererParameters,
                     ClassBreaksDefinition,
                     AlgorithmicColorRamp
                    ) {
                //服务器端渲染
                var MyMap = new Map("MyMapDiv");
                var layer = new ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/");
                MyMap.addLayer(layer)
    			//获得id为Btn的DOM对象
    			var btn=dom.byId("Btn");
    			//给btn绑定点击事件
    			on(btn,"click",function(e){
    				//定义线符号
    				var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
    				//定义面符号
    				var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color("#FFFFCC"));
    				//创建服务器渲染对象
    				var RenderAnalyst = new GenerateRendererTask("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1");
    				//创建服务器渲染参数对象
    				var params = new GenerateRendererParameters();   
    				//创建颜色坡道对象
                    var colorRamp = new AlgorithmicColorRamp();
    				//颜色的起始位置
                    colorRamp.fromColor = dojo.colorFromHex("#998ec3");
    				//颜色的终止位置
                    colorRamp.toColor = dojo.colorFromHex("#f1a340");
    				//颜色的类型
                    colorRamp.algorithm = "hsv";
    				//渲染器样式
    				var unidef = new ClassBreaksDefinition();
    				//分类字段
    				unidef.classificationField = "Shape.STArea()";
    				//如何分类
                    unidef.classificationMethod="natural-breaks";
    				//几类
    				unidef.breakCount = 3;
    				//默认的符号
                    unidef.baseSymbol=fill;
    				//将自定义的颜色坡道告诉服务器
                    unidef.colorRamp=colorRamp;
    				//给渲染参数对象赋值
                    params.classificationDefinition = unidef;
    				//进行服务器渲染
                    RenderAnalyst.execute(params, showRender);
    				
    				
    			});
    			//处理服务器返回来的结果
    			function showRender(renderer) {
    				
                    if (renderer != null) {
    					//定义要素图层,注意:这个地方我们用到并不是要素服务,而是地图服务
    					var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/demo/Practice/MapServer/1",{
    						mode:  FeatureLayer.MODE_SNAPSHOT,
    						outFields: ["*"]
    					});		
    					//赋予渲染器
                        featureLayer.setRenderer(renderer);
                        featureLayer.refresh();
                        MyMap.addLayer(featureLayer);
                    }
                }
            });
        </script>
    </head>
    <body>
    <div id="MyMapDiv" class="MapClass"></div>
    <input type="button" id="Btn" value="服务器渲染" />
    </body>
    </html>
    
    
    
    展开全文
  • 服务器渲染SSR

    2019-07-27 11:13:54
    web服务器:又称静态服务器,可以运行在浏览器中的服务器,通过后端语言+后端渲染模板—>生成前端html结构,然后发送到前端(后端渲染) 模式有: php java+jsp Node + html / ejs / pug —>html结构 —>...
  • 服务器渲染和浏览器渲染的区别

    千次阅读 2018-10-31 23:14:04
    这个工作放在服务器进行就是服务器渲染,放在浏览器进行就是浏览器渲染。 服务器端渲染,指的是后台语言通过一些模板引擎生成 html。 浏览器端渲染,指的是用 js 去生成 html,前端做路由。 浏览器端渲染路线: ...
  • 服务器渲染

    千次阅读 2019-02-26 12:48:36
    一、当前应用渲染模式 在前后端分离大规模应用之前,用户请求网页,都是后端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完整的 html 页面,再直接返回给浏览器,以便用户浏览。 由于近几年前后端...
  • 今天考虑一个项目性能问题的时候想到这个知识点,想着就梳理一下: SSR:Server side render 将组件或页面通过服务器...VUE 服务器渲染文档 SSR优点 例如SEO–因为访问一个请求,返回的就是页面全部的HTML结构...
  • 【转】从零开始React服务器渲染

    千次阅读 2017-02-13 19:03:53
    当我们选择使用Node+React的技术栈开发Web时,React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处:  1.利于SEO:React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构,...
  • 服务器渲染(后端渲染)浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。 传统的jsp、php都是属于服务器渲染。后端渲染的优势: 首屏性能好,不需要先下载一堆 js 和 ...
  • 客户端渲染和服务器渲染的区别

    千次阅读 2020-10-14 13:07:46
    客户端渲染和服务端渲染的区别一级目录二级目录三级目录 一级目录 二级目录 三级目录
  • 浏览器渲染和服务器渲染区别

    千次阅读 2018-05-27 13:42:11
    客户端渲染路线:1. 请求一个html -&gt; 2. 服务端返回一个html -&gt; 3. 浏览器下载html里面的js/css文件 -&gt; 4. 等待js文件下载完成 -&gt; 5. 等待js加载并初始化完成 -&gt; 6. js代码终于...
  • 前端:客户端渲染 vs 服务器渲染

    万次阅读 2016-03-09 11:25:54
    目前通常有两种选择:服务器渲染 与 客户端渲染 笔者是支持客户端渲染的(没错就是钦点的) 以 Jade, YAML 为代表的 模板渲染引擎 一般作用于 服务器 作为 后端 的 视图部分。 而使用 JavaScript 直接 处理 ...
  • vue服务器渲染nuxtjs

    千次阅读 2018-09-23 16:19:27
    但是
  • 静态化渲染和服务器渲染二者都为你的APP页面进行HTML渲染, 然而他们之间有个巨大的差异。。。 复制代码 也许你曾听过静态化渲染与服务器渲染,你也知道他们二者都可以提高SEO,让你的网站或者APP进行生成HTML页面。...
  • 服务器渲染 2.前后端分离 1.服务器渲染(SSR) 客户端请求,服务端的servlet或controller接收请求,后端控制路由与渲染页面,调用service,dao代码完成业务逻辑,返回jsp,jsp展现页面。 tips: servlet是在服务器上...
  • vue spa项目转服务器渲染

    千次阅读 2020-01-02 16:32:54
    最近有个项目本来是单页面的,但是现在的需求要做SEO,因为是动态数据所以确定做服务端渲染,不用客户端渲染。技术采用vue+nuxt.js+iview.js 配置vue全局组件: 在plugins/ 下新建global-components.js文件 // ...
  • 我又回来啦~这次我们来学习Vue的服务器渲染SSR。 关于SSR的文章网上很多,一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少。所以想...
  • 单页面网站,比如vue、recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面。 但是搜索引擎的爬虫可没有这么智能(实际上google...传统的服务器渲染是多...
  • 客户端渲染过程: 1)一个html请求; 2)服务器返回html请求; 3)下载css和js文件; 4)运行js文件,并且发出请求要求得到渲染的数据; 5)服务器返回数据; 6)客户端接受数据,并将数据加载到v-dom,然后再...
1 2 3 4 5 ... 20
收藏数 165,947
精华内容 66,378
关键字:

服务器渲染