render.js

require('dotenv').config();
const puppeteer = require('puppeteer');
const colors = require('colors');
const path = require('path');
const terminalLink = require('terminal-link');
const createIfNotExist = require("create-if-not-exist");
const fsExtra = require('fs-extra');

const settings = {
    host: process.env.APP_URL || ``, // Url to visit
    urlTail: `?hide_browser_sync`, // Special variable to tell that it's a prerendering call
    cacheDir: './storage/prerendered', // Storage where to save rendered data
    pages: [
        {
            path: '/', // path which should be visited
            name: 'index', // Name of cache file
            elements: [{
                receiveElement: '#container',
                waitForElement: '#main-content'
            }] //HTML elements to save rendered content
        },
    ]
};


(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    console.log(colors.green(`Clean previously rendered files`));
    fsExtra.emptyDirSync(path.resolve(settings.cacheDir));

    for (const pageIndex in settings.pages) {
        const currentPage = settings.pages[pageIndex];
        let url = settings.host;
        if (currentPage.path) {
            url += currentPage.path;
        }
        if (settings.urlTail) {
            url += settings.urlTail;
        }
        const cacheFileName = currentPage.name || ``;
        if (!cacheFileName || !currentPage.elements) {
            continue;
        }

        const result = {};

        const link = terminalLink(`${url}`, url);
        console.log(colors.green(`Going to: ${link}`));

        await page.goto(url, { waitUntil: `networkidle0` });

        for (const currentEl of currentPage.elements) {
            try {
                await page.waitForSelector(currentEl.waitForElement);
                result[currentEl.receiveElement] = await page.evaluate(currentEl => {
                    const res = document.querySelector(currentEl.receiveElement);
                    if (res) {
                        return res.innerHTML;
                    }
                    return null;
                }, currentEl);
            } catch (e) {
                console.log(colors.red(`Selector ${currentEl.receiveElement} has not been found`));
            }
        }

        const savePath = path.resolve(`${settings.cacheDir}/${cacheFileName}.json`);

        createIfNotExist(savePath, JSON.stringify(result));

        console.log(colors.blue(`Saved to:  ${savePath}`));
    }

    await browser.close();
})();