Nuxtjs相关概念

一 Nuxtjs:

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架,不需要自己搭建一套 SSR 程序,而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

Nuxt.js 是一个 Node 程序,必须使用 Node 环境。我们对 Nuxt.js 应用的访问,实际上是在访问这个 Node.js 程序的路由,程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码,而路由是由 Nuxt.js 约定好的 pages 文件夹生成的。

 

二 服务端渲染与预渲染、客户端渲染:

1 预渲染:用户请求前的服务器渲染即为。

2 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。比如JSP、PHP、JavaWeb等都是SSR架构,也就是服务端取出数据和模板组合生成 html 输出给前端,前端发生请求时,重新向服务端请求 html 资源,路由也由服务端来控制。

3 客户端渲染:单页应用框架(React、Angular、Vue),vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成html挂载于id为app的DOM元素上。客户端渲染问题:

  1. 由于资源请求量大,造成网站首屏加载缓慢,不利于用户体验。
  2. 由于页面内容通过js插入,对于内容性网站来说,搜索引擎无法抓取网站内容,不利于SEO。

 三 Nextjs与Nuxtjs区别:他们都是一个框架,预先帮你做好了服务端渲染需要做的事情。

Next.js: Next.js 是一个轻量级的 React 服务端渲染应用框架。

Nuxt.js: Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

 四 同构应用:

1  同构应用:利用服务端渲染解决首屏加载慢和不利于SEO的缺陷,首屏渲染完成之后,客户端渲染接管页面重新成为单页应用以保证良好的用户体验。这种方式称为现代化服务端渲染方式或者同构渲染。

2 同构应用与单页应用相比,由于首屏渲染采用的是服务端渲染,所以存在以下缺点:

  1. 开发条件有限,开发有限制(服务端只能使用nodejs,而且并不是所有的工具包都能在服务端渲染中使用)。
  2. 涉及构建和部署的要求高(需要部署客户端和服务端,不能再和单页应用一样,部署静态站点即可)。
  3. 更多的服务端负载。

原文地址:https://www.cnblogs.com/terrymin/p/15620580.html