详细讲解服务器预渲染的Nuxt(简介)

目前前端开发一般与前端分离，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之前，我们应该对企业社会责任和SSR进行比较。

首先，看一下传统的web开发。在传统的web开发中，客户端向服务器发送请求，服务器查询数据库，拼接HTML字符串(模板)，经过一系列数据处理后，将排序后的HTML返回给客户端。浏览器相当于打开一个页面。这种我们经常听到的jsp、PHP、aspx，也是传统的MVC开发。

SPA应用，在Vue和React中，单页应用的优秀用户体验逐渐成为主流，整页javaScript渲染称为客户端渲染CSR。SPA渲染过程。客户端访问URL向服务器发送请求，并返回HTML结构(但SPA返回的HTML结构很小，只有一个基本结构，如第一段代码所示)。客户端收到返回的结果后，开始渲染HTML，渲染时执行相应的javaScript，最后渲染模板。渲染后，它再次向服务器发送数据请求。注意这里的数据请求，服务器返回json格式的数据。客户端接收数据并完成最终渲染。

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

第一个屏幕需要很长时间才能渲染：第一个屏幕只能在加载并执行JavaScript后才能渲染。SEO不友好：爬虫只能得到一个div元素，认为页面是空的，不利于SEO。为了解决上述两个问题，出现了SSR解决方案。后端渲染第一个屏幕的DOM结构，前端拿着内容带来第一个屏幕，后面是页面操作，然后用单个页面进行路由和渲染，称为服务器端渲染(SSR)。

SSR渲染过程如下：客户端向服务器发送url请求，服务器读取对应URL的模板信息，在服务器上渲染html和数据，渲染后返回html结构，然后客户端得到第一个屏幕页面的html结构。因此，用户可以非常快速地浏览第一个屏幕，因为客户端不需要再次发送ajax请求。并不是说我们的页面在SSR后不属于spa应用，但它仍然是一个独立的SPA应用。

SSR是企业社会责任和SPA应用程序之间的折衷。渲染第一个屏幕时，它会在服务器上渲染。请注意，这只是第一个屏幕，其他页面仍然需要在客户端呈现。在服务器收到请求并呈现第一个屏幕页面后，它将携带剩余的路由信息，并被保留给客户端来呈现其他路由页面。

Nuxt.js简介

Nuxt官网上有一句话：Nuxt.js预置了你开发Vue.js应用所需的所有配置。Nuxt是基于Vue.js的通用应用框架，通过对客户端/服务器基础设施的抽象组织，Nuxt主要关注应用的ui渲染。

通过以上介绍，可以简单地得出结论：

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

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

从服务器请求到呈现的完整过程

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

Nuxt描述

Nuxt安装：

确保安装了npx(在NPM版本5.2.0中默认安装了npx):

npx create-nuxt-app项目名称的安装向导：

项目名称//项目名称项目描述//项目描述使用自定义服务器框架//选择服务器框架选择要安装的功能//选择已安装的功能使用自定义UI框架//选择UI框架使用自定义测试框架//测试框架选择渲染模式//渲染模式通用//渲染所有连接的页面Single Page App //只渲染当前页面，这些都很重要，所以不介绍其他配置内容，一路按回车即可。

目录结构介绍

资产//存储材料(需要网络包预处理)组件//组件布局//布局文件静态//静态文件(不需要网络包预处理)中间件//中间件页面//所有页面的插件//插件服务器//服务器代码存储//vuex配置文件

Const pkg=require('。/package’)模块。导出={mode:' universal '，//当前呈现模式head 3360 {//页面头配置信息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: [//global css(将执行webpack打包)' element-ui/lib/theme-chake/index . CSS ']。

{'scripts': {//开发环境' dev' :' cross-env node _ env=开发节点mon server/index.js-watchserver '，//package ' build ' : ' nuxt build '，//在服务器上运行' start' :' cross-env node _ env=生产节点server/index.js '，//生成静态页面' generate': 'nuxt generate' }}结论

本文简单介绍一下Nuxt，会不断更新Nuxt的后续，希望对大家有所帮助。如果你有任何问题，可以在下面留言。

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