无事来学学--服务渲染技术Nuxt了解引入

简介: 什么是服务端渲染SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据

什么是服务端渲染


SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据。


优势:


主要在于:更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题

可以获得更快的内容到达时间(time-to-content),无需等待所有的 JavaScript都完成下载并执行,产生更好的用户体验,对于那些内容到达时间(time-to-content)与转化率直接相关的应用程序而言,服务器端渲染(SSR)至关重要。


小拓展



seo是一种网站优化技术,也被叫做搜索引擎优化,可以利用搜索规则提高网站上有关搜索的自然排名,主要表现为微博热搜控榜等。通过seo技术,可以实现一系列的商业行为,对产品品牌进行宣传收益。”


Nuxt是什么?


Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。


Nuxt使用(整合elementUI)


  1. 下载压缩包

github.com/nuxt-commun…将template中的内容复制到 工程目录中 修改package.json中name、description、author内容

  1. 在编辑器终端中进入项目目录安装依赖 npm install

npm run dev 就可以启动了

引入Element-ui 终端中进入项目安装依赖 npm install element-ui

2.创建plugin文件夹,在该文件中编写myplugin.js文件信息

import Vue from 'vue'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
复制代码
  1. 在nuxt.config.js文件中使用myPlugin.js
plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]
复制代码
  1. 最后npm run dev
目录
相关文章
|
7月前
|
数据采集 前端开发 JavaScript
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
|
4月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法:如何轻松驾驭前端代码,让维护变得轻而易举?
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件,提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册,并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法,强调了组件化开发在实际项目中的重要性。
50 1
|
4月前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
80 1
|
4月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
214 0
|
7月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
前端开发
#yyds干货盘点 【React工作记录三十一】dva.js初识
#yyds干货盘点 【React工作记录三十一】dva.js初识
104 0
#yyds干货盘点 【React工作记录三十一】dva.js初识
|
前端开发
【React工作记录六十五】ant design子组件渲染不能及时渲染
【React工作记录六十五】ant design子组件渲染不能及时渲染
144 0
|
算法 JavaScript 索引
Vuejs设计与实现 —— 渲染器核心 Diff 算法(上)
Vuejs设计与实现 —— 渲染器核心 Diff 算法
76 0
|
存储 算法 JavaScript
Vuejs设计与实现 —— 渲染器核心 Diff 算法(下)
Vuejs设计与实现 —— 渲染器核心 Diff 算法
95 0
|
JavaScript 前端开发 API
vue3 源码学习,实现一个 mini-vue(十一):组件的设计原理与渲染方案
在实现了 `ELEMENT`、`COMMENT`、`TEXT` 节点的挂载后,我们最后再来实现一下组件的挂载与更新
vue3 源码学习,实现一个 mini-vue(十一):组件的设计原理与渲染方案
下一篇
DataWorks