Server Side Rendering

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client's JavaScript bundle takes over which then allows the Vue.js app to hydrate.

Node.js server required

A JavaScript environment is required to render your web page.

A Node.js server needs to be configured to execute your Vue.js application.

Extend and control the server

You can extend the server with serverMiddleware and control routes with middleware.

middleware/api/logger.js

export default function (req, res, next) {
  console.log(req.url)
  next()
}

nuxt.config.js

export default {
  serverMiddleware: ['~/middleware/api/logger']
}

If your server middleware consists of a list of functions mapped to paths:

Server vs Browser environments

Because you are in a Node.js environment you have access to Node.js objects such as req and res. You do not have access to the window or document objects as they belong to the browser environment. You can however use window or document by using the beforeMount or mounted hooks.

beforeMount{
  window.alert('hello');
}
mounted{
  window.alert('hello');
}