How we switched our template rendering engine to React(engineering.pinterest.com) |
How we switched our template rendering engine to React(engineering.pinterest.com) |
Take a look at reddit's new mobile site, written in react. It takes around 7 seconds to load, to display text and links. Compare that to HN's, which loads in 0.1 sec, for basically the same content.
SPA's have their place, for things like games or the likes of google maps. But for the rest, please respect the web paradigm . Your site will be simpler to build, faster and most importantly, lighter. The web world has become mobile-first, not js-centric...
While I agree that there are many situations where a straight port of a static site to a SPA doesn't give too much benefit, it sets them up to move to more advanced interactions moving forward.
The web, although maybe not originally intended, has become the most powerful software platform we have. Things are getting dramatically better and the rate of innovation isn't showing any signs of this slowing down. It is already amazing and it's going to get better.
Ok maybe it makes sense if you are building a game. Or something that needs to run offline. Or Facebook. But most web sites aren't like that.
The other day there was a Ask HN about what stack a CMS should be built in. Most people were recommending their favourite client-side JavaScript framework. I just don't get it...
Also I thought one of the advantages of using a js framework is that rendering can be done on the client? It sounds from this article that server rendering is more advantageous?
Also SEO was mentioned, but I thought javascript was taken into consideration by web crawlers?
Rendering on the server feels faster to the user. With client side rendering, you will often get a skeleton of the site that loads, and then the content that fills that skeleton 100ms or so apart from one another. This sounds like nothing, but it is perceptible to the user.
There are absolutely ways around this, but even the Big Guys get it wrong sometimes (for instance: facebook).
Server rendering has advantages when first loading the SPA from the server: better user experience - faster loading because you don't need to wait for AJAX calls to do their round trips between browser and server to get data to populate the page - and better SEO - you don't need to rely on the search engine to correctly render the whole page.
With state changes after the initial load, though, client rendering is much better for UX (responsiveness). The whole point of "universal javascript" is that you can get both (initial server rendering and subsequent client rendering) with the same code base.
One should be cognizant that one doesn't get benefits for free with the choice to go with universal JS.
It's still kind of crappy. So people end up building more complex solutions like this or using stuff like prerender.io to work around this issue. Just adds another layer of complexity to the already way to complicated stack of modern SPAs (in my opinion)
Of course that's the general impression outside HN so perhaps they're correct and I'm just fighting a lost cause.
Server-side rendering solves this by sending you a full 'screenshot' of the initial app, even before the app is downloaded and 'fresh' data is requested.
The clever thing React does in this use-case is that even though the initial load is 'finished' html, React won't have to re-render the entire thing once your app is loaded and requests new data. Instead, it will be able to seamlessly take over and update only what's new, and do its usual thing from there.
One issue you could run into is that users start trying to interact with your app before React has taken over. I'm not sure if that's a problem in practice though, perhaps others can chime in.
Could you elaborate on how this works with other frameworks? Does it work out of the box in most cases, or require some plugin/module?
Can you explain what you mean by this?
And are you comparing client-only vs universal, or client-only vs server-only?
Large JS can be solved with code-splitting. The necessary code is downloaded in chunks when needed.
- code-splitting needed for larger codebases
- taking the window object into account
Other stuff I can think of:
- more limited options for routing/etc. because you want to avoid having to maintain two codebases. This means you might have to use Redux+redux-router+whatever instead of express/hapi/etc. because you can't (?) run those frameworks client-side.
- less freedom to modularize state in your app, because last I checked it was still rather messy to ensure that all the separate data-loading events are taken care of server-side before everything is sent to the client. If you're a fan of the Redux approach this shouldn't be a problem though.
- Possible 'issues' with using ESNext features server-side without going through Babel.
All in all I think it's worthwhile and, nowadays, pretty doable to create a 'universal app'. But it has its own complexities and at least last time I tried, I could find very few examples of how to best do this, and we're probably still far away from a 'canonical' solution.
Furthermore, in practice I've found that in many cases it's not really worth the extra effort. If your app is large/complex enough to have a noticeable load-time, it's probably fine for the user to load the entire app first (it might even still be cached), and it's often the case that SEO is not really important.
In my experience, the few cases where a big-ish app needed to load stuff quickly involved going straight to some subpage in the app. In that situation I often found it easier to either just render that bit server-side the old-fashioned way, with its own logic (in which case React is still a good option).