Comment by ronnier
3 years ago
I don't have any data to back this up, just my opinion, but I prefer backend rendered sites with Javascript augmentation for the parts that need it. Just feels faster.
These JavaScript UIs feel clunky and slow IMO. Maybe it's the (sometimes) dozens of calls the UI make back to the server to get data whereas if it was all rendered in the backend the round trip time would be a lot faster since the server is closer to the data, but my browser needs to make a call across the internet to the server and then to the database or whatever.
Also for tools websites at companies I work at, as a backend dev, building those tools in react is huge overhead. Webpack and react and redux etc. It's a lot to deal with for some simple tool. I'm wondering how much internal tool websites built in react slow down the development process at corps.
> These JavaScript UIs feel clunky and slow IMO
They don't feel slow, they are slow, even more so on mobile, but developers have stopped caring about mobile web performance a long time ago. So much for "flash is killing my battery", now it's Javascript.
In theory React websites should transfer less data since you just send a JSON model instead of one annotated in full HTML markup. The React runtime would be cached after the first visit.
The problem isn't the amount of data but the number of round trips required to get it.
Imagine you need to do the following calls to get the page rendered with the various information different parts of the page has:
1. Get user information
2. Get projects for user
3. Get the selected project
Now, if this was all server side rendered, it might take 1ms to go to the database and get the various bits of info, or 3ms for 3 sequential requests.
With a react app and say 250ms of latency to the database, you're looking at 750ms of overhead - 200x slower.
Of course you can architect all your APIs to always return everything the user needs so they don't have to do multiple requests, but that has its own drawbacks and honestly is very difficult to do and plan ahead for, especially at scale with multiple consumers of various APIs.
What you describe is solved with GraphQL, which is a very mature technology by now.
4 replies →
NextJS server side rendering and React Server Components basically solve this problem.
That’s the theory, but every time I measure it the combined data and JS needed to render it wind up being more than plain HTML both in bytes transferred and milliseconds to render.
There will be exceptions of course, but I haven’t found them.