2021 could well be the year of the server's glorious return.
The React team at Facebook have previewed server components, and the people at Basecamp have released Hotwire.
React@reactjs
As 2020 comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. The demo is available now whether you want to play with it during the holiday, or when work picks back up in the new year. reactjs.org/server-componeโฆ17:24 PM - 21 Dec 2020
1391
4588
DHH@dhhHotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 ๐๐๐ฅ hotwire.dev16:27 PM - 22 Dec 2020
The approaches are very different, but both tools seem to be about:
- writing less JavaScript
- doing more on the server
- dealing in plain old HMTL whenever we can
Why does it matter?
The past few years of web development have been about shifting as much as possible off the server.
Companies like Netlify have been arguing hard for making our apps as static as possible, and building our dynamic features with client JavaScript,APIs and serverless functions.
This is arguably a faster, more secure way of doing things, but it does have downsides.
Doing everything statically can add complexity, and shifting the burden of work from our servers to the user's browser makes it harder to progresssively enhance our apps: we're beholden to the speed of the user's connection and hardware.
Gary Bernhardt@garybernhardtConsulting service: Your 25-person company is drowning in complexity with microservice architectures, serverless, and SSR. I say "your app will fit on two Heroku Standard 1x dynos and one Standard 0 database. $150/mo total. Eat the 100 ms of extra latency." You pay me $10,000.20:14 PM - 30 Dec 2020
Client-rendered single page apps still have accessibility issues that are hard to solve.
After a few years of this, it looks like the pendulum is now swinging back in the other direction.
Maybe the server is good for some things after all!
How do they work?
React's server components are a carefully-considered redo of what Next.js does now with getServerSideProps.
With Next.js today, you can only do server-side operations on top level "page" components. This would remove that limitation.
Meanwhile, Basecamp's Hotwire is an evolution of the Turbolinks library that comes standard with all new Rails apps.
It seems intended to be a Rails companion, though I expect there's a way to use it seperately.
Should I learn it now?
Probably not quite yet!
React's server components are a way off yetโall we can do is experiment with the demo.
While Hotwire is apparently production-ready, it'll take a little while for examples, documentation and patterns to get good enough for me to consider using it, at least.
What's the reaction been?
Everyone seems to love Facebook's server components, though there's a lot of unanswered questions.
With Server Components, React has gone from a client-side library that can render on the server to a server-side library that can render on the client.06:48 AM - 27 Dec 2020
People seem more confused about Hotwire. Maybe it's a sense of humour thing?
Mariko Kosaka@kosamariโsending HTML instead of JSON over the wireโ
.
.
.
โsending HTML instead of JSON over the wireโ
.
.
.
Someone help me, there is a lot to unpack in this statement on Hotwireโs website.20:24 PM - 22 Dec 2020
Either way, I'm keen to see where this goes.
Exciting times ahead!
Top comments (2)
DEV, by way of Forem has remained respectful of the server and the value of streaming HTML without being too religious about our approach.
We have some technical debt that comes with a few different patterns which I hope we can pay down in the next year or so, but I'm happy that we've had a deep focus on the problems we're trying to solve for and come up with some good solutions out of there.
It's always interesting to see that you've accidentally stumbled on to a "trend" without having known you were working with some new specific paradigmโ And I've been seeing a good amount of that lately. Hotwire is a more ride-or-die version of some patterns we already make use of in some way (with ample influence from Basecamp and Rails to begin with)
Cool post ๐. Hotwire loosely reminds me of ASP.NET Blazor Server, where all the interactivity of the page is controlled by the server through SignalR. This is somewhat similar to the partial page updates done by WebSockets