概述
随着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,进行了解。
使用掘金两年多了。首次发帖,希望不灌水。