Rendering React without browser JavaScript
We need to get back to server-side cached rendering. Thinking mobile-first and lightweight websites. I feel in the last few years we've added so many things and we are no thinking on the people with slow internet. Ember FastBoot now this, Angular 2 coming with it. We are going towards hybrid awesome front-ends which load fast and deliver the best UX we've had. Thank you for the great effort.
I love React, but it seems like it would be easier and more productive to use a toolchain that had a much smaller payload (like Mithril, or React-lite), than engineering a solution like this.
If performance and time-to-click was your concern.
Reminds me of Ember FastBoot. Different framework, different use case, but relatively easy to implement.
This is cool! It's worth pointing out that, for SEO reasons, Google now renders Javascript pages [1] without methods like this. The performance benefit is definitely still a plus though.
[1] https://webmasters.googleblog.com/2014/05/understanding-web-...
I was hoping this would be a story about native react-style rendering within the browser engine itself, something I've been waiting for since virtual DOMs first started becoming popular.
Every time I see someone mention react and other frameworks are bad for SEO, I cant help but think, shouldn't search engines have to worry about this.
Google and other search engines have brilliant people working for them who can create systems which can guess what I want to search before I have entered the entire query, and you are telling me these same people can't do something about pages using the latest technology. Sigh.
Great timing. I was just going through the referenced "Tutorial: Handcrafting an Isomorphic Redux Application (With Love)", having gone through the React tutorial the day before. When I first saw your article, I thought it was nothing more than a rehashed version of the "With Love" one. But as I got to the end of "With Love" I wondered:
# "With Love" uses an external API server; how would I handle API requests on the same server?
# There's no real demonstration of how to do routing beyond a single route.
# "With Love" is unfinished, with no live updates etc.
# How to integrate even simplistic file-based persistence?
The Facebook tutorial had all that, but I wasn't sure how to integrate those features into a server-side-rendered framework. So essentially my next step would have been to figure out how to do what you just did here. The extra work of making the application functional (beyond just showing the pre-rendered screen) is icing on the cake.
Repository for modified tutorial: https://github.com/firasd/react-server-tutorial
How would you render (to a cache) server-side if the rendering depends on the display size in a complicated way (too complicated for CSS to handle)?
Edit: yes, I understand that rendering means generating HTML, but sometimes the HTML depends on display size.
full circle?