简介
SlideLive网站的前端技术是Angular框架构建的SPA应用。SPA应用是一种客户端渲染技术,其工作原理是浏览器将js文件加载到浏览器中进行执行并渲染出html页面。对于SPA应用而言,目前Google和Bing搜索引擎可以很好的支持,能够有效的爬取网站的页面,但是国内的百度、头条等搜索引擎却不能很好地支持。为了便于百度等搜索引擎能够收录SlideLive网站,我们需要对网站进行页面静态化处理。本文将总结Angular应用页面静态化处理的几种技术。
SlideLive官网地址:https://www.slidelive.cn
技术方案
方案1:Angular Universal + 服务端渲染
标准的 Angular 应用会运行在浏览器中,它会在 DOM 中渲染页面,以响应用户的操作。 而Angular Universal 会在服务端运行,生成一些静态的页面,稍后再通过客户端进行启动。 这意味着该应用的渲染通常会更快,让用户可以在应用变得完全可交互之前,先查看应用的布局。
服务端渲染需要服务端部署Universal Web 服务器,它使用 Universal 模板引擎渲染出的静态 HTML 来响应对应用页面的请求。 服务器接收并响应来自浏览器的 HTTP 请求,并回复静态文件,如脚本、CSS 和图片。 它可以直接响应数据请求,也可以作为独立数据服务器的代理进行响应。
该方案的缺点:
-
需要改造Angular应用
-
需要在服务端进行部署
参考:Angular
方案2:Angular Universal + 预渲染
既然Angular应用可以基于Angular Universal进行服务端渲染,那么我们也可以使用Universal 模板引擎进行预渲染。
-
需要改造Angular应用
-
代码改动后需要进行编译以生成静态化页面,通常比较耗时
参考:Angular
方案3:基于prerender.io
prerender.io是一家SPA页面静态化的Sass商业公司,对于普通用户,它提供了500个静态化页面的处理能力。它的工作原理也很简单,就是对于爬虫的请求通过nginx分发到prerender.io的服务上,同时prerender.io如果已经将页面静态化,则直接返回;如果prerender.io还没有静态化处理该页面,则先使用服务端渲染技术进行静态化处理,并返回结果给爬虫,然后缓存静态化页面。对于普通的用户请求(通过浏览器发送),则nginx会按照正常的Angular请求逻辑,加载相应地代码到前端,并渲染DOM。以下是来自互联网上的一张示意图,能够很好地说明其工作原理。
参考:Middlewares - Prerender.io Knowledge Base
最终选择
通过对比分析,SlideLive网站最终还是选择了基于prerender.io这种商业化地技术方案,第一是比较简单,第二是它提供的基础服务基本能满足业务需求。以下给出相应的nginx配置:
# Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change 127.0.0.1:3000 to the backend address
worker_processes 1;
events {
worker_connections 1024;
}
http {
map $http_user_agent $prerender_ua {
default 0;
"~*Prerender" 0;
"~*googlebot" 1;
"~*yahoo!\ slurp" 1;
"~*bingbot" 1;
"~*yandex" 1;
"~*baiduspider" 1; # 百度蜘蛛
"~*toutiaospider" 1; # 头条蜘蛛
"~*360spider" 1; # 360蜘蛛
"~*sougouspider" 1; # 搜狗蜘蛛
}
map $args $prerender_args {
default $prerender_ua;
"~(^|&)_escaped_fragment_=" 1;
}
map $http_x_prerender $x_prerender {
default $prerender_args;
"1" 0;
}
map $uri $prerender {
default $x_prerender;
"~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)" 0;
}
server {
listen 80;
server_name example.com;
location / {
if ($prerender = 1) {
rewrite (.*) /prerenderio last;
}
proxy_set_header Host $SERVER_NAME;
proxy_set_header Connection "";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_hide_header Cache-Control;
add_header Cache-Control "public,max-age=31536000";
#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8 8.8.4.4;
#setting backend as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
set $backend "127.0.0.1:3000";
rewrite .* $uri break;
proxy_pass http://$backend;
}
location /prerenderio {
if ($prerender = 0) {
return 404;
}
proxy_set_header X-Prerender-Token YOUR_TOKEN;
proxy_hide_header Cache-Control;
add_header Cache-Control "private,max-age=600,must-revalidate";
#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8 8.8.4.4;
set $prerender_host "service.prerender.io";
proxy_pass http://$prerender_host;
rewrite .* /$scheme://$host$request_uri break;
}
}
}
总结
SlideLive是一款幻灯片在线播放和分享的网站,其前端基于Angular框架构建,为了搜索引擎优化,采用了prerender.io进行页面静态化处理。SlideLive官网地址:https://www.slidelive.cn