VUE基于NUXT的SSR 服务端渲染

news/2024/7/10 0:35:26 标签: vue

Server Side Rendering(服务端渲染)

SSR 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。

原理

将 html 在服务端渲染,合成完整的 html 文件再输出到浏览器。

适用场景

  • 客户端的网络比较慢
  • 客户端运行在老的或者直接没有 JavaScript 引擎上

NUXT 

作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现 SSR。

可以作为一个 Node.js 应用跑在服务器上,也可以把整站直接编译为静态 HTML。另外这个框架支持自动生成路由,用来写展示型的页面是非常不错的选择。

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

NUXT 能为我们做什么

  • 无需再为了路由划分而烦恼,你只需要按照对应的文件夹层级创建 .vue 文件就行
  • 无需考虑数据传输问题,nuxt 会在模板输出之前异步请求数据(需要引入 axios 库),而且对 vuex 有进一步的封装
  • 内置了 webpack,省去了配置 webpack 的步骤,nuxt 会根据配置打包对应的文件

安装流程

$ npm install -g vue-cli
 
$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install
 
$ npm run dev

Nuxt.js 会监听 pages 目录下的改变,添加新 page 的时候不需要重启服务

Next.js
来自Zeit的团队在React的基础和组件模型上构建了Next.js,同时还提供了一个关键扩展:通过使用名为getInitialProps()的组件生命周期钩子方法,框架能够在服务器上进行初始渲染,如果需要的话,还可以在客户端继续进行渲染。不过这个高级特性是一个很小却功能强大的框架所额外提供的。

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

Next提供了非常丰富的生态环境,特别是它的example,包含了多种情况下的源码,让学习者很容易搭建起一个多功能的Next框架,客户端有的东西,服务端基本都有。

webpack的各项配置,Next集成了webpack的很多配置,热更新是必备品,还支持提供next.config.js的方式导入自己定义的配置。
你可以使用less、scss、style-in-Component、css等各种样式写法。
支持redux、redux-saga、或者不用。
各种图片的支持都包含在webpack中了。
支持自定义的babelrc配置。
对于react的版本的支持也在维护者的维护中不断更新。
支持preact。
简单易用,就跟写 PHP 一样一个文件一个页面了,但缺点也很明显,其实它是通过改变正常 React + webpack 的代码书写习惯来绕过前后端同构的坑,所以也引入了一些新的问题:

图片等静态文件只能放在 static 目录下,不能通过 require 来引入,也就是没办法通过 webpack 来进行模块化管理,如果各个组件有自身依赖的图片,也只能一股脑放 static 里,也很难实现版本管理控制浏览器缓存。
样式同样也没办法通过 webpack 进行模块化管理,只能通过 style 标签嵌入或直接内联。
简单地说,很适合快速搭建简单站点,但自由度不高,且带样式或图片的 React 组件无法直接使用,个人看法是一个用自由度和通用性来换取易用性的框架。

其他方法

Google 可以正常爬取和渲染一个纯 js 动态生成的网站,上传 sitemap 就可以了。

直接生成静态页面由 CDN 分发。有些新技术还可以在 static gen 同时支持 pwa,比如 gatsbyjs。

掘金是未登录用户使用 SSR,不错的思路。

要分清楚什么时候用 mvvm,mvvm 其实就是 modelview 非常方便定义页面的各种逻辑和改变页面数据,如果是传统的网站,前端没啥逻辑,就没有必要上 mvvm


http://www.niftyadmin.cn/n/1300999.html

相关文章

软件测试术语

V模型体现了设计分层和测试分层的概念&#xff0c;本文以作者自身的理解谈谈测试执行分层&#xff0c;不过从实际项目运作情况来看&#xff0c;真正做到测试执行分层的并不多&#xff0c;这里原因有很多种&#xff0c;暂且不论。 1. UT 单元测试(Unit Test)的对象是LLD中所划分…

帧同步游戏开发小结

本文发表于程序员刘宇的个人博客&#xff0c;转载请注明来源&#xff0c;https://www.cnblogs.com/xiaohutu/p/12402399.html 这几年做了一些网络同步项目&#xff0c;总结一下帧同步的一些东西。 1. 帧同步基本特点 所有的逻辑行为运算都在客户端进行&#xff0c;客户端保证…

深入解析Vue CLI 3.0脚手架如何mock数据

前后端分离的开发模式已经是目前前端的主流模式&#xff0c;至于为什么会前后端分离的开发我们就不做过多的阐述&#xff0c;既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中&#xff0c;由于后台接口的没有完成或者没有稳定之前我们都是采用…

pngquant压缩中文路径文件夹

ZipDir.bat&#xff1a; echo %1 echo %~n1 echo off & color 0A ::指定起始文件夹 set DIR %1 echo DIR%DIR%setlocal enabledelayedexpansion set /a a0echo !a!:: 参数 /R 表示需要遍历子文件夹,去掉表示不遍历子文件夹 :: %%f 是一个变量,类似于迭代器,但是这个变量只…

Java文件名规则与 main

1.如果文件中只有一个类,Java文件名必须与类名一致; 2.一个Java文件中只能有一个public类; 3.如果文件中不止一个类,文件名必须与public类名一致;

Unity实现震屏效果(屏幕抖动)

文章转载自&#xff1a;https://blog.csdn.net/wafcc9/article/details/83057533 通过设置相机的Viewport Rect 来实现,将下面的脚本挂在相机上&#xff0c;设置enabledtrue就可实现屏幕震动效果。 using System.Collections; using System.Collections.Generic; using Unity…

JS动态创建对象的属性详解

面向对象的JavaScript在客户端编码时提供了极大的灵活性&#xff0c;Javascript对象上的属性有助于设置可在对象内使用以管理和使用数据的值。 我对JavaScript中属性的理解&#xff0c;在javascript中&#xff0c;可以通过在文字对象上定义变量来创建属性。 例如 var obj {p…

Socket 之TCP UDP

Socket 本质是编程接口(API)&#xff0c;对TCP/IP的封装&#xff0c;TCP/IP也要提供可供程序员做网络开发所用的接口&#xff0c;这就是Socket编程接口&#xff1b;HTTP是轿车&#xff0c;提供了封装或者显示数据的具体形式;Socket是发动机&#xff0c;提供了网络通信的能力。…