Nuxt.js框架(SSR)学习笔记

1.概念

1.1-SSR和CSR、spa

• SSR:serve side render,服务端渲染技术
• CSR:client side render,客户端渲染技术
• SPA：spa是单页面应用程序, vue 框架 是一种语法而已。只是一种spa的技术实现， react 也是spa技术的一种实现。

1.2-Nuxt

是一个 实现服务端渲染（SSR） 的开发框架 (*只不过语法类似vue而已*)，Vue官方介绍：Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。

2.Nuxt.js创建项目的区别

2.1-如何创建一个nuxt.js的项目？

通过官网提供的脚手架工具：create-nuxt-app

我们只需要运行命令：npx create-nuxt-app projectname，然后选择你需要的一些插件组件库服务等后之后就可以成功创建一个Nuxt项目啦！

2.2-Nuxt项目和普通vue项目的区别

• 一个是 nuxt的项目, nuxt 是 使用vue语法的一种 实现ssr 技术的框架, 它是服务端渲染技术ssr
• 一个是普通的vue项目,它是客户端渲染技术csr

具体区别可以通过F12检查元素对比他们的HTML结构看出来

3.服务端渲染技术(SSR)和客户端渲染技术(CSR)的优缺点

3.1-服务端渲染技术(SSR):

• 优点：
  • 1.尽量不占用前端的资源，前端这块耗时少，速度快。
  • 2.有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。
• 缺点：
  • 1.不利于前后端分离，开发的效率降低了
  • 2.对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

3.1-客户端渲染技术(CSR)

• 优点:
  • 1.前后端分离，开发效率高。
  • 2.用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
• 缺点:
  • 1.前端响应速度慢，特别是首屏，这样用户是受不了的。
  • 2.不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

4.总结

1. 客户端渲染是 吃火锅, 厨房将厨具和原材料都交给客人,客人自己煮
2. 服务端渲染是 吃炒菜, 厨房将原材料在厨房内做好,才端出来,客人拿到了可以直接吃
3. spa是单页面应用程序, vue 框架 是一种语法而已。只是一种spa的技术实现， react 也是spa技术的一种实现。
4. 客户端 是csr , 服务端端是ssr ,vue 是语法, nuxt 是 使用vue语法的一种 实现ssr 技术的框架而已