Most things in web development are difficult.
I started this post two weeks ago as a simple "How to use SSR to boost performance" article. After hours of profiling and consulting people smarter than me, I know one thing. Server-side Rendering is more nuanced than you would like.
This is not a "beware SSR" article. SSR can still help with performance in certain scenarios. You just need to remember why you want to use SSR in the first place.
The default setup for a single-page app is an "app" element with some scripts. The "app" element inflates into meaningful content once the scripts run.
<html> <head> <title>My non ssr app</title> </head> <body> <my-app></my-app> <!-- "my-app" is a white page until these big scripts load --> <script src="big-script.876aa678as463sf7.js"></script> <script src="other-big-script.876aa678as463sf7.js"></script> </body> </html>
This is not an optimal loading pattern. The browser is able to render a page with just HTML and CSS. We could have content on the screen before the browser ever touches a script.
The point of SSR is a faster render of meaningful content
Compare SSR vs. Non-SSR versions
I built a fake shoe site called "Shoeniversal". You either love or hate the name. I built it with Angular Universal, but the concepts apply to other frameworks that support SSR. You can view the source on Github.