服务端渲染那些事儿

181 阅读2分钟

概述

随着Node技术的逐渐成熟,前端同学需要做的事情越来越多。从页面仔到现在不仅要负责页面相关的工作,还要负责服务端相关开发。包括但不止于Ng的路由转发接口开发用户信息转发服务端渲染等。本篇文章记录了在学习Vue服务端渲染中一些理解。

客户端渲染与服务端渲染

客服端渲染流程:客户端请求-->服务器返回基础HTML-->浏览器解析HTML-->遇到Ajax请求,再次发起请求--> 获取到响应数据,渲染数据【渲染页面会发起多个请求】

服务端渲染流程:客户端请求--> 服务端根据请求的路径,拼接相应的HTML-->浏览器解析HTML【首次渲染只需发一次请求,此一次请求,并非指涵盖静态资源请求】

服务端渲染与客户端渲染区别:

服务端渲染 客户端渲
首次渲染,请求次数 一次 多次
首屏渲染
搜索引擎优化(SEO) 友好 不友好
爬虫抓取 易抓取 难抓取
服务器开销 相对大 相对小

Vue SSR服务端渲染架构

对于需要做SEO优化的项目,通常会采用服务端渲染。当然尤大大Vue框架,也出SSR的功能。首先简述VueSSR项目,对于用户请求的简要过程:

Vue服务端渲染项目架构:

  • 页面端Vue全家桶
  • 服务端通过Nginx进行转发,讲请求根据路径,进行分配到Api道理服务器和渲染服务器。

总结

此篇文章主要介绍了,服务端渲染与客服端渲染的对比,以及对VueSSR渲染过程进行了记录。想了解更多的VueSSR相关,可以到官网中进行学习。如果自己不想搭建VueSSR项目,可以使用官方推出的Nuxt.js集成服务端渲染框架。为了更好了解其中,建议学习Koa/Express、webpack,进行了解。

使用掘金两年多了。首次发帖,希望不灌水。

参考