Hacker News new | ask | show | jobs
by drKarl 1407 days ago
With server side rendering you have to reload the whole page everytime there's an update on some data or if you want to submit data. That is not only slower but it also feels slower to the user. With SPAs you only reload the part of the page that has some data changing which loads asynchronously in the background, so it's not only faster, it also feels faster. If your new implementation is worse maybe the company you hired didn't do a great job...
7 comments

With server side rendering you have to reload the whole page everytime

Someone must have lied to you or forgot to explain WebSockets.

Before WebSockets existed, some of us would use a hidden background frame to load server rendered code with a simple "onload" script to move it to the forground replacing only the portion that needed updating.

Maybe someone lied to you... With websockets you have to keep the connection open, so it would be great to build a chat but not so much for a rich web application...
Blazor Server is a pretty good websockets based framework for rich web applications.

(Source: I have one deployed as a SaaS app)

I've wanted to try this, but that connection drop issue sounds like a deal killer when serving page data when compared with ajax polling. How does it handle connection failure? I've worked on event based software for desktop/mobile where the best case was to detect the connection drop on the client side then show a "reconnecting" message while it tries to regain it's websocket.

It usually sounds easy to implement, but comes with more edge cases than you'd expect.

Connection drops have not been as big a deal as I would have expected. But Blazor takes care of that for client side detection, automatic reconnecting, and providing hooks for showing a basic "connecting" UI. There's not a lot you have to implement yourself - the websocket transport is largely abstracted away (unless you specifically want to dig around in there).

That said, I've polished off some of the rough edges with some additional handling. For example, if the user is not directly interacting with the app right at that second of a connection drop, I won't immediately show a loading indicator, so there is no visible difference in the app UI (it just looks like everything is still fine). If the connection reconnects before they interact with it again, they'd never even know it dropped, if it doesn't I then show the loading indicator (which appears after a second or two in any case if the connection is taking longer to reconnect).

If you can cope with the slightly different paradigm of an always connected socket, there are huge upsides to using this framework, and the dev loop can be very fast with hot reloading etc.

Blazor is the UI framework, the underlying connection is actually handled by SignalR which uses several transports from WebSockets (by default) to server-sent events and long-polling.

The Blazor server framework and JS already handle connection drops automatically but you can also add your own logic (like forcing a page refresh if it takes too long).

Phoenix LiveView and similar tech would like to join the chat
Why not? What about a "rich web application" means it shouldn't or can't have a connection open?
Phoenix Liveview and the many other copied featuresets in other web frameworks are sending dom diffs over a websocket connection where a tool like morphdom will render only the necessary changes to the page.

This sort of architecture for static rendering is a big deal because it gives live page updates in a way that is SEO friendly and significantly less complex for development than SPAs are.

HackerNews, the site you're reading right now, uses server-side rendering. Even for voting. And yet it's incredibly fast and more usable than most SPAs. I'm sure you've also used StackOverflow at some point, which is another incredibly fast and responsive SSR site.

There are also many "partial" update mechanisms from XHR/fetch + innerHTML to slim frameworks like AlpineJS/HTMX to newer SSR live rendering like Blazor/LiveView/Hotwire.

You certainly do not need to build out an entire SPA or use React to reload part of a page just to swap in some HTML or load something asynchronously in the background.
"That is not only slower but it also feels slower to the user"

Not always the case and in many cases, server side rendering is totally fine and has been for decades. We need to stop suggesting that only 1 solution is correct. SPAs have a place but plenty of use cases can do fine with old school server side renders.

I think SPA were cool and with all the frameworks, it became even cooler to just do more client side work BUT don't forget that there are plenty of studies now that have shown that SPAs are not always the correct and magical answer and in many cases they are actually slower.

> With server side rendering you have to reload the whole page everytime there's an update on some data or if you want to submit data.

this is not true, and if the collective "full stack" community believes this, I feel like I suddenly have a very good understanding of why websites, and more generally the web tech stack itself, sucks so much these days.

Node/React/VueJS SSR apps are a benefit to the user and do no such thing. SSR for React uses your heavyweight servers to pre-render the initial HTML. Thereon it's an SPA again, it's just seeded with the SSR results. In-fact, if the client determines the seed data for state/html can't be used it will be abandoned and the client will render by itself. This can happen when your state model isn't intact or if you have differing versions of client and server. You can have certain modules entirely render on the backend by choice but it's not mandatory.
Or data that is serialized from the server to the client isn't consistent on both sides leading to differences in rendered output