React (and Vue, et al) was built with client side rendering in mind. It just does not seem to fit the server side rendering pattern.
What are the use cases? From my perspective, if your app is a rich web app with a lot of interactivity, you probably want CSR and don’t benefit much from SSR.
If you have a content-centric site, or a site with some interactivity but not much, you want a static site generator, or SSR. But in that case, a template engine with some smaller client side libraries (jQuery or AlpineJS or idk what all is out there).
Using React SSR for all of these seems like the wrong tool. What am I missing?
The mere existence of the term “server-side rendering” illustrates this well. I remember the first time I read about that concept and immediately thought “you mean the way we’ve been writing websites since the 90s?”
Maybe I’m just out of date, but IMO web development has completely lost its way. I don’t do much frontend work anymore, but when I do my goals are always to see how few JS libraries I need to use and how little JS I need to write in general. The end result of that plus doing all/most work on the backend, sticking to standard HTTP conventions, and using only vanilla JS means super fast and performant websites with fewer bugs, less constant deprecations to keep up with, less security vulnerabilities in all the JS libraries, and no constant headaches from a complex Webpack-style build system for assets. It’s actually quite enjoyable when you remove all the bs of modern JS frameworks from your workflows.
My hot take is that I find it so much more pleasant to write typescript and do most of the work in the front-end rather than deal with optimizing the response time of the backend day in and day out. With SPAs it’s so much easier to fetch just what is needed rather than have monolithic responses that take ages to arrive. Makes caching and cache invalidation that much easier too.
I remember the first time I read about that concept and immediately thought “you mean the way we’ve been writing websites since the 90s?”
This is a poorly informed take. Your pop’s dynamic html server side rendering has nothing to do with the problem of rendering DOMs generated by JavaScript running in a browser according to the client’s state and leave it in a coherent state. Trying to pass off React’s SSR for the same thing that was done in the 90s is like trying to pass off an Android app as the programs written for DOS.
Is it not generating HTML on the server to be served to the client? What you’re describing is, in my opinion, an overly complicated form of dynamically rendering HTML on the backend. It’s exactly what I’m talking about: the layers and layers of complexity modern web development has added hasn’t really solved any problems but rather primarily created problems which are solved with another layer on top as a fix which has problems of its own, and repeat.
Anyway, that’s my opinion on the matter, I’ve toiled with modern web development tools my fair share and time and time again found that removing all of them in favor of vanilla JS where strictly needed and traditional dynamic backends is the most reliable and performant, and frankly enjoyable form of web development. I know others like those workflows and the complexity/power they bring and that’s fine, it’s not my cup of tea though.
Here’s my hot take as a dev who’s been making websites since before JavaScript and css were invented: modern web development is leaps and bounds better than how it was and the rapidly changing best practices had a big part for how we got there in the time we did. I think the industry is in a great place now and now that it is things have slowed down and the focus is now on stability rather than changing development patterns.
Hello fellow old person. I mostly agree, and I think we’re starting to see some convergence on the core patterns that will define the “best way” to deliver web apps for years to come. The various offshoots of React are really just evolutions to see what fat we can trim and tighten it up. But functional-reactive UIs as a general thing are here to stay and better than all the other ways we’ve wired up GUIs to date.
After experiencing ad hoc inline scripts, frameworkless jQuery spaghetti code, inflexible monoliths like angular, and overly simplistic micro frameworks like backbone, I’m super happy with where we’re at with react and react like frameworks. I really do feel like we’ve hit the sweet spot between power, simplicity, flexibility, and ease of use which is why I’m confident that things aren’t going to be as volatile as the past. React is already 10 years old now and still going strong with no new trends looking to usurp it. I think those old trends were necessary experiments to get to where we are now, and I think the old meme of web dev changing every week is no longer true.
I agree that things improved. React and others are amazing for CSR. We have static site generators which are also amazing and nice to work with. But SSR territory is in strange place right now. React is overused in places it doesn’t belong.
I’ve had a good time with react SSR and SSG particularly when using next.js which does a great job optimizing out of the box, but really SSR and SSG are functionally just glorified string interpolators so anything will do. What matters is ease of use and with the strong community and toolset available to react I’ve had no trouble setting up react for SSR/SSG.
Where things still need improvement is with hybrid apps that take SSR/SSG pages and hydrate them to be ready for the client to take over, but that’s always been a pain point, and while we’re still not where we need to be I do think it’s better than it’s ever been and we’re on the right track to cracking it.
Maybe it’s because I’ve seen how bad things can get that I’m appreciative of what we have. After experiencing frameworkless jQuery spaghetti code, overly complicated monoliths like angular, and overly simplified micro frameworks like backbone, I’m really happy with the frameworks and toolsets we have now, and react’s ecosystem is very mature.
I would say that react is overkill for SSR, but pure SSR is pretty simple so react is also able to handle it just fine and elegantly as react is even easier to use when you’re not dealing with dynamic state, and if you find the need to introduce some hybrid client side functionally, which pretty much always happens eventually, it’s a good thing to be on react.
You can configure nextjs to compile as only client-side-rendering, so that it runs like before!
Another thing: NextJS is not only SSR. It’s hybrid. The advantage here is that it decreases the visible first load time.
First load pre-rendered HTML and styling is sent to the browser. So the page is already fully visible. After that all scripts and secondary CSS will be loaded. And even after that the bindings will be done.
Where as with pure CSR, all JavaScripts need to be loaded and executed and only then stuff will become visible to the user
