4 ms·
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
by gigabo 10y 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".
- nostrademons 10y ago"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.
- gigabo 10y agoOh, 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!
- bsimpson 10y agoI 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?view=demo:demo/index.html&active=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"
- pault 10y agoI think "seamless transition from server to client" is probably less confusing. It's also typically referred to as "hydration" in SPA jargon.
- deegles 10y agoIs it possible to have all pages rendered server side?
- mikeryan 10y agoare 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.
- deegles 10y agoWell, 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.
- AShedOfTools 10y agoYep, this is the case
- AShedOfTools 10y agoAll 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.
- chrisan 10y agoI see you are from Redfin, is this deployed anywhere in production yet? Thx for Redfin btw!
- davidalber 10y agoHello! 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.html https://www.redfin.com/blog/2016/05/announcing-react-server.....