什么是服务端渲染

准备一段数据conststr='你好，我是前锋教育的学生Thousand'torenderconstele=document.querySelector('.demo-box')ele.innerHTML=str打开浏览器，渲染完成后，我们在页面的一段js中显示数据。当然，这只是一个非常非常简单的渲染，我们来看稍微复杂一点的：准备一个html结构序列号名称简介准备一段数据constlist=[{id:1,title:'优秀的程序员',desc:'IT培训高端课程'},{id:2,title:'千峰教育',desc:'前端培训行业领跑者'},{id:3,title:'高薪就业',desc:'学IT，来前锋，拿高薪'}]开始渲染constele=document.querySelector('tbody')ele.innerHTML=list.reduce((prev,item)=>{returnprev+`${item.id}${item.title}${item.desc}`},'')打开浏览器，我们已经在页面上渲染了这个数组数据。有多种渲染方法。不管你用什么方法，只要数据显示在页面上，这种行为就叫做渲染。浏览器和服务器接下来，让我们谈谈浏览器和服务器。我们都知道浏览器就是我们通常所说的前端，它的任务是展示内容，而服务器就是我们通常所说的后端，它的任务是准备和处理数据。还有一种叫做数据库的东西，就是用来存储数据的。这个时候我们暂时忽略过程，看一下结果。这是我们从数据的来源到结果的展示。这里我们忽略这个过程。在这个过程中，我们有一个不可避免的问题，就是浏览器不能直接从数据库中取数据。所以，在这个模型中，我们还需要一个服务器的存储。前端不能操作数据库，但是服务端可以。那么前端想要什么数据，就告诉后端去数据库中查找对应的数据，拿到数据，整合处理，返回给前端。这时候前端就可以把数据Render在页面上了，看到这里，我们可能会想起来，这不就是我之前学的ajax吗？打开页面，通过ajax向服务器发送请求获取数据，然后在页面渲染响应体内容。你可以想到这里，说明你已经很好的掌握了前面的内容，接下来我们就开始进入正题。页面的前后端分离和服务端渲染也是服务端给定的。众所周知，我们的页面，也就是我们打开的html文件，也是存放在服务器上的。只不过我们在地址栏输入地址后，会根据相应的规则找到相应的服务器，得到html文件，由浏览器解析显示出来。不管是html文件，你所有的图片、影音、css、html、js文件其实都是存储在服务器上的。前后端分离其实就是前端做前端的事情，后端做后端的事情，也就是我们之前的情况。当您在地址栏中输入地址时，服务器会返回一个文件给您。文件运行时，通过执行内部js代码发送ajax请求，获取相应的返回数据，并将数据渲染到页面上。服务端渲染其实就是在服务端完成所有的工作，直接把结果发送给前端。刚才我们说了，页面等所有的文件其实都是存储在服务器上的。当你在地址栏输入地址的时候，服务器会找到你需要的html文件，但是先不给你，然后在当前文件中找到你需要的数据内容，然后把数据内容组装成一个html插入数据的页面直接返回给你，区分数据渲染和前端分离：后端返回数据给客户端，在客户端渲染。服务端渲染：你拿到的html源文件是所有写入数据的文件源文件前后端分离：你拿到的html源文件没有对应的渲染内容，需要依赖js渲染的执行服务端渲染：得到的html源文件是一个文件，所有的数据都写入了html页面之后，还需要等待ajax请求数据渲染完成。服务端渲染：得到的html就是完整的最终页面，可以直接展示。SEO前后端分离：由于页面没有结构，不利于搜索引擎抓取服务端渲染：得到的html是完整的内容，搜索引擎可以抓取所有的内容。比如：你家刚装修，需要买前后分离的床（你：前端，卖家：后端，厂家：数据库）你告诉卖家你要什么样的床，什么颜色等。卖家会去厂家定制所有的材料，然后卖家拿原材料寄到你家。这时候就需要自己组装了。一张床这时候你会发现，如果你想睡这张床，服务端渲染需要一点时间（你：前端，卖家：后端，厂商：数据库），并告诉卖家要什么床，什么颜色等等，卖家会去找厂家定制所有的材料。然后，卖家会在那里组装床，直接搬到你家。掀开车顶，把床放了进去。七火这时候就可以躺在床上睡觉了。总结●前端的工作是展示数据●后端的工作是处理数据。服务端渲染：前端负责铺平，后端负责数据和渲染。