预渲染prerender-spa-plugin首页闪烁

2024-08-18

prerender-spa-plugin预渲染踩坑

为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html 第二,nuxt 简单易用,参考网站 https://zh.nuxtjs.org/guide/installation 前端做优化: 第三,vue-meta-info + pre

Prerender.io - 预渲染架构，提高AngularJS SEO

近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多的优势: 前端和后端独立开发 JavaScript框架+RESTFUL的API(或微服务架构) SPA(Single Page Application) 某种程度上有利于提高开发效率但是使用JavaScript框架对前台尤其是需要支持搜索引擎的页面是很有问题的,这是因为我们使用这些框架基本上都是基

什么是服务端渲染、客户端渲染、SPA、预渲染，看完这一篇就够了

服务端渲染(SSR) 简述: 又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML. 鼠标右击点击查看源码时,页面代码可以在源代码中看到. 性能消耗在服务器端,用户达到一定程度的时候,后端会考虑缓存部分数据,避免消耗过多的资源重复渲染. 优点: 前端耗时少,首次渲染快,更快的内容到达时间利于SEO 缺点: 网络传输数据量大,占用部分服务器运算资源用户体验差

Vue项目预渲染机制

我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染(Prerending). 如果你只需要改善少数页面(例如首页/, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染, SSR),而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HT

vue预渲染及其cdn配置

VUE SEO方案一 - 预渲染及其cdn配置项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE,预渲染和SSR还是要搞起来. 1.原理为什么做服务端渲染之前先去了解了预渲染呢?因为预渲染方案相比服务端渲染简单太多了,而且并不是所有项目都需要服务端渲染的. 预渲染是怎么实现的呢?原理很简单,在项目开发完成之后,将有限的需要SEO的页面挑选出来,借助prerender-spa-plugin插件

vue项目使用 prerender-spa-plugin 预渲染

由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使用第一步:修改配置文件webpack.prod.conf.js 在 const webpackConfig = merge(baseWebpackConfig, {plugins: [ new webpack.DefinePlugin({ new PrerenderSpaPlugin(// Req

vue(初探预渲染)

---恢复内容开始--- 一.前言 1.简介预渲染 2.案例演示(不配置预渲染) 3.配置预渲染, 二.主要内容 1.简介预渲染 SPA有很多优点,但是对搜索引擎SEO不友好,目前主要有两种方式来解决这个问题: 服务端渲染,预渲染就像官网所说,如果你只需要改善少数页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染,

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T 声明: 以下配置只保留有必要的生成目录这里使用base代替,请自行修改 vue-cli模板使用webpack,其他模板类推 webApp - 在线预览 Github - 配置了预渲染的demo 1. 简介与使用场景我们知道SPA有很多优点,

HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）

前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而言,使用单页面应用的是无法被百度的蜘蛛爬到的,为此,众多流行的 MVVM 框架都推出了很多解决方案,有官方的也有三方的,VUE也不例外,本文章就来分享一下 vue-cli 结合 prerender-spa-plugin 插件这种预渲染的 SEO 优化解决方案 1,使用 vue-cli 创建一

Vue-cli使用prerender-spa-plugin插件预渲染和配置cdn

参考:https://www.jianshu.com/p/6a4c0b281e7f 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr和预渲染两种解决方案,这里我们只讨论预渲染. 此教程使用的prerender-spa-plugin版本和vue版本 vue-cli有2.0和3.0版本,解决方法是不一样的,这里我们要分开讨论. vue-cli3.0版本 3.0的cli看上去简洁多了,去掉了2.0 build和config等目录,那我们怎么去修改webpack的配置

服务端预渲染之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

vue 预渲染遇到的坑

前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerender-spa-plugin,使用淘宝镜像安装 cnpm cnpm install prerender-spa-plugin -D -D 表示在开发环境下使用 cnpm 淘宝镜像安装可以避免安装过程无端报错 2.预渲染一定要把路由模式变成history const router = new Route

prerender-spa-plugin Vue预渲染配合meta-info优化seo

记录一下解决方案的过程先安装prerender和puppeteer插件这个国外大神写的 github地址就不附上了(百度有) cnpm install prerender-spa-plugin npm install --save puppeteer --ignore-scripts 这里注意一定要用cnpm代理下载不然下载不到chromium 安装好之后注意在package.json上查看版本号不同版本号有不同的写法这个一定要注意(可以上github上查看不同版本的写

vuejs 预渲染插件 prerender-spa-plugin 生成多页面 -- SEO

前端vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种: 1.SSR服务器渲染了解服务器渲染请进,这里不做记录. 2.预渲染模式这比服务端渲染要简单很多,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求 TIPS: 使用预渲染vue-router必须使用history模式 // 安装 npm install prerender-spa-plugin --save 然后在webpack.prod

vue的预渲染--seo

项目用的是vue,spa,用这个很简单,但是头疼的是重要的seo优化.第一反应是服务器端渲染,但是个人搞了半天后感觉有点难,在项目时间有限的情况下,只能寻找另外的方法,把这个留给项目后在研究. 先用vue-cli起项目:(未安装的自己先安装:npm install -g vue-cli) vue init webpack demo cd demo npm install npm run dev 然后安装prerender-spa-plugin (n

Vue-Cli3.0 单页面如何预渲染，解决登录拦截导致无法部分路由无法预渲染问题？

vue单页面不利于seo,如何解决已有spa项目seo问题? 1.安装 cnpm install prerender-spa-plugin --save-dev 2.路由history模式 const router = new Router({ mode: 'history' }) 3.vue.config.js 中的配置 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderS

前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）

一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢.麻省理工学院的 Richard Larson 在讲话中指出,"人类将被动等待高估了 36%"(https://mazey.cn/t/em).这意味着用户感觉到的等待时间比开发工具记录的长得多. 1.2 看起来卡(体验) 页面结构不断调整,不连贯.抖动的页面往

基于 SSR 的预渲染首屏直出方案

基于 SSR 的预渲染首屏直出方案 Create React Doc 是一个使用 React 的 markdown 文档站点生成工具.此前在 Create React Doc 中引入了预渲染技术来预先生成对应路由的静态页面,以使基于其搭建的文档站点能享用到 SEO(Search Engine Optimization) 同时加快了首屏访问加载. 新的挑战 Create React Doc 使用预渲染技术获取各页面路由对应的 DOM 结构以生成对应的 HTML 文件,并将静态文件存放于 gh-pa

vue-cil 服务端预渲染 prerender-spa-plugin

众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案1.SSH服务器端渲染2.预渲染由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度.而且配合一些meat插件,基本可以满足SEO需求下面就来简单介绍一下在webpack.prod.conf const PrerenderSpaPlugin = require('prerender-spa-plugin') const webpackConfig = merge(baseWebpa

预渲染prerender-spa-plugin首页闪烁

热门专题