NUXT SSR初级入门笔记(小结)

2023-08-04 12:03:04 57

nuxt是基于vue开发的一个应用框架，最常用的就是拿来做ssr。那么什么是ssr呢，这就要提及一个相对的概念：csr。

CSR&SSR

web网页开发从之前的jsp，php转向现在的三大框架angularreactvue，其实就是从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项目的初始化

使用以下命令调用脚手架生成项目，脚手架选项按需选择就可以了：

npxcreate-nuxt-app<项目名>

生成的目录结构如下：

.nuxt

运行缓存目录

assets

资源目录，用于存放如css文件，js文件，图片

components

组件目录，用于存放vue组件

layouts

布局目录，用于设置布局，文件名即为布局名

在pages目录里的组件可以通过layout属性指定布局组件，不指定默认为default。

布局组件中使用标签指定应用布局时，page组件所在的位置。

middleware

中间件目录，用于设置中间件函数，文件名即为中间件名

在pages目录里的组件可以通过middleware属性指定中间件函数，中间件会在组件渲染前执行

pages

页面目录，用于设置路由页面，目录下的vue文件会自动生成相应的路由配置

如以下目录结构对应的配置：

pages/
--|_slug/
-----|comments.vue
-----|index.vue
--|users/
-----|_id.vue
--|index.vue

router:{
routes:[
{
name:'index',
path:'/',
component:'pages/index.vue'
},
{
name:'users-id',
path:'/users/:id?',
component:'pages/users/_id.vue'
},
{
name:'slug',
path:'/:slug',
component:'pages/_slug/index.vue'
},
{
name:'slug-comments',
path:'/:slug/comments',
component:'pages/_slug/comments.vue'
}
]
}

nuxt中使用代替了

nuxt会为page组件提供额外的配置项，常用到的如下：

layout指定当前页面使用的布局（layouts根目录下的布局文件）。
validate校验方法用于校验动态路由的参数。
middleware指定页面的中间件函数，中间件函数会在页面渲染之前被调用，也可以指定为middleware文件夹内的中间件名。
asyncData支持异步数据处理，拿来为page组件请求异步数据，返回对象中的data会覆盖到组件的data中。
fetch用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是fetch方法不会设置组件的数据。

plugins

插件目录，用于引入第三方模块，

如element-ui.js：

importVuefrom'vue'
importElementfrom'element-ui'
importlocalefrom'element-ui/lib/locale/lang/en'

Vue.use(Element,{locale})

然后可以在nuxt.config.js中的plugins中引入：

plugins:[
'@/plugins/element-ui'
],

server

服务端目录

static

静态文件目录

store

vuex目录，index.js为主文件，其他文件默认会配置成module模块，默认启用namespace。

文件形式为：

exportconststate=()=>({
//state
})

exportconstactions={
//actions
}

exportconstmutations={
//mutations
}

在index.js的actions中可以配置nuxtServerInit，可以用来将数据从服务端传到客户端。

具体使用

创建项目如下：

运行初始项目，效果如下：

使用布局

在layouts下新建文件myLayout.vue

然后我们在pages下新建文件layoutDemo.vue

访问localhost:3000/layoutDemo，布局效果如下：

使用中间件

例如我们实现一个未登录拦截跳转的中间件：

在middleware中新建auth.js

exportdefaultfunction(ctx){
//eslint-disable-next-lineno-constant-condition
if(true){//ctx判断得到未登录
ctx.redirect({path:'/'})
}
}

再在layoutDemo.vue中加上middleware:'auth'，这样访问该页面就会拦截跳转回主页面。

用asyncData实现ssr

我们再在pages中新建页面ssr1.vue

这里我们list1是用传统的vue方式获取异步数据，list2用asyncData获取异步数据

然后我们在server中写接口，应为node还是采用require的方式，如果我们想使用import的方式，可以安装babel-cli和babel-preset-env,新建配置文件.babelrc:

{
"presets":["env"]
}

然后在package.json里将dev命令加上后缀--execbabel-node,server中书写node就可以使用import了。

然后安装koa-router，在index.js里加入以下代码：

importRouterfrom'koa-router'

//以下代码加在start函数内的原有的app.use之前
constrouter=newRouter()
router.get('/list',(ctx)=>{
ctx.body={
list:['a','b','c']
}
})
app.use(router.routes()).use(router.allowedMethods())

然后访问页面，两个列表都正常渲染

我们右键查看源代码：

list2通过asyncData的方式实现了ssr。

使用nuxtServerInit实现ssr

我们新建页面ssr2.vue

然后在store中新建index.js

exportconststate=()=>({
list:[]
})

exportconstmutations={
setList(state,value){
state.list=value
}
}

exportconstactions={
asyncnuxtServerInit({commit},{app}){
const{status,data:{list}}=awaitthis.$axios.get('/list')
if(status===200){
commit('setList',list)
}
}
}

重新npmrundev,访问localhost:3000/ssr2

查看源代码，也正确渲染

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

NUXT SSR初级入门笔记(小结)

Iamheader

Iamlayoutdemo

随机推荐

NUXT SSR初级入门笔记(小结)

Iamlayoutdemo

热门推荐

随机推荐