简介

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 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 IPsresolver 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 balancingset $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 IPsresolver 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！