NUXT是一个基于Vue框架的框架,那为什么我们不直接适用Vue,而是使用NUXT呢,是因为它带来的数个好处
1. SSR (服务器端渲染)
前置知识:我们先介绍下 CSR (客户端渲染, Vue举例):一般情况下,用户发起一个请求后,服务器首先返回一个HTML,然后在返回一个JavaScript bundle, 用户接收到bundle后,渲染开始,渲染结束后,用户即可看到内容并进行交互了,之后该WebApp上的内容切换(定义在路由中的),则无需向服务端发起请求,而是由"Vue" (表述的不是很精确,但你懂我意思就好) 完成这个切换的工作。
由此也带来数个缺点:
- SEO (搜索引擎优化): 因为搜索引擎的爬虫是通过向服务器请求页面,并解析它们,拿到相关信息,而在 CSR 下,绝大部分内容|数据是被放在JavaScript bundle,这也意味着搜索引擎拿不到太多有用的信息。
- 用户体验也会收到影响,因为所有的渲染是放在客户端这篇的,有时这个过程是十分缓慢的,用户需要等待相当长的一段时间才能看到页面并操作
现在回到服务端渲染的讨论🔙
传统的服务器端渲染,是指当用户发起个请求,服务器端找到需要的文件,这是不是直接返回给客户端,而是在服务端进行渲染 ,最后将渲染后的静态页面返回给客户端,客户端就省去了渲染这个过程,但每次点击link都需要向服务器发起请求
2. 通用渲染 (可以看作是 服务器端渲染 和 客户端渲染的一个结合)
这里使用NUXT做例子,当用户发起个请求,客户端把需要的内容渲染后返回给客户端 (提高了首屏时间),之前的步骤可以看作是服务器端渲染。之后的步骤可以看作是客户端渲染,然后要说到一个比较重要的步骤:水和!服务器端会再传一个JavaScript文件,来实现Vue的功能性和交互性,比如后面的页面跳转就无需向服务器发送请求,而是由"Vue"来实现。所以可以说通用操作是服务器端渲染 和 客户端渲染的一个结合,克服了它们的一些缺点。
优点:
- 更好的搜索引擎优化
- 更好的首屏时间,带来更好的用户体验
- 最重要的是我们仍然能拿到SPA (Single page application) 的应用的所有好处 (通过水和这个步骤)