Prerender（JavaScript 网站静态化）
搜索引擎经常试图来抓取我们的网站，但是搜索引擎不能执行 JavaScript 脚本，Prerender 服务就是来解决这一问题。Prerender 可以对这些使用了前端渲染的 JavaScript 框架做的网站进行良好的 SEO 优化。
基于 SEO 这样的场景，Prerender 是一个采用phantomjs的服务，它是可以对 JavaScript 页面进行静态化。我们在 prerender.io 网站上有专门的服务提供给大家，并且我们将源代码开放出来，因为我们认为 SEO 技术是属于大家的并不是属于个人的。
它可以结合一些中间件库来搭建一个预渲染 HTML 的服务给搜索引擎抓取。我们可以通过 Rails 或者 Node 开始学习它。
Prerender 支持 Google 的_escaped_fragment_，我们建议你这样使用。非常简单：
在你的页面的
<head>中增加<meta name="fragment" content="!">标签；如果你的站点采用锚点路有技术(#)，将它们改为(#!);
OK！现在你的 JavaScript 页面可以完美支持 SEO 了；
Prerender 有很多插件，例如采用 Amazion S3 来缓存你的静态 HTML 页面。Prerender 还可以开启多个 phantomjs 进程来增加吞吐量。
中间件
Prerender 服务有很多中间件可以使用：
官方中间件
Javascript
prerender-node (Express)
Ruby
prerender_rails (Rails)
Apache
Nginx
社区中间件
PHP
zfr-prerender (Zend Framework 2)
YuccaPrerenderBundle (Symfony 2)
Laravel Prerender (Laravel)
Java
Go
Grails
Nginx
Apache
需要更多的不同框架的中间件请点击issue。
Prerender 是如何工作的
这是一个使用简单的服务，只需要输入一个 url 就可以得到被渲染好的 HTML（所有的<script>标签都去除了）。
注：这个请求需要通过你的服务器代理，这样那些引用的 CSS、图片等其它静态资源才能正常工作。
GET http://service.prerender.io/https://www.google.com
GET http://service.prerender.io/https://www.google.com/search?q=angular
在本地运行 Prerender
如果你想在本地测试 Prerender，那么你可以在本地运行 Prerender 服务，这样 Prerender 可以访问你本地开发的网站。
如果你在本地运行了 Prerender 服务，请确保你的中间件指向本地的 Prerender 服务：
export PRERENDER_SERVICE_URL=<your local url>
$ git clone https://github.com/prerender/prerender.git$ cd prerender $ npm install $ node server.js// also supports heroku style invocation using foreman$ foreman start
Prerender 将运行在http://localhost:3000地址上。你可以访问http://localhost:3000/http://localhost:8000地址来查看你的网站最终的渲染的样子。
请记住你将会看到一些相对的 URL，因为访问的域名是你的 Prerender 服务器。这并不存在问题，因为一旦请求被代理到中间件，然后这个域名将会成为你的网站，并且那些请求不会发送到 Prerender 服务器。如果你想访问相对 URL 来访问网站，像这样访问：http://localhost:8000?_escaped_fragment_=
部署到 heroku
$ git clone https://github.com/prerender/prerender.git $ cd prerender $ heroku create $ git push heroku master
如果将 Prerender 安装在 Windows 环境，你会遇到关于'node-gyp'的错误，你需要按照以下步骤解决：https://github.com/nodejs/node-gyp#installation。
定制化
你可以通过克隆这个项目来运行server.js，或者用npm install prerender --save来创建一个类似于 express 的服务。
插件
我们采用类似于 Connect 和 Express 的方式的一套插件系统，Prerender 的插件有一些不一样，并且我们不希望它与 prerender 中间件产生混淆，所以我们给他们命名为�“插件”。
插件都存储在lib/plugins文件夹下面，它可以为 prerender 服务增加各种功能。
每个插件能够实现以下方法：
init()
beforePhantomRequest(req, res, next)
onPhantomPageCreate(phantom, req, res, next)
afterPhantomRequest(req, res, next)
beforeSend(req, res, next)
如何使用插件
你可以通过解除在server.js中的注释来启用插件。
prerender.basicAuth()
如果你知允许有权限的一方才能访问 Prerender 服务，启用 basicAuth 插件，并且设置用户名和密码即可：
xport BASIC_AUTH_USERNAME=prerenderexport BASIC_AUTH_PASSWORD=test
然后确保能够通过身份验证（密码需要 base64 编码）。
curl -u prerender:wrong http://localhost:1337/http://example.com -> 401curl -u prerender:test http://localhost:1337/http://example.com -> 200
prerender.removeScriptTags()
去除 script 标签是因为我们并不想让已经渲染好的 HTML 再被 Javascript 框架渲染，爬虫或许不会执行脚本。
例如，如果一个基于 Angular 的页面已经被渲染成了 HTML，但是还保留 Angular 脚本在页面上，浏览器将在页面上有一次执行 Angular 进行渲染并且绑定数据。
这个插件实现了beforeSend方法，因此被缓存的 HTML 页面仍然包含 script 标签。
prerender.httpHeaders()
如果脚本路由过程中发现了类似于404的错误，我们可以让 Prerender 服务给搜索引擎返回404，这样搜索引擎将不会收录这个页面。
如果想要返回 HTTP Headers，增加如下标签在页面的<head>中。注：Prerender 仍然发送页面的 HTML，它仅仅是改变了 HTTP Header 的状态码。
例如：让 Prerender 返回404页面：
<meta name="prerender-status-code" content="404">
例如：让 Prerender 返回302跳转：
<meta name="prerender-status-code" content="302"><meta name="prerender-header" content="Location: http://www.google.com">
prerender.whitelist()
如果只允许访问指定的域名，使用这个插件会让其它域名返回404。我们可以在这个插件中增加白名单域名，或者用ALLOWED_DOMAINS环境变量：
export ALLOWED_DOMAINS=www.prerender.io,prerender.io
prerender.blacklist()
如果我们不允许指定的域名访问，使用这个插件会让这些域名返回404。我们可以在这个插件中增加黑名单域名，或者用BLACKLISTED_DOMAINS环境变量：
export BLACKLISTED_DOMAINS=yahoo.com,www.google.com
prerender.s3HtmlCache()
GET 请求会检查 S3 缓存，如果发现已经被缓存将直接返回缓存的内容，否则请求会发送到服务器并将渲染出来的 HTML 缓存到 S3 缓存。
POST 请求会跳过 S3 缓存，请求会发送到服务器并将渲染出来的 HTML 缓存到 S3 缓存。也就是说 POST 一直在更新缓存。
我们需要登录到 AWS 服务器上并且设置如下3个环境变量：
$ export AWS_ACCESS_KEY_ID=<aws access key> $ export AWS_SECRET_ACCESS_KEY=<aws secret access key> $ export S3_BUCKET_NAME=<bucket name>
注意！设置的这些 KEY 必须保证私有的，而且需要设置所有的文件并上传到 S3。
prerender.Region()
默认情况下 s3HtmlCache 时区是美国东部区，如果我们的存储在本地而非美国东部区，可以通过设置环境变量AWS_REGION来解决：
$ export AWS_REGION=<region name>
例如：
$ export AWS_REGION=eu-west-1
prerender.inMemoryHtmlCache()
注意每个进程都会有本地内存缓存，如果我们采用多线程 Prerender 运行时，这些缓存并不公用。
本地内存缓存插件很容易将它变成缓存系统，并且它和cache-manager Nodejs 插件非常兼容。
比如如下请求：
GET http://service.prerender.io/https://www.facebook.com/
首次耗时：00:00:03.3174661
用了缓存后耗时：00:00:00.0360119
prerender.logger()
通过这个插件可以打印出日志，对调试有非常大的帮助。
prerender.mongodbCache()
这个插件可以将页面缓存到 MongoDB 数据库，点击这个链接：prerender-mongodb-cache
prerender.memjsCache()
这个插件可以将页面缓存到 Memcache 服务，点击这个链接：prerender-memjs-cache
prerender.levelCache()
这个插件可以将页面缓存到 levelDB 数据库，点击这个链接：prerender-level-cache
prerender.accessLog()
这个插件可以将请求日志保存到 access，点击这个链接：prerender-access-log
共同学习，写下你的评论
评论加载中...
作者其他优质文章
