Nuxt3初探(一)

·  阅读 490
Nuxt3初探(一)
  • Nuxt3是什么?
  • Nuxt3有什么用?
  • Nuxt3怎么用?

1. 是什么?

nuxt3官网将其定义为the hybrid vue framework——基于vue的混合框架。作为一个框架,nuxt3将对开发者提出一些约束规范。学习和遵循这些规范,nuxt3所封装、实现的一些优秀特性将会为我们带来高效易维护的开发体验。值得注意的是目前Nuxt3还处理beta版,官方并不建议投入生产使用。

2.有什么用?

要想理解nuxt3,或者说认知某个新事物,了解其用途是最直接有效的方式。在搞明白nuxt3有什么用之前需要理解一下两个概念:

  • SPA

SPA(single page web application),即单页面应用。使用Vue开发的项目就是一个典型的单页面应用(尽管可以通过打包配置多个入口文件,但本质上作为入口的页面将承担多个页面的渲染),也就是说使用浏览器实际访问vue搭建的网站中,用户看到的所有不同页面其实都是渲染在APP.vue这一个文件中的。

SPA便于页面由数据驱动,页面内容改变时无需重新加载整个页面;不会存在页面切换导致的白屏。但是单页面应用缺点也很明显:

  1. 首屏加载速度慢,且应用越大首屏加载速度越慢,有白屏现象
  2. 由于页面时数据驱动,客户端需要先请求一次页面‘骨架’(创建一个app.vue的实例),然后才是页面内容(网页数据)的异步请求。这将导致诸如百度等搜索引擎无法获取到网页内容,不利于seo优化
  • SSR

SSR(Server Side Render),即服务端渲染,与之相对的是CSR(客户端渲染)。客户端渲染是将js代码经过浏览器的解析渲染在服务器返回的一个html模板上,也就是SPA使用的方式。因为node的出现使得js也完全可以在运行在服务器上,js文件解析成渲染的内容这一步的工作现在可以交由服务端完成(这一步在实际实现中需要有相应的框架来处理浏览器和服务器的差异)。

服务端渲染的方式,浏览器请求到的网页资源将是一个标准的html文件。PS:我在初次接触SSR服务端渲染这一概率中十分不理解SSR和CSR的差异性,将‘渲染’这一动作理解为‘js文件解析为html字符’便豁然开朗。

Nuxt3能有效的解决SPA首屏加载慢、白屏,SEO优化难的痛点,对标React中的nextjs在Vue中实现SSR。当然这只是Nuxt3的较为耀眼的部分,此外它也具备很多优秀的特性,将在后续学习使用的过程中记录使用感受。

3.怎么用?

怎么用从广义上讲这是一个较为广泛且难以回答的问题,狭义上说需要弄明白使用步骤。目前nuxt3处于beta版,官网已发布大部分使用文档。我将在后续学习使用Nuxt3的过程中记录学习使用心得,和对其新特性的感受。

初次写作,如果谬误恳请斧正,不吝赐教。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改