Integrating prerender.io with Netlify's functions

Support
, ,
1

I’ve hosted my vue.js SPA on netlify and I want to make it SEO compatible. One solution was to enable netlify’s built-in pre-rendering but debugging on it is a nightmare (due to 24-48 hrs non-clearable cache). So I’m trying to integrate preredner.io service together with netlify’s functions.

For this reason I’ve created a funciton in netlify/functions/server.js with following content…

'use strict'
const express = require('express')
const path = require('path')
const serverless = require('serverless-http')
const app = express()
const prerender = require('prerender-node')

const router = express.Router()
router.get('/', (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' })
  res.write('<h1>Hello from Express.js!</h1>')
  res.end()
})
router.get('/another', (req, res) => res.json({ route: req.originalUrl }))
router.post('/', (req, res) => res.json({ postBody: req.body }))

app.use(prerender.set('prerenderToken', 'MY_TOKEN'))

app.use(express.json())
app.use('/.netlify/functions/server', router) // path must route to lambda
app.use('/', (req, res) => res.sendFile(path.join(__dirname, '../index.html')))

module.exports = app
module.exports.handler = serverless(app)

I’ve deployed this function to my site, but the issue is I’m not getting any pre-renderd page when visiting the site by setting UserAgent as GoogleBot. I’ve not made any other change to my codebase. Am I missing something?

2

Could we get the name of the site?

3

Sure, the name of the site on netlify dashboard is dt-ct-v2-vue-cli and I’m working on branch named site-performance which has a deploy preview.

4

Thanks for the info.

How exactly how you configured for this to happen? Are you using some redirects or something?

6

No redirect, I’ve just placed the above function in my netlify/functions/server.js path. The rest of the vue code is same as before assuming netlify will pick it up automatically?

Do I need to add some extra code?

8

I’m not sure how it will automatically work.

For example, this is the path where your function lives: https://site-performance--dt-ct-v2-vue-cli.netlify.app/.netlify/functions/server

That seems to render the content correctly.

So you basically need to route all your traffic to a serverless function and in that add logic to generate the HTML page for each URL and serve it accordingly. This approach is similar to what our Nextjs plugin does.

9

Yeah, that was the thing bugging me because this serverless function is completely detached from rest of the vue app and I wasn’t sure how netlify is gonna handle it automatically.

Now as you suggested about routing all my apps traffic to this function and then serving the pre-rendered HTML accordingly. Can you direct me to some simplified code example to achieve this task?

10

Here’s an old example of using Netlify Functions to render HTML on the fly: