NUXT SSR初级入门笔记初级入门笔记(小结小结)
主要介绍了NUXT SSR初级入门笔记(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一
定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
nuxt 是基于 vue 开发的一个应用框架,最常用的就是拿来做 ssr。那么什么是 ssr 呢,这就要提及一个相对的概念:csr。
CSR & SSR
web网页开发从之前的 jsp,php 转向现在的三大框架 angular react vue,其实就是从 csr 到 ssr 的转变,即从服务端渲染转
而变为客户端渲染。
有使用经验的大概知道,例如之前的 php 开发,是将网页内容和服务端代码逻辑写在一起的,在客户端请求时,服务端经过
php 引擎的渲染生成完整的 html 页面再返回给客户端,这种渲染出的页面在浏览器中右键查看源代码都是能看见 页面全部的
html 代码的。而客户端渲染如 vue,返回的就只有一个挂在 app 节点的 html文件和一个 js 文件,页面的内容都是在客户端的
js 渲染生成的。所以 渲染 html 文本所在的位置就是 CSR(客户端渲染) 和 SSR(服务端渲染) 最本质的区分 。
既然web开发从 ssr 过渡到了 csr,那我们为什么又再去做 ssr 呢,这就要涉及到双方的优缺了:
SSR::
优点:
便于 SEO,渲染完整的 html 更利于搜索引擎的抓取。
页面加载的白屏时间短(几乎没有)。
缺点:
每加载一个页面都要对服务器发起一次请求,服务器的渲染负荷重,请求缓慢。
每次加载都会刷新页面,即使只是页面中的小区域需要改变。
CSR::
优点:
页面具有优秀的性能,更利于页面交互。
缺点:
不利于SEO
首页初始化加载白屏时间长。
在我们普遍使用三大框架的今天,如果我们的页面需要对 SEO 的良好支持,这就需要我们做 ssr 了。 NUXT 项目的初始化
使用以下命令调用脚手架生成项目,脚手架选项按需选择就可以了:
npx create-nuxt-app <项目名>
生成的目录结构如下:
.nuxt
运行缓存目录
assets
资源目录,用于存放如 css 文件,js 文件,图片
components
组件目录,用于存放 vue 组件
layouts
布局目录,用于设置布局,文件名即为布局名
在 pages 目录里的组件可以通过 layout 属性指定布局组件,不指定默认为 default。