服务端渲染

最新推荐文章于 2024-06-17 09:18:10 发布

小北lulu

最新推荐文章于 2024-06-17 09:18:10 发布

阅读量314

点赞数

分类专栏： javascript vue

本文链接：https://blog.csdn.net/weixin_48786946/article/details/111309784

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

随着前端技术的不断发展，涌现了许多客户端渲染的前端框架，这些框架所构建的单页面应用的优点为：

用户体验好
开发效率高
渲染性能好
可维护性好

缺点为：

单页面应用的首屏渲染时间过长，与服务端渲染好的页面返回前端所不同的是，单页面应用是等待前端js编译完成才渲染页面，所以出现了首屏加载时间过长的问题
单页面不利于 SEO

解决方案：
在这里插入图片描述

同构应用

通过服务端渲染首屏直出，解决spa页面首屏渲染慢以及不利于seo
通过客户端渲染接管页面内容交互得到更好的用户体验
这种方式通常被称为现代化的服务端渲染，也叫做同构渲染
这种方式构建的应用成为服务端渲染应用或者是同构应用

什么是渲染？

把数据和模板拼接到一起,呈现给用户

{
  message:"xuke"
}
<h1>hello,{{message}}</h1>  //hello,xuke

传统的服务端渲染（SSR）
在这里插入图片描述

代码举例：
html 模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统的服务端渲染</title>
</head>
<body>
    <h2>传统的服务端渲染</h2>
    <p>{{title}}</p>
    <ul>
        {{each post}}
        <li>
            {{$value.name}}
        </li>
        {{/each}}
    </ul>
</body>
</html>

data.json

{
    "post":[
        {
            "id":1,
            "name":"xuke",
            "age":22
        },
        {
            "id":2,
            "name":"xuke2",
            "age":23
        },
        {
            "id":3,
            "name":"xuke3",
            "age":24
        },
        {
            "id":4,
            "name":"xuke4",
            "age":24
        },
        {
            "id":5,
            "name":"xuke5",
            "age":25
        }
    ],
    "title":"my name is xuke"
}

服务端代码 index.js
需要安装的插件 express art-template nodemon

const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
    // 获取页面模板
    const templates = fs.readFileSync('./index.html', 'utf-8')
    console.log(templates)
    // 获取数据
    const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
    console.log(data)
    // 渲染
    const artTemplate = template.render(templates, data)
    // 把渲染结果发送给客户端
    res.send(artTemplate)
})
app.listen(3000, () => {
    console.log("running...")
})

服务端渲染的缺点

前后端代码混合在一起，后端代码压力大
体验不够友好

客户端渲染（CSR）

随着 ajax 技术的诞生，服务端渲染的问题得到了有效的解决，使得客户端动态的获取数据，我们呢从以前服务端渲染的工作变成了客户端渲染
在这里插入图片描述

缺点

首屏渲染慢
不利于 SEO

为什么首屏渲染慢

由于客户端渲染首屏至少要经过三次的http请求，要消耗一定的时间，页面和js均需要请求，
在这里插入图片描述

而服务端渲染，是在服务端的时间已经把数据渲染好了，不用多余的请求，只需要请求一次就好了，所以首屏渲染要明显优于客户端
在这里插入图片描述

为什么不利于SEO

SEO：网站在搜索引擎中知道有什么，搜索对应的关键字的时候就可以搜索到你的网站，搜索引擎是通过机器程序获取网页的内容，
客户端渲染要通过解析js才渲染的我们通过机器读取的网页信息如下：
在这里插入图片描述

服务端渲染的时候我们通过机器解析的页面如下：
在这里插入图片描述

通过对比我们发现服务端渲染读取的信息更有利于机器识别，对于单页面应用来说，它的SEO几乎为0

SEO 技巧

合理的title、description、keywords
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
非装饰性图片必须加alt
友情链接，好的友情链接可以快速的提高你的网站权重
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到
少用iframe：搜索引擎不会抓取iframe中的内容

现代化的服务端渲染（同构渲染）

同构渲染 = 后端渲染 + 前端渲染

它是基于React 、 vue 等框架，客户端渲染和服务端渲染的相结合
• 在服务端渲染执行一次，用于首屏的渲染
• 在客户端渲染执行一次，用于接管页面交互
核心解决 SEO 和首屏渲染慢的问题
拥有了传统的服务端渲染的有点和客户端渲染的优点

如何实现同构渲染

使用vue，react等框架的官方解决方案
• 优点：有助于理解原理
• 需要搭建环境非常麻烦
使用第三方的解决方案
• react 生态的next.js
• vue 生态的 nuxt.js

同构渲染的问题

浏览器特定的代码只能在某些声明周期钩子函数中使用
一些外部扩展库可能需要特俗处理才能在服务端渲染应用中运行
不能在服务端渲染期间操作Dom

什么时候使用服务端渲染

首屏渲染速度是否真的需要
是否真的需要SEO

小北lulu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
服务端渲染

随着前端技术的不断发展，涌现了许多客户端渲染的前端框架，这些框架所构建的单页面应用的优点为：用户体验好开发效率高渲染性能好可维护性好缺点为：单页面应用的首屏渲染时间过长，与服务端渲染好的页面返回前端所不同的是，单页面应用是等待前端js编译完成才渲染页面，所以出现了首屏加载时间过长的问题单页面不利于 SEO解决方案：同构应用通过服务端渲染首屏直出，解决spa页面首屏渲染慢以及不利于seo通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常被称为现代化的服务端渲染，也
复制链接

扫一扫