A Gentle Introduction to SSR | Hacker News Reader

A Gentle Introduction to SSR

hire.jonasgalvez.com.br

46 pointsjgalvez55 comments

It feels like we're running in circles.

We used languages like PHP/Ruby to produce HTML/CSS that browser renders. Then Microsoft introduced XHR. Then we started with "saving bandwith" and "page does not to be reloaded" and AJAX was born (although it was Asynchronous HTTP and HTML instead of XML). Then such sites weren't indexed by Google so we started to pre-render content again for the most visited URLs.

And now there's so many buzzwords and bland excuses about server side rendering, such as "SSR improves user experience: users don't have to wait for CPU-bound JavaScript to run on the client".

JavaScript itself is not what makes websites slow. It's the 50 megabytes of advertising material I've to load from various "content delivery networks" that are everything except fast and auto-play videos that I'm not interested in.

Today's personal computers are stupidly fast, smartphones too. There's so little gain in the argument that pre-rendering the first request on the server improves performance while it does nothing for the network-related problems (resolving the domains and transferring so much content).

SSR is great, don't get me wrong, but the reasoning that encourages devs to use it is misplaced (not WRONG, misplaced).

Yes, it does improve user experience, but it doesn't do so because our computers are slower in parsing and executing JavaScript.

SSR feels like it feels a niche where you have public, dynamic and seo sensitive data.

If it is not public (like a web app you log into say canva) then SPA is fine and for most public stuff static pages (generated or cached dynamic pages) are fine.

> SSR is great, don't get me wrong, but the reasoning that encourages devs to use it is misplaced (not WRONG, misplaced).

The reason we do SSR is because we want developers to use the same language, libraries and frameworks in the frontend and in the backend. I just don't know which kind of developers are those who cannot bother to learn something else besides JS/TS. I have heard many times the argument "we are saving developer time by using the same technologies everywhere!", but I just don't buy it.

If you have a monorepo, it is pretty convenient to have synchronized Typescript definitions for communication between frontend/backend because they reference the same file. If you use different languages, then you'll need a translation layer/tool for shared interfaces and that can occasionally desync over time.

If you use something else as a source of truth, for example generate your definitions from protobuf or openapi spec, why would it get desynchronised?

I’ve done a couple of openapi-based systems recently and it’s a pretty good experience. I can generate server and client stubs next to models in various languages.

Not every project needs to use protobuf or openapi. It's an overkill dependency for internal APIs to solve the problem of mismatching interfaces that's easily solved with a shared Typescript file used by both codebases.

Assuming that one can afford working with TypeScript on both ends, maybe. But what if you need to support other languages?

brew install protobuf && some-proto-gen-wrapper.sh

job done.

Even bigger than that is reusing the same validation logic client side and server side.

On the backend, I use Python and C, however rather than use yet another underpowered slow tempting language I opted to use JavaScript for the front end views.

We deliver the HTML to the client, hydrate, and everything works seamlessly.

Since the static and dynamic views are built from the same code, we never have to worry about any disjunction where they fall out of sync.

Also hot reloading a live JS view is a lot faster than restarting the Django server, and refreshing the page.

It’s not that the team doesn’t want to learn Mako or Jinja or another language (heck one of our members designed their own language for fun) but it’s simpler and better to use JS.

If it was another project maybe the trade offs would work out differently though.

Wanting to use same tools for backend and frontend is one of the reasons.

IMO, there's only one gain to SSR and that's the one you can instantly feel when using the app - it's that the page load seems faster. That's it. Added benefit is that your app/site can be indexed by search engines since there's no XHR going on that has to fetch additional data for that first request.

Using the argument that dev does not have to learn something else in the technology world - I never liked that reasoning. We, developers, use tools. Languages are tools. I, and many that I worked with, learn multiple langues over the time, whether they want to or not. I don't know a developer that doesn't know, at least, how to use CSS next to using JavaScript. That's simply what our area of work requires. If one refuses, doesn't want to or can't learn an additional tool - well, is that a developer or code plumber?

SSR is not specific to JS. You can do SSR in old-school PHP. People care about SSR because it relates to how Google ranks your page, among other concerns.

SSR is also part of a larger story of optimization which touches upon network concerns, such as making network requests on the server rather than on the client.

I assumed SSR meant "JS on the server". The new generations don't call old-school PHP templating "SSR" (sadly).

To improve user experience, regulate online advertising.

Widespread use of ad blockers hints at what users actually want. (Not what developers say they want.)

I get the most from the web by using a text-only browser that does not run Javascript. Page retrieval is fast and generally consistent in speed.

> JavaScript itself is not what makes websites slow

It is, but not inherently. Lots of sites are shipping:

- far too much of it, even if it’s not in use

- wildly inefficient code which blocks unnecessarily

- lots of stuff cobbled together from third parties without regard for its impact

- far too much on load, both in terms of payload and what gets executed right away

This isn’t just advertising materials or whatever. Most of these points are true by default with eg a Next.js site, even if it’s also SSR/SSG.

> Server-Side Rendering comprises various techniques involved in running JavaScript universally or as some like to say, isomorphically, that is, both on the server and on the client [...]

I am like: "Did they just redefine SSR to limit its meaning to something JS specific, when it was the default for decades?" Then:

> [...] — in order to pregenerate markup for delivery and spare the browser from having to do so dynamically on page load — this is my definition, you'll find many others, but I think this captures the gist of it.

Ahhh, their own definition! OK, it is rather weird to limit SSR to be something JS specific, when people have been talking about rendering HTML on the server side for decades. Most web frameworks are able to make use of some kind of templating language, of which there are hundreds, if not thousands. Often they are interchangable and not a hard dependency of the web framework.

I think the SSR term is very much tied to SPAs. It is the process of (pre-)rendering a SPA on the server. So until a WASM SPA framework comes around this will be limited to JavaScript, yes. Because SPAs must be JavaScript.

Sure we were generating HTML on the server since basically forever. But that’s not SSR (in the sense that there is no client-side rendering).

The term “server-side rendering” was in common usage when people started implementing client-side rendering more commonly in the late ’00s and early ’10s. But in the last five years or so, the term has been appropriated by the isomorphic rendering crowd so that “SSR” or “Server-Side Rendering” normally means server-side isomorphic rendering (that is: server-side operation of something that’s primarily designed for client-side rendering), and there’s no standard term any more for pure server-side rendering, though if you write it lowercase it probably means the old-school technique.

Is it really fair to call something that is used so widely by major sites "old-school"?

Sure. “Old-school” does not imply “obsolete”, but evokes more a sense of traditional ways. (This is the way it’s been used for a couple of hundred years or more.) I think it’s the right word, and used it deliberately.

Fair point - I think I was being over-sensitive there :-)

Can’t say I ever heard it outside the context of SPAs, certainly not in the past. Back then you just had dynamic websites or dynamic content.

> in the sense that there is no client-side rendering

This read like:

"Water is H2O, yes but H2O is not water"

That's why it's called server side rendering because it happens on the server and not the client yes? And you agree that has been the default for decades yes?

You misread then. I meant SSR in a context where no client-side rendering is involved. Without SPA or the like. Which I certainly have never called SSR or heard anybody call SSR.

That's like saying that analog computers hadn't existed until digital computers appeared because only after the advent of digital computers someone started calling a certain thing "an analog computer". Just because you don't call a certain thing with a special name (yet) doesn't mean that that thing doesn't exist.

Yeah, SSR is pretty much a misnomer in this context, but it's still the term most heavily used to describe server-side rendering JavaScript apps. Like others have said, we're lacking a term for non-JavaScript dependent SSR now.

I've used "server-generated HTML" for a while and that usually makes things clear enough. I guess that's technically true for SSR Javascript as well but in context it makes sense (as in, "our pages are mostly done with server generated HTML vs SPAs")

> running JavaScript universally or as some like to say, isomorphically, that is, both on the server and on the client

"Universally"? "Isomorphically"? These people sure as hell are trying way too hard to avoid using the word "portable" for some reason.

Exactly.

SSR is _not_ tied to JavaScript.

Now it is often cited in the context of JS (with other hyped terms like Isomorphism and Hydration) but we used it for years to mean classic templated server-side cross-language generation.

We need to find another term for this (Server Side Rendering = SSR). SSR is starting Firefox on a server with X-forwarding or something. How is producing a complete HTML document on the server = rendering? Then PHP has been rendering webpages for years.

Offloading the actual rendering-engine from gluing together the HTML document from parts fetched or produced by Javascript prior to actually rendering the webpage can probably be a good idea in some instances. But this is hardly a new technique. Using Javascript to do it doesn't make it something different than PHP or the good old CGI scripts in Perl/Python.

Wholeheartedly agree. I actually tweeted out this morning a suggestion: HSR (Hydrated server rendering) .. i think that encapsulates the difference pretty well.. although CHSR would be more accurate, but "Client" is implied when talking about "hydration" imo

Back in the 90s we used to call outputting HTML from a dynamic server process “serialization”.

Get off my lawn.

Rendering doesn't have to mean generating bitmap pixels. In any case, the pixels you generate would get compressed before going over the wire. The HTML document can be viewed as an especially convoluted vector representation of the scene (in this case, a tree) that compresses things like text very efficiently.

RDP does stuff like this to more efficiently transmit window contents over the wire, AFAIK - they're not just sending bitmaps.

Agree. I thought I was clicking on an article about screen-space reflections in 3D rendering, although CGI and Perl were around long before that so they win the race for that acronym.

I recently learned about SvelteKit's (https://kit.svelte.dev/) solution to mixing SSR with dynamic components: The dynamic component is rendered at the server, but the data that it's based on is included with the HTML. So, after the page loads, it converts the static HTML into a dynamic component using the data, in a process called 'hydration': https://kit.svelte.dev/docs/appendix#hydration

Hydration is how most (if not all) similar frameworks do it (Next, Nuxt etc).

Not all. One mentioned in the article, Qwik, uses a different technique the authors call resumability. It’s similar in that it applies JS to components client side which were rendered with the same code server side. The subtle differences:

- it derives its initial client state from the HTML, rather than re-running the initialization which already ran on the server

- it doesn’t render top down, it resumes interactive components on demand (on first user interaction by default)

- it doesn’t load any of that code at all by default; if your page is fully static, none of the code ever gets loaded

This is similar to frameworks like Astro which use a technique called “partial hydration”, but with Qwik it’s handled by the compiler. Another which is somewhere in between (and has been doing all this for years; I’m not sure exactly where its most recent release sits on the spectrum) is Marko.

Doing the same with React[1] for my website[2]. Notice how the elements on top are dynamic, but the whole content is loaded upfront.

[1] https://reactjs.org/docs/react-dom-server.html

[2] https://stockevents.app

When backbone.js was the new hotness, you used to do this by templating out the page (in PHP or whatever) and including in the head some JSON that the page picked up on client-side render.

It is all common sense, and I feel like the language reinvention is an attempt to make old things new, not new things better, because everyone wants to performatively demonstrate how far up the curve they are.

It seems common to compare SSR to the old days of PHP, but the term SSR is usually used with dynamic component-based frameworks like React or Angular. These frameworks give you much better composability than what we had with PHP

This approach is not unique to Svelte(Kit), and not particularly efficient. You serialize the entire app state at once, and still have to send the complete application/component code down the wire and execute. It’s how this has been done for the past decade. The main advantage Svelte has is that it doesn’t need a “reconciliation” step, since it doesn’t use a virtual DOM, so this whole dance takes a lot less CPU time.

The ideal scenario is that you only serialize state, download and execute code for the parts of the app that are actually interactive. This is now called “partial hydration”.

I expected this to be an ELI5 easy to read explanation of SSR because it mentioned "gentle introduction". But the explanations and keywords in the articles would demand their own "gentle introduction".

How the heck this is a gentle introduction of anything.

> Server-Side Rendering comprises various techniques involved in running JavaScript universally or as some like to say, isomorphically, that is, both on the server and on the client — in order to pregenerate markup for delivery and spare the browser from having to do so dynamically on page load — this is my definition, you'll find many others, but I think this captures the gist of it.

Maybe I am too stupid, but I would rather read a wikipedia article on SSR at this point.

https://en.wikipedia.org/wiki/Server-side_scripting

What if we just implemented PHP on the browser instead?

Done: https://github.com/seanmorris/php-wasm

Server side WASM appears to be thing as well.

https://www.infoq.com/presentations/wasm-server-api/

So that would allow you to run PHP on the server as well ;-)

In this context, SSR is Server-Side Rendering, not Screen Space Reflections.

I was hoping it would be Stephen's Sausauge Roll.

I was hoping for Soviet Socialist Republics

And the context of "Server-Side Rendering" defaults to JavaScript.. Like PHP, Django and Rails don't even exist

Along with a host of other server side "languages" - ASP, PERL/CGI... all this has been done before. Just as we've come full circle on infrastructure where we were trying to eke every ounce of performance out of memory and CPU cycles because supply was short, now we do so because we're charged by the cycle, memory overhead, bandwidth we're beginning to recycle concepts like server side rendering... which has been done since as long as PERL/CGI existed back in the 90s.

It's funny how we just keep reusing the same ideas and calling them new... it makes me wonder why the history of relevant technologies aren't taught in software development classes so we can actually forge a path forward instead of keep doing the same things over and over again...

and there I was, with my hope of finally getting to understand Solid State Relays...

@Author, nice article, but the bold yellow italics make reading quite difficult (e.g. Why is "gist" emphasised?).

I certainly found the article much easier to read when I turned it to black-on-white with no exuberant bolding and colouring of italics and the likes.

Fair enough, I'll try and find a better combo there!

Hey, Regard "SSR improved ranking" :

I think this is a myth. I mean, that simply means those static websites will rank better than dynamic sites, and in fact, this seems not real. But I get the idea, if improved the speed, thus SHOULD in theory, improve the ranking.

Was hoping to read about Screen-Space Reflections.

Reply on news.ycombinator.com