详解服务端预渲染之Nuxt（介绍篇）

2024-11-26 07:45:27

现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前后台分离，给项目SEO带来很大的不便，搜索引擎在检索的时候是在网页中爬取数据，由于单页面应用读取到的页面是几乎空白的，无法爬取到任何数据信息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>authorization_web</title>
  </head>
<body>
  <div id=app></div>
</body>
</html>

如上代码，单页面应用查看源代码的时候如上所示，所以搜索引擎无法爬取到任何信息，搜索引擎会认为当前页面为一个空页面。为了解决SEO问题，推出了SSR服务端预渲染，以便提高对SEO优化。

什么是SSR

在认识SSR之前，首先对CSR与SSR之间做个对比。

首先看一下传统的web开发，传统的web开发是，客户端向服务端发送请求，服务端查询数据库，拼接HTML字符串（模板），通过一系列的数据处理之后，把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,PHP,aspx也就是传统的MVC的开发。

SPA应用，到了Vue、React，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式javaScript渲染出来的，称之为客户端渲染CSR。SPA渲染过程。由客户端访问URL发送请求到服务端，返回HTML结构（但是SPA的返回的HTML结构是非常的小的，只有一个基本的结构，如第一段代码所示）。客户端接收到返回结果之后，在客户端开始渲染HTML，渲染时执行对应javaScript，最后渲染template，渲染完成之后，再次向服务端发送数据请求，注意这里时数据请求，服务端返回json格式数据。客户端接收数据，然后完成最终渲染。

SPA虽然给服务器减轻了压力，但是也是有缺点的：

首屏渲染时间比较长：必须等待JavaScript加载完毕，并且执行完毕，才能渲染出首屏。
SEO不友好：爬虫只能拿到一个div元素，认为页面是空的，不利于SEO。

为了解决如上两个问题，出现了SSR解决方案，后端渲染出首屏的DOM结构返回，前端拿到内容带上首屏，后续的页面操作，再用单页面路由和渲染，称之为服务端渲染(SSR)。

SSR渲染流程是这样的，客户端发送URL请求到服务端，服务端读取对应的url的模板信息，在服务端做出html和数据的渲染，渲染完成之后返回html结构，客户端这时拿到的之后首屏页面的html结构。所以用户在浏览首屏的时候速度会很快，因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于SPA应用了，它仍然是一个独立的spa应用。

SSR是处于CSR与SPA应用之间的一个折中的方案，在渲染首屏的时候在服务端做出了渲染，注意仅仅是首屏，其他页面还是需要在客户端渲染的，在服务端接收到请求之后并且渲染出首屏页面，会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。

Nuxt.js 介绍

在Nuxt官方网站有一句这样的话：Nuxt.js预设了使您开发Vue.js应用程序所需的所有配置。Nuxt是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础框架的抽象组织，Nuxt主要关注的是应用的ui渲染。

通过上面的这些介绍可以简单的得出：

Nuxt不仅仅用于服务端渲染也可以用于SPA应用的开发
利用Nuxt提供的项目结构、异步数据加载，中间件的支持，布局等特性可大幅提升开发效率
Nuxt可用于网站静态化，可以使用命令将整个网页打包成静态页面，使SEO更加友好

Nuxt.js 特性

基于Vue
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
EcmaScript6和EcmaScript7的语法支持
打包和压缩JavaScript和Css
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预编译器SASS、LESS等等
支持HTTP/2推送

Nuxt 渲染流程

一个完整的服务器请求到渲染的流程

通过上面的流程图可以看出，当一个客户端请求进入的时候，服务端有通过nuxtServerInit这个命令执行在Store的action中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到Store中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中。之后使用了中间件机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。然后再validate执行的时候对客户端携带的参数进行校验，在asyncData与fetch进入正式的渲染周期，asyncData向服务端获取数据，把请求到的数据合并到Vue中的data中，

Nuxt说明

Nuxt安装：

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

npx create-nuxt-app <项目名>

安装向导：

Project name                // 项目名称
Project description             // 项目描述
Use a custom server framework        // 选择服务器框架
Choose features to install         // 选择安装的特性
Use a custom UI framework          // 选择UI框架
Use a custom test framework         // 测试框架
Choose rendering mode            // 渲染模式
  Universal                  // 渲染所有连接页面
  Single Page App               // 只渲染当前页面

这些都是比较重要的其他的配置内容就不做介绍了，一路回车即可。

目录结构介绍

assets       // 存放素材(需要执行webpack预处理操作)
components     // 组件
layouts       // 布局文件
static       // 静态文件(不需要webpack预处理操作)
middleware     // 中间件
pages        // 所有页面
plugins       // 插件
server       // 服务端代码
store        // vuex

配置文件

const pkg = require('./package')
module.exports = {
 mode: 'universal',  // 当前渲染使用模式
 head: {    // 页面head配置信息
  title: pkg.name,    // title
  meta: [     // meat
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { hid: 'description', name: 'description', content: pkg.description }
  ],
  link: [   // favicon，若引用css不会进行打包处理
   { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
 },
 loading: { color: '#fff' },  // 页面进度条
 css: [  // 全局css（会进行webpack打包处理）
  'element-ui/lib/theme-chalk/index.css'
 ],
 plugins: [    // 插件
  '@/plugins/element-ui'
 ],
 modules: [    // 模块
  '@nuxtjs/axios',
 ],
 axios: {},
 build: {   // 打包
  transpile: [/^element-ui/],
  extend(config, ctx) {    // webpack自定义配置
  }
 }
}

Nuxt运行命令

{
 "scripts": {
  // 开发环境
  "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
  // 打包
  "build": "nuxt build",
  // 在服务端运行
  "start": "cross-env NODE_ENV=production node server/index.js",
  // 生成静态页面
  "generate": "nuxt generate"
 }
}

结语

这里简单的对Nuxt做了一些介绍，会持续更新对Nuxt的跟进，希望会对大家有所帮助，如果有什么问题，可以在下面留言。

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

服务端预渲染之Nuxt(使用篇)

现在大多数开发都是基于 Vue 或者 React 开发的,能够达到快速开发的效果,也有一些不足的地方, Nuxt 能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前页面. 首先要说明一点,我们可以认为我们所编写的 Vue 项目是一个服务端的项目,虽然编写的还是 Vue 项目,但是 Nuxt 是基于服务器环境的. 就简单的说一下 Nuxt 使用.基础只是还是以官方文档为主,如果博客中哪里有问题,欢迎留言指正. 说了这么多,进入正题. 路由与传统的 Vue 项目不同的是,我们在使用
详解服务端预渲染之Nuxt（介绍篇）

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=&quo
Android socket实现原理详解服务端和客户端如何搭建

本文实例为大家分享了Android socket的实现原理,供大家参考,具体内容如下 Socket套接字是网络上具有唯一标识的IP地址和端口号组合在一起才能构成唯一能识别的标识符套接字. socket实现的原理机制: 1.通信的两端都有Socket 2.网络通信其实就是Socket间的通信 3.数据在两个Socket间通过IO传输建立Socket(客户端)和ServerSocket(服务器端) 建立连接后,通过Socket中的IO流进行数据的传输关闭socket 同样,客户端与服务器端是两
详解盒子端CSS动画性能提升

流畅动画的标准理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms. 直观感受,不同帧率的体验帧率能够达到 50 - 60 FPS 的动画将会相当流畅,让人倍感舒适: 帧率在 30 - 50 FPS 之间的动画,因各人敏感程度不同,舒适度因人而异: 帧率在 30 FPS 以下的动画,让人感觉到明显的卡顿和不适感: 帧率波动很大的动画,亦会使人感觉到卡顿. 盒子端动
详解React的回调渲染模式

一.一个简单的小例子 1.父组件 <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter> 2.子组件框架 import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetc
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍

一. 什么是 CSRF ? CSRF是Cross Site Request Forgery的缩写,看起来和XSS差不多的样子,但是其原理正好相反,XSS是利用合法用户获取其信息,而CSRF是伪造成合法用户发起请求.具体操作原理看google.. 二.Laravel的CSRF防御过程 Laravel 会自动在用户 session (根据session_id 关联确认属于谁) 生成存放一个随机令牌(token)放在session中,并且如果使用 Laravel 的 {{form::open}} 会自
详解Java 包扫描实现和应用(Jar篇)

如果你曾经使用过 Spring, 那你已经配过包扫描路径吧,那包扫描是怎么实现的呢?让我们自己写个包扫描上篇文章中介绍了使用 File 遍历的方式去进行包扫描,这篇主要补充一下jar包的扫描方式,在我们的项目中一般都会去依赖一些其他jar 包, 比如添加 guava 依赖 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <ve
详解pytorch中squeeze()和unsqueeze()函数介绍

squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的数去掉第一个维数为一的维度之后就变成(3)行.squeeze(a)就是将a中所有为1的维度删掉.不为1的维度没有影响.a.squeeze(N) 就是去掉a中指定的维数为一的维度.还有一种形式就是b=torch.squeeze(a,N) a中去掉指定的定的维数为一的维度. 再看torch.unsque
详解pytest实现mark标记功能详细介绍

mark标记在实际工作中,我们要写的自动化用例会比较多,也不会都放在一个py文件中,如果有几十个py文件,上百个方法,而我们只想运行当中部分的用例时怎么办? pytest提供了一个非常好用的mark功能,可以给测试用例打上各种各样的标签,运行用例时可以指定运行某个标签.mark功能作用就是灵活的管理和运行测试用例. 标签既可以打到方法上,也可以打到类上,标记的两种方式: 直接标记类或方法或函数:@pytest.mark.标签名类属性:pytestmark = [pytest.mark.
详解Next.js页面渲染的优化方案

在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题.由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它.乘着农历春节前工地活少所以稍微研究一下. 第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象? Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,

详解服务端预渲染之Nuxt（介绍篇）

相关推荐

随机推荐