sgtaziz/blazar

pre-render pages on the fly

Blazar

, _(*1)

Automate pre-rendering pages on the fly through utilizing PhantomJs which runs in the background when needed without adding any overhead to the server nor to the user experience., _(*2)

, _(*3)

Installation

• install PhantomJs, _(*4)

• composer require ctf0/blazar, _(*5)

• (Laravel < 5.5) add the service provider to config/app.php, _(*6)

'providers' => [
    ctf0\Blazar\BlazarServiceProvider::class,
]

• publish the package assets

php artisan vendor:publish --provider="ctf0\Blazar\BlazarServiceProvider", _(*7)

• add the middlewares to app/Http/Kernel.php

protected $middlewareGroups = [
    // ...
    \ctf0\Blazar\Middleware\Blazar::class,
];

protected $routeMiddleware = [
    // ...
    'dont-pre-render' => \ctf0\Blazar\Middleware\DontPreRender::class,
];

• the package use caching through Redis to store the rendered results, so make sure to check the docs for installation & configuration.

, _(*8)

Config

config/blazar.php, _(*9)

return [
    /*
     * phantomjs bin path
     */
    'phantom_path' => '',

    /*
     * phantomjs script path
     *
     * leave it empty to the use the one from the package
     */
    'script_path' => '',

    /*
     * phantomjs options
     */
    'options' => '--ignore-ssl-errors=true --ssl-protocol=any --disk-cache=false --debug=true 2>&1',

    /*
     * prerender the page only if the url is being visited from a bot/crawler
     */
    'bots_only' => false,

    /*
     * log the url when its processed by phantomjs
     */
    'debug' => true,

    /**
     *  clear user cache on logout
     */
    'clear_user_cache' => true
];

, _(*10)

Usage

• we use Queues to pre-render the visited pages in the background for more than one reason, _(*11)

  • avoid latency when the page is being accessed for the first time.
  • don't keep the user waiting in case PhantomJs took long to render the page or when something goes wrong.
  • after PhantomJs has finished rendering, the page is cached to optimize server load even further.
  • make your website SEO friendly, because instead of serving the normal pages that usually produce issues for crawlers, we are now serving the pre-renderd version. ReadMore
  • even for websites with some traffic, we are still going to process each visited page without any problems.

# Render Pages Automatically

Atm in order to pre-render any page, it have to be visited first but if you want to make sure that all is working from day one, you can use the excellent package laravel-link-checker by Spatie, _(*12)

• which by simply running php artisan link-checker:run you will, _(*13)

  • check which "url/link" on the website is not working.
  • pre-render all pages at once.

# Flushing The Cache

• to clear the whole package cache, you can use

php artisan blazar:flush

or from within your app, _(*14)

Artisan::call('blazar:flush');

# Bots Only

we now use CrawlerDetect instead of relying on '\?_escaped_fragment_', _(*15)

if you decided to pre-render the pages for bots only, no need to the run the queue as the page will remain busy "stalled response" until rendered by PhantomJs, which happens on the fly., _(*16)

however because we are caching the result, so this will only happen once per page., _(*17)

also note that we are saving the page cache equal to the url so even if you switched off the bots_only option, if the page is cached, we will always serve the cached result., _(*18)

, _(*19)

Notes

# Why PhantomJs

I've tried both usus & puppeteer,, _(*20)

And my only take that both needs to run an instance of Chrome, while i wanted to keep the whole thing as hidden and as low-leveled as possible., _(*21)

however if anyone knows how to get any to work as "PhantomJs", am all ears :ear: ., _(*22)

# Queues

the worker should only fires when a url is visited & if this url is not cached, however if you have an unfinished old process, the queue will start processing pages on its own, so to fix that, simply restart the queue server beanstalkd, redis, etc..., _(*23)

# ex. using Homebrew

brew services restart beanstalkd

# Auth

as i dont know how to make laravel think that a page visited through phantomjs is the same as the current logged in user., _(*24)

so trying to pre-render pages with auth middleware will be cashed as if the user was redirected to the home page or whatever you've set to redirectTo under Constollers/Auth/LoginController.php & Middleware/RedirectIfAuthenticated.php, _(*25)

so to solve that, simply add dont-pre-render middleware to those routes and everything will work as expected. also make sure to add the same middleware to any route that needs fresh csrf-token for each user "login, register, etc.." to avoid getting CSRF Token Mismatch for other users trying to use those pages., _(*26)

# More Reading

• https://vuejsdevelopers.com/2017/04/09/vue-laravel-fake-server-side-rendering/
• https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/