十行代码实现React App 的SEO优化

时间: 2019-09-07阅读: 34标签: 渲染

搜索引擎真的需要已经预渲染的应用吗?

谷歌已经明确表示,他们会在抓取你的网站之前运行你的JavaScript代码。准确地说,他们的爬虫(crawler)中运用 Chrome 41浏览器打开网站,和真实用户用浏览器打开一样!但是还有其他搜索引擎和社交媒体网站可能并不会这么做。

我知道人们太关心搜索引擎优化了,总是试图尽可能地提高。很自然的,每个人都想在不运行任何JavaScript的情况下直接显示搜索引擎的内容。这不是一个坏主意,相信很多人都这么尝试过。

*这不仅有利于搜索引擎优化 *,而且还具一些性能优势。浏览器不必等待JS文件加载后才开始渲染,首次有效渲染(First Contentful Paint)的时间会更短。


React App 如何预渲染?

原理其实很简单,在我们使用npm run build构建React App后,我们用真实浏览器渲染build目录(通常是index.html), 然后获取产生的HTML代码保存到一个文件中,只是所有的内部页面都需要重复相同的操作。

感谢react-snap 让这一切变得简单。

  1. 在 dev 依赖中安装 npm i -D react-snap
  2. 在package.json 的 scripts 中添加"postbuild": "react-snap"
  3. 运行npm run build

What it will do is after the normal build, it will run react-snap which will render them in a Puppeteer browser, scrape content and generate new build.

在build之后,将运行react-snap,在无头浏览器(Puppeteer browser)中渲染,抓取内容并产生新的build。

{
  "scripts": {
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "skipThirdPartyRequests": true
  },
  "devDependencies": {
    "react-snap": "^1.23.0"
  }
}

和原作者一样,我在尝试react-snap的时候,也碰到了一些问题,例如著名的'Protocol error (Runtime.callFunctionOn): Object reference chain is too long' }, 一般在官方问题都能找到相应的解决方案,或者你选择StackOverFlow。

所以当我们在使用第三方脚本的时候,应该尽可能对他们多一些了解,比如有哪些限制或者是options, 请参考文档


链接: http://www.fly63.com/article/detial/5780

如何搭建一个高可用的服务端渲染工程?

可能大家在看到这个标题的时候,会觉得,只不过又是一篇烂大街的 SSR 从零入门的教程而已。别急,往下看,相信你或多或少会有一些不一样的收获呢。在落地一种技术的时候,我们首先要想一想:

vue单页面应用改造为多页面服务端渲染

正在开发中的项目是采用vue,Vue+router搭建的单页面应用,因2C项目有SEO的需求,就需要把当前的项目改为多页面+服务端渲染,调研之后使用了easywebpack-cli脚手架,基于Egg + Vue + Webpack4多页面服务端渲染项目

Vue渲染函数

使用v-else 指令来表示 v-if 的 else,v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面,否则它将不会被识别 :通常会复用已有元素而不是从头开始渲染(就近原则),key使得Vue渲染速度会变得非常快。

一文吃透React SSR服务端同构渲染

前段时间一直在研究react ssr技术,然后写了一个完整的ssr开发骨架。今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人少踩一些坑,让跟多的人理解和掌握这个技术。

Vue服务端渲染

所谓服务端渲染就是将代码的渲染交给服务器,服务器将渲染好的html字符串返回给客户端,再由客户端进行显示。有利于SEO搜索引擎优化,因为服务端渲染是将渲染好的html字符串返回给了客户端,所以其可以被爬虫爬取到;

浏览器渲染网页的流程

浏览器渲染网页的流程(HTML CSS JS):1.使用 HTML 创建文档对象模型(DOM)2.使用 CSS 创建 CSS 对象模型(CSSOM)3.基于 DOM 和 CSSOM 执行脚本(Scripts)

flutter: 根视图、根元素与根渲染

flutter如何建立的视图树(WidgetTree),元素树(ElementTree)及渲染树(RenderingTree),又是如何更新视图绘制视图? 这个问题太大,刚开始一切又都是陌生的,理解起来千头万绪,所以先搞清这些树的根结点的身份是非常必要的

CSS加载会阻塞DOM树的解析和渲染吗?

css加载不会阻塞DOM树的解析 ; css加载会阻塞DOM树的渲染 ;css加载会阻塞后面js语句的执行,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度

页面需要渲染10万条数据,应该怎么实现?

设置总数据源,页面内容数据存储容器,制定页面内容数据存储容器规则。用户滑到地6屏数据的时候,显然前面5屏数据不在可视窗口,那你可以将存储容器的前3屏数据删除。同时,再从总数据源取第11屏到第13屏数据。

用 node.js 模仿 Apache 的部分功能

首先,这个例子用到了服务端渲染的技术。服务端渲染,说白了就是在服务端使用模板引擎,这里我先简单的介绍一下服务端渲染与客户端渲染之间的区别

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全