javascriptgoogle-cloud-firestoreseonuxt.jsrendertron

Rendertron for NuxtJS and Firestore site for SEO purposes

I would like to use Rendertron for my NuxtJS site.

My nuxtjs firestore site is here at https://ampedcast.com and the rendertron site is here: https://render-tron.appspot.com/

According to this example given by google: https://codelabs.developers.google.com/codelabs/dynamic-rendering#4

I need to add these few lines below to server.js in my nuxtjs site https://ampedcast.com but I could not figure out how to do that. In nuxtjs, you are not supposed to make changes to server.js.

const rendertron = require('rendertron-middleware');

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://ampedcast-7c1d6.uc.r.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

Any help or pointers would be greatly appreciated.

Solution

  • I have not used NuxtJS myself but from the documentation it says:

    Nuxt.js let you define the server connection variables for your application inside nuxt.config.js.

    I am assuming you can configure your server settings there. You might also need a Custom API endpoint and add this part to it:

    app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://ampedcast-7c1d6.uc.r.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

    Then add the middleware to the nuxt.config.js:

    serverMiddleware: [
  { path: "/api", handler: "~/api/rest.js" },
],

    I have used other frameworks that do something similar. I would be interested to see if this works for you or if anyone else has a better answer to this.