简介

SlideLive网站的前端技术是Angular框架构建的SPA应用。SPA应用是一种客户端渲染技术，其工作原理是浏览器将js文件加载到浏览器中进行执行并渲染出html页面。对于SPA应用而言，目前Google和Bing搜索引擎可以很好的支持，能够有效的爬取网站的页面，但是国内的百度、头条等搜索引擎却不能很好地支持。为了便于百度等搜索引擎能够收录SlideLive网站，我们需要对网站进行页面静态化处理。本文将总结Angular应用页面静态化处理的几种技术。

SlideLive官网：

技术方案方案1：Angular Universal + 服务端渲染

标准的 Angular 应用会运行在浏览器中，它会在 DOM 中渲染页面，以响应用户的操作。 而Angular Universal 会在服务端运行，生成一些静态的页面，稍后再通过客户端进行启动。 这意味着该应用的渲染通常会更快，让用户可以在应用变得完全可交互之前，先查看应用的布局。

服务端渲染需要服务端部署Universal Web 服务器，它使用 Universal 模板引擎渲染出的静态 HTML 来响应对应用页面的请求。 服务器接收并响应来自浏览器的 HTTP 请求，并回复静态文件，如脚本、CSS 和图片。 它可以直接响应数据请求，也可以作为独立数据服务器的代理进行响应。

该方案的缺点：

需要改造Angular应用需要在服务端进行部署

参考：

方案2：Angular Universal + 预渲染

既然Angular应用可以基于Angular Universal进行服务端渲染，那么我们也可以使用Universal 模板引擎进行预渲染。

需要改造Angular应用代码改动后需要进行编译以生成静态化页面，通常比较耗时

参考：

方案3：基于prerender.io

prerender.io是一家SPA页面静态化的Sass商业公司，对于普通用户，它提供了500个静态化页面的处理能力。它的工作原理也很简单，就是对于爬虫的请求通过nginx分发到prerender.io的服务上，同时prerender.io如果已经将页面静态化，则直接返回；如果prerender.io还没有静态化处理该页面，则先使用服务端渲染技术进行静态化处理，并返回结果给爬虫，然后缓存静态化页面。对于普通的用户请求（通过浏览器发送），则nginx会按照正常的Angular请求逻辑，加载相应地代码到前端，并渲染DOM。以下是来自互联网上的一张示意图，能够很好地说明其工作原理。

参考：

最终选择

通过对比分析，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 addressworker_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 ;        }        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 ;            rewrite .* /$scheme://$host$request_uri break;        }    }}

SlideLive是一款幻灯片在线播放和分享的网站，其前端基于Angular框架构建，为了搜索引擎优化，采用了prerender.io进行页面静态化处理。SlideLive官网：