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.
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.
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.
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.
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.
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 (-:
@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.
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.
Hello everyone! When I started my project I used the esnext 1.1.2 skeleton. I’m wondering if anyone has seen or created a “How To” illustrating what is needed to add SSR to the esnext webpack 1.1.2 skeleton. Skeletons are great for getting started quickly, but I’m find that my ignorance with knowing the intricacies of the skeleton are going to increase my learning curve when adding SSR.
@sboyd I still have to get around to doing the PR for this. I’ll probably include a short video on how to use SSR and where to look for anyone who is interested once it’s done. Waiting for some feedback from anyone who has looked at or tried my fork (above) to see if it’s okay.
I’m going to try out your fork! I’ve got to spend some time wrapping my head around how to use Koa, and how to rewrite a ton of my code to use the Aurelia PAL.
The opengraph/meta stuff is really the holy grail and reason for me even exploring SSR at all. Our app/site will have tens of thousands of user-facing pages that need to be Google-indexed, and they’re all dynamic depending on what data is being pulled for a given page, so it’s not something I can just drop into the router’s config. It all has to be generated dynamically on-the-fly.
I’m getting really worried that Aurelia is going to end up having been a bad choice for a customer-facing website that requires lots of meta/SEO value. I’m not sure if ANY frontend solution is ideal in that regard. Might have to go back to an all server-side solution like .NET Core or the new Blazor or something.
Think support in Aurelia CLI will be great and will help us span new project quickly as well as move existing project that works perfectly with webpack configured by aurelia cli
any clue when aurelia cli will support SSR ?
@nathanchase Good luck with the fork… let me know what you think (if you can figure it out). I think Aurelia is fine… all of the code is there, it’s just that I don’t think the existing SSR code has been used to any great extent yet. It’s definitely a much more practical system to use for SEO than Blazor IMO (Blazor is a cool idea by the way). I think Blazor would be going 10 steps back, first being that there’s no debugger for it, second is the SSR for it is still being discussed, third is the size of the files it has to download. It’s basically a VM running in WASM, so if file size is an issue for SEO it may not be the best choice.