ssr服务端渲染

最新推荐文章于 2025-03-26 18:21:14 发布

周朝兵

最新推荐文章于 2025-03-26 18:21:14 发布

阅读量398

点赞数

分类专栏： ssr服务端渲染

本文链接：https://blog.youkuaiyun.com/m0_45251955/article/details/106503234

版权

ssr服务端渲染专栏收录该内容

1 篇文章

订阅专栏

为什么要使用服务端渲染？

使用服务端渲染的目的是为了能够更加方便的让小蜘蛛去爬，爬到的关键字越多，网站就会越靠前。为啥关键字越多，网站越靠前呢？这个就要说到SEO了，SEO（Search Engine Optimization）又被称为搜索引擎优化，是一种利用搜索引擎的规则来提高网站在搜索引擎中的自然排名。使用服务端渲染的好处是前后端可以共享代码，前后端路由可以统一处理。当然，你如果给百度钱来提升排名，那就当我没说 _￣▽￣

安装

首先，安装express，用于配置服务端

npm install express --save

之后安装vue

npm install vue --save

安装vue中的ssr

npm install vue-server-renderer --save

配置服务端

const express = require("express");

const path = require("path");

const app = express();

app.use(express.static(path.join(__dirname,"../articcle")));//静态伺服

app.list(3000);

先来看一下客户端的渲染

客户端渲染

var list = ["腾讯","baidu","搜狐"];

function createElement(name){
    return document.createElement(name);
}

var ul = createElement("ul")

list.forEach(item => {
	var li = createElement("li")
	li.innerHTML = item;
	ul.appendChild(li);
})

document.body.appendChild(ul)

服务端渲染

服务端渲染简单来理解就是将客户端的渲染过程拿到服务端来进行渲染，然后得到返回的页面。

const express = request("express");
const path = request("path");
const Vue = request("vue");
const fs = request("fs");
//VUE中的ssr
const vueServerRender = request("vue-server-renderer")
//const render = vueServerRender.createRenderer();
//传递参数，配置模板
const render = vueServerRender.createRenderer({  //createRenderer   渲染函数
    template : fs.readFileSync("./index.template.html","utf8")
});

const app = express();

//静态伺服
app.use(express.static(__dirname,"../assets"))   //__dirname当前文件夹的路径

//模拟淘宝数据
const taobao = {
    title : "淘宝网 - 淘！我喜欢",
	description : "淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！",
	keyword : "淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"
}


app.get("/ssr",(req,res) => {
    const app = new Vue({
        template : "<div>{{content}}</div>",
        data : {
            content : "服务端渲染ssr"
        }
    })

    render.renderToString(app,{   //renderToString  渲染方法      app后面的那一个{}参数为可选参数，帮助我们传递参数的。
        title : `${taobao.title}`,
        description : `${taobao.description}`,
        keyword : `${taobao.keyword}`
    },(err,html) => {
        if(err){
            throw err;
        }
        res.end(html)
    })
})

app.get("/articcle",(req,res) => {
    const list = ["腾讯","百度","搜狐"];
    res.end(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <h1>首页2</h1>
            <ul>
                <li>${list[0]}</li>
                <li>${list[1]}</li>
                <li>${list[2]}</li>
            </ul>
        </body>
        </html>
    `)
})
app.listen(3000)

在渲染其他页面的时候，可以添加注释模板，添加注释模板需要注意的是要删除前后的空格。
在这里接收参数的时候要使用ssr的语法，分别为{{}}和{{{}}}，区别为{{}}会直接将内容拿过来，不会做解析，而{{{}}}会做解析

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 就要使用ssr的语法了 两个大花括号和三个大花括号 -->
	<title>{{title}}</title>
	<meta name="description" content="{{description}}">
	<meta name="keyword" content="{{keyword}}">
</head>
<body>
	<!--vue-ssr-outlet-->
</body>
</html>