Server Side Rendering Improvements


I’ve been waiting for this one for a while and it finally looks like it’s here. I’m working on a recent webpack es6 cli project and decided to give SSR a go. It took a little mucking around, slight learning curve, but nothing too hard for someone who has used aurelia for a while.

Here’s the main things that aren’t done that are crticial for SSR to be useful.

  1. You can’t have dynamic opengraph tags with it yet. That needs fixing. Meta tags should be dynamic. The whole template should be dynamic and avoid using comments. Use something like hogan or mustache/handlebars? I saw there was a comment in the config for uglify not to remove comments. How can any serious app that has its links shared not have opengraph implemented properly? That’s not great.

  2. Support for SSR in aurelia cli (I am sure this is on the todo list). It wasn’t trivial to add SSR into an es6 webpack cli project.

  3. Needs a leaner minified bundle. One without source maps and so on. Probably easy to configure, but the config needs cleaning up for this.

All of what I tried was taken from the SSR skeleton.

Overall, smooth upgrade, but needs more work for something that’s a critical feature.


Tip: If you’re using babel/es6 and get: TypeError: Cannot assign to read only property ‘exports’ of object ‘#’

Use this for your server-main.js

module.exports = require('aurelia-ssr-bootstrapper-webpack').default(function(aurelia) {
  let PLATFORM = require('aurelia-pal').PLATFORM;
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));


I’ve had a look at the ssr-engine code. Here’s a solution I intend to implement to fix the meta tag issue.

  1. Add a meta tag transformer to the ssr engine. Code would be similar to the styles one:

  2. Add a preRenderStep that reads well known values from the properties of a view model. For instance, an opengraph property in a view model would be picked up by the preRenderStep and the preRenderStep would modify the DOM to update the meta tags. This then gets picked up by the ssr-engine meta tag transformer.

I’ll fork the ssr-engine and give it a go. Looks pretty easy.


@rquast So exited that you are exited.
Keep us all posted.


I have been poking around further and see that passing the aurelia context to the transformers is probably the way to go to get this data from the router directly. Meta tags don’t appear in the DOM, so that changes my earlier idea.


A-ha… so they really should be rendered serverside…

there is a question on SO about adding meta tags via JS

I am still convinced that It would be better to have a navigation side effect that updates meta tags.
So It would work for both client and server.
But it can’t be part of the router…


Yeah that was the original plan. Doing that with a preRenderStep. But the problem is the node DOM doesn’t have meta tags in it, so I can’t manipulate the DOM before render to add the meta tags and then have SSR copy them. So I’ll have to work with something closer to the current ssr transformers plus a meta one that builds its data from the aurelia context (somewhere in it like the router or probably a container?).


Why not ping jsdom guys for implementation (-:
I think you got a valid case…
If you do, please post issue number here so we can reference it in ssr issues for future reference as well (-:

Cheers mate. You rock. Keep going!!!


@rquast - I’m also working in an ES6 webpack app (not TypeScript) and trying to wrap my head around how to implement SSR and OpenGraph/SEO. I’d GREATLY appreciate seeing a Github repo with your forked skeleton!

I’ve also been fighting trying to integrate webpack 4 to limited success over the past week (compiles, but results in a big “Cannot set property ‘endpoint’ of undefined” error during page load.

Lots of growing pains ahead.


I didn’t get that error, but I put it together from a reasonably recent cli es6 project. I did get problems with the bootstrapper. It works really well, but I think it could do with some better error handling. It throws some errors internally and doesn’t let you know, without launching a debugger to see the errors.


Latest updates… I’ve managed to get this rendering meta tags on the server side, and update the meta tags on the client side.

The project forks I made are here:

And here are some of the additions I put in my app to make it work:

And the site should be live soon (uploading it right now) at

Will add all of this to the es6 skeleton soonish.


@rquast I hereby give you the ssr badge of honor (-:
now get some rest, please