Hacker News new | ask | show | jobs
by gigabo 3603 days ago
The website itself is meant to serve as a demo. :)

When you land on the site the first page is rendered by the server. Then the client controller wakes up and subsequent page views ask the server for data, but render in the browser. That's what we mean by "seamless transitions".

3 comments

"seamless transitions" in the web design world is often taken to mean "transitions" in the sense of CSS animations, i.e. instead of hard page refreshes elements smoothly morph into their positions in the next page state. See eg. Google's Material Design or Apple's iPhone UI. This is a big, largely-unsolved problem in HTML5, at least in making them pervasive, performant on mobile, and easy for developers. Advertising this may lead to some unwarranted excitement and subsequent disappointment, since the website doesn't really have transitions at all of this sort.
I think "seamless transition from server to client" is probably less confusing. It's also typically referred to as "hydration" in SPA jargon.
Oh, hadn't considered that interpretation. Our full project description on GitHub is "React framework with server render for blazing fast page load and seamless transitions between pages in the browser". The tag line on the website is shortened from that. I think the full version is a little less ambiguous, but it's a little too wordy in the context of the site.

Will have to think about a better tag line... Thanks!

I share nostrademons's interpretation. I'd expect the first page rendered on the server and the rest rendered on the client in any isomorphic framework. When I hear "transitions", I expect elements morphing between assets, ala neon-animated-pages:

https://elements.polymer-project.org/elements/neon-animation...

I think your value proposition is something like: "Renders on the server or the client - whichever's fastest for that request"

I see you are from Redfin, is this deployed anywhere in production yet?

Thx for Redfin btw!

Hello! Redfin has been running React Server in production since early 2015. There's a little more information on React Server in production at https://www.redfin.com/blog/2016/05/announcing-react-server.....
Is it possible to have all pages rendered server side?
All pages are rendered server-side by default. React Server sends each server-side rendered element as soon as it, and every element before it, are ready, up to a timeout, at which point it sends the late arrivals as they trail in. On the client side, React Server picks up where the server left off, to render client side code as the user interacts with the page.
are you asking to have a static site pre-built from React?

I'd assume when he says "first page" he means any first page but generally from there the rest becomes dynamic react. Depending on how you load your data it should be much quicker to render entirely in the browser once the page has loaded.

Well, I was thinking you could have all pages server-side rendered in the case of a low-power mobile device, and leave the hybrid approach for desktop browsers.

The user-agent string could be used to decide which approach to use.

Yep, this is the case