How to Serve Static HTML to the Search Engine User-Agents in Dynamic Rendering?

I am trying to create a Dynamic Rendering Example with "Prerender.cloud" service. I took an prerendered version of my URL.

I may put the code structure here but it is not the problem.

a) I purified the CSS. b) I deleted all unnecessary codes and resources. c) I changed the resource order/organisation for better speed. d) Optimised the Images. e) Reduced the request size. f) Reduced the page size.

I increased page speed mostly 3 seconds and decreased the size %200.

But the main problem is here:

I have a rootdomain.com/example-dynamic-rendering page. This is the original page. I want to serve this to the client.

And also, I have my prerendered example and I wonder how can I serve this static HTML page to the Search Engine User-Agents from same URL?

Do you have any idea or code for this task?

Plese help.

Solution

You can use puppeteer to load that dynamic page/app and load it's HTML and save the content to a HTML file. Then if the Google bot crawler visit your site, you can ask them to crawl this HTML file, via robots.txt file.

You can run this puppeteer script every time you want to run. Maybe you can use cron to automatically run this script.

Something like this:

const puppeteer = require ('puppeteer')
const CronJob = require ('cron').CronJob
const fs = require ('fs-extra')

const crontask = '0 */1 * * *' // This will run script every hour
const urlDynamic = 'https://www.example.com' // Change this to your dynamic url
const staticFile = 'statichtml.html'

;(async () => {

    const browser = await puppeteer.launch ({
        headless: true,
        devtools: false
    })

    const [page] = await browser.pages ()

    const autorun = async () => {

        const open = await page.goto ( urlDynamic, { waitUntil: 'networkidle2', timeout: 0 } )

        const html = await page.content ()

        const save = await fs.writeFile ( staticFile, html )

    }

    const job = new CronJob(crontask, async () => {
        autorun ()
    })
    job.start()

})