sap网站简单实现服务端渲染，轻松解决单页面应用SEO问题

js功能越发强大，单页面网站已经出现很久。sap的优点很多，这个理不在赘述。但是seo的不友好是sap最大的缺点。

目前sap的seo方案的方案就是ssr(server side render),ssr会使原本的前端代码复杂化，对前端开发人员要求高。也有一些ssr框架，比如基于vue的nuxt、基于react的next。虽然简化了ssr的开发，但是也比原有的vue和react开发复杂，而且还是可能会有坑。

还有一种服务端渲染方案，比上面方案简单，是在服务端安装headless chrome(chromium),再使用nodejs库 puppeteer库调用chromium接口，渲染页面。最后通过nginx根据请求的 user_agent识别是否是爬虫，如果是，转发给用puppeteer实现的服务端渲染的server。

直接使用puppeteer也麻烦，需要使用puppeteer写服务转发请求到chrome，还要在服务端安装chrome。作为一个懒人，当然希望有更简单的方法。后来在puppeteer的github页面 https://github.com/zenato/puppeteer-renderer 发现有打包好的docker镜像，这就简单多了。

使用docker安装服务端渲染服务

如果不会使用docker，自行百度。

直接执行docker命令，8080端口就是渲染服务的端口

docker run -d --name renderer -p 8080:3000 zenato/puppeteer-renderer

配置nginx

 server {
    listen       80;
    server_name  0.0.0.0;// 网站地址

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 根据user-agent判断是否爬虫，规则可以根据不同搜索引擎的user-agent自行调整
        if ($http_user_agent ~* "spider|bot") {
            # 设置querystring 参数 url=http://0.0.0.0，渲染页面服务的地址，需要url ecode
            set $args "url=http%3a%2f%2f0.0.0.0";
            proxy_pass http://0.0.0.1:8080; # 部署渲染服务docker的地址
        }
        try_files $uri $uri/ @router; # 不是搜索引擎，转发到@router
        
    }
    location @router {
        rewrite ^(.*)$ /index.html last; sap应用的index html页面
    }  
}

启动nginx，访问网站，正常用户就可以访问sap页面，搜索引擎访问服务的渲染的也面。sap 网站不能使用“#”的hash模式，必须使用history模式，不然无法生效。hash模式本身也不符传统，所以即使不做服务的渲染，也不建议使用。