How to use prerender on your website?

https://prerender.io/documentation

It’s a simple way to test prerender, maybe you need change some code in your project.

1. Singup a account at https://prerender.io
2. Setup a prerendertest directory,like below:
/prerendertest/data.php
/prerendertest/index.html

/prerendertest/data.php

    {
    "records":[
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
    {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
    {"Name":"Around the Horn","City":"London","Country":"UK"},
    {"Name":"B's Beverages","City":"London","Country":"UK"},
    {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
    {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
    {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
    {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
    {"Name":"Bon app'","City":"Marseille","Country":"France"},
    {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
    {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
    {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
    {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
    {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
    ]
    }

/prerendertest/index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="fragment" content="!">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    </head>
    <body>
 
    <div ng-app="myApp" ng-controller="customersCtrl">
 
    <table>
      <tr ng-repeat="x in names">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table>
 
    </div>
 
    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("/prerendertest/data.php")
        .then(function (result) {
            $scope.names = result.data.records;
        });
    });
    </script>
 
    </body>
    </html>

3. Config your nginx
Reference here https://gist.github.com/thoop/8165802

4. Visit http://xxx.com/prerendertest/index.html?_escaped_fragment_=, then view source of the html

Related posts:

Leave a Reply

Your email address will not be published.