vue/react服务端渲染实例

时间 2019-12-04

标签 vue react 服务渲染实例栏目 React 繁體版

原文原文链接

vue和react官方已经给出了服务器渲染的方法，两个框架自己也拥有服务器渲染的相应api，可是不管是next.js仍是nuxt.js，仍是说网上各类服务器端渲染的方案，我的认为都有很大的局限性，这对于咱们快速研发来讲很麻烦。javascript

现行服务器渲染缺点

最大的一点就在于前端代码和后端代码耦合太重。他们须要公用一部分生命周期，那么在这些生命周期中有一些对象是在服务器端才有的，有的是在浏览器端才有的，好比window对象等，这在写代码的时候感受超级不爽，我想在公用生命周期中使用localstorage等这些浏览器端才有的对象，是会直接报错的。php

而后学习成本，在语言的使用上，目前网上流行的服务器端渲染采用的方案绝大部分是使用nodejs进行渲染，有的研发不会nodejs只会java，这也会形成一部分的困惑和学习成本。css

而后就是代码构成。对于已经构建好的项目若是改为服务器端渲染，修改为本也是很是高的，有时候不亚于从新构建一个。html

重构服务器渲染

根据上面提出的一些缺点，我想了一个方案来解决，下面我先来讲一下具体实现的思路。前端

前端代码正常构建，而后打包生成文件，将打包后的文件放到后台渲染服务器的项目中。
后端添加和前端相同的路由，若是前端采用的不是问号加参数的方式（oecom.cn/article?id=… 而是经过动态路由匹配（oecom.cn/article/123 ），咱们能够采用路由匹配的方案来建立后台路由。
根据路由参数去接口服务器或者数据库、redis中查询得到数据，拼接成html，而后返回给页面，若是java则将打包后的index.html修改为jsp页面，经过el表达式渲染，若是是nodejs后台，则采用ejs等模板引擎来渲染
在页面中将服务器返回数据渲染到页面，同时将样式修改成：display:none，以保证用户看不到，可是爬虫能够看到

经过上面的思路想必你们应该明白了，其实这个方案也有必定的使用范围，若是是新闻稿件、我的博客等这种相似文章稿件的网站使用这种方式会特别的简单方便，无需重改前端代码，无须有共享耦合的代码，后台语言也相对比较灵活不管是java仍是php仍是nodejs均可以使用，前端框架也不局限于vue或react。若是是一个官网页面数据比较复杂，构成部分比较多，须要大量的异步获取，采用这种方案就比较麻烦，因此根据本身的须要酌情使用。vue

这个方案还有一个优势就是关键字、描述、title均可以进行服务器渲染，增长seo的效果，对于给爬虫看的样式并不须要添加，只是内容堆叠便可。java

构建示例

对于前端打包我在这里就不在赘述，我只来讲一下打包完成之后的示例，这里采用的依然是nodejs，使用其余语言的小伙伴可自行使用本身语言进行修改，原理都是相同的。node

<!doctype html>
<html lang="en">
<head>
    <% if(body) {%>
    <title><%=body?body.title:''%></title>
    <meta name="keywords" content="<%=body?body.keywords:''%>">
    <meta name="description" content="<%=body?body.abstract:''%>">
    <%}%>
    <% if(!body) {%>
    <title></title>
    <%}%>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" id="favIcon" href="/favicon.ico">
    <link href="/static/css/main.c36009f4.css" rel="stylesheet">
</head>
<body>
<% if(body) {%>
<div style="display:none">
    <h1><%=body.title%></h1>
    <div><%-body.content%></div>
    <h2>热门排行</h2>
    <div><%-hostHTML%></div>
</div>
<%}%>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.9c32e239.js"></script>
</body>
</html>
复制代码

上方代码是一个打包后的完整index页面，我在页面中经过模板语言来进行添加，判断是否有这个返回对象，若是有就进行渲染，渲染的部分样式设置为none，隐藏起来，并不进行多余的样式调整。react

再来看一下服务器端的代码web

//文章详情页
router.get('/article', function (req, res, next) {
    console.log("访问的是article");
    var params = url.parse(req.url, true).query;
    var pageId = params.pageId.split('_');
    var queryParams = {
        sid: params.sid ? params.sid : pageId[3],
        cid: pageId[1],
        aid: pageId[0]
    }
    common.getArticle(queryParams.sid,queryParams.cid,queryParams.aid, req, function (success, data) {
        if (success) {
               res.render('html', data);
         } else {
                res.render("error");
                return
         }
    }).catch(error=>{
    	res.render("error");
    });
});

复制代码

这部分代码我只是摘取了其中一个路由，而且前端路由采用的是用问号来添加参数的方式，咱们后台封装了获取文章稿件的方法，获取成功之后将内容拼接好返回，也就是上面返回的data，若是查询失败这个data就是null，这个data中不只包含TDK，也包含须要返回的文章稿件内容和热门排行。

添加热门排行的缘由是让爬虫在网站中自行按照之后连接进行爬取，加快网页收录速度并增长收录量。

后记

文章发表自：www.oecom.cn/vue-react-s…

欢迎加入qq群共同讨论：383711855