13 ms·
React Server
- krebby 10y agoThis looks cool. Any way to make it easily work with Relay?
- AShedOfTools 10y agoThis is something that we're thinking about (https://github.com/redfin/react-server/issues/190 https://github.com/redfin/react-server/issues/190), but that we just don't have an answer for right now. React Server was built with running two servers in mind, one for your api and React Server as your front-end. I haven't used Relay much, but I think you could run your Relay server as the api server, then make the request from React Server with ReactServerAgent and it should work?
- bsimpson 10y agoI'd really love to see a demo of what they mean by "seamless transitions."
- serg_chernata 10y agoI was thinking the same thing and this website doesn't seem to be powered by such technology either.
- gigabo 10y agoActually, the website _is_ powered by React Server! :) We wanted the project website to serve as a demonstration as well as a source for documentation.
- deleted 10y ago[deleted]
- serg_chernata 10y agonostrademons' description is exactly what I expected as well, thanks for clarifying
- gigabo 10y agoThe 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"
- 10y ago
- pault 10y agoThis is interesting, especially since I just spent the last two weeks setting up a boilerplate for a universal react/redux SPA on spec for a new client. I enjoy the flexibility but the need to develop a deep working knowledge of several independent libraries, transpilers, and build tool configuration files (each of which has several competing options with their own way of doing things) just to get to hello world is cost-prohibitive for most people, I'm sure. At the same time, I'm hesitant to go "all in" on a stack that I haven't heavily researched myself. If the developers are reading, can you go into some details about how you handle routing and data stores? Are you using off the shelf libraries or have you rolled your own?
- gigabo 10y agoFor routing of URL paths to "page" objects we use Yahoo's `routr`. We've tried to keep data store selection out of React Server core. There are so many good options in the React ecosystem that picking one seems limiting. The data bindings that the framework cares about are at the http request level. We have a wrapper around `superagent` that manages transfer of response data from the server to the browser. So, when the client controller wakes up in the browser and tries to make the same requests that the server just made while _it_ was rendering the page, the data is already present and the requests are short-circuited.
- pault 10y agoSo I can keep using my preferred redux middleware? That is definitely worth checking out.
- moflome 10y agoI'd like to second this by suggesting the docs include a recommendation on how to incorporate this within an existing React app. Apologies if this is available within the Yeoman generator but if so it wasn't obvious from the docs. FWIW, I've found the isomorphic render examples within the Megaboilerplate examples for React [0] to be instructive. [0] https://news.ycombinator.com/item?id=11861926 https://news.ycombinator.com/item?id=11861926
- buchanaf 10y ago
- android521 10y agoIt doesn't seem like it is for beginners. Docs look at the author assumes everything is self-obvious. Need better tutorials.
- gigabo 10y agoYes, definitely agree! We need better tutorials! We need better docs in general. Contributions welcome! :D
- kough 10y agoI'm totally on board with the "contributions welcome" response from open source maintainers, but when it's the only response to questions about documentation it's pretty off-putting. This is your project, how could you expect a new contributor to add docs without your input? I get that good documentation is hard, and takes time, but if you want your project to succeed I think it's almost mandatory for you to write these docs (at least the initial version!) yourself.
- bphogan 10y agoI have to agree here. There's nobody better to explain how something really works than the person who wrote it. The rest of us are just fumbling around guessing. As a dev and a creative person, I understand the desire to get something out there. But documentation and tutorials aren't just something that's nice to have. They are your marketing tool, your adoption driver, and the way to create educated advocates for your project. They are as valuable to your project's success as a splashy "getting started" web site is.
- AShedOfTools 10y agoThat process of you fumbling around and guessing is actually really extraordinarily helpful. The things a contributor might think to do or to try, and the things that a newcomer might think to do or to try, are completely different. No documentation survives its first encounter with a real newcomer. We can, and will, continue working on the onboarding experience, but we'll need real users to roll up their sleeves and wade into it, and the first few of them will have questions we didn't anticipate, and make assumptions we've never considered, and try use cases we've never thought of. Creating good documentation is something that newcomers and contributors need to collaborate on.
- mbreedlove 10y agoOne of the great things about React is its support for server-side rendering Cool, I never knew that.
- charford 10y agoGetting random 504 timeout errors on this site. Is this hosted using react-server?
- sheeshkebab 10y agoIt's a curious project but maybe not "Blazing fast page load and seamless transitions."
- nilliams 10y agoWell page loads are fast, and clicking links within the docs section does feel super fast, but I agree use of the word 'transitions' is confusing (which the author has now addressed elsewhere).
- smhg 10y agoI don't see those errors, but yes, it seems to be running react-server: https://react-server.io/source https://react-server.io/source
- AShedOfTools 10y agoWe had some scaling issues, and have added a couple more hosts to the pool. The errors should be resolved now
- hyperpape 10y agoGood opening for a question: what kind of servers were you using and how much traffic did it take to give them problems? (In other words, what's the performance of react like on the server?)
- davidalber 10y agogigabo's account has been rate limited, but he wants to say: "Well... we made it through the first hour or so of HN traffic on a single t2.medium instance in ec2 before we started seeing errors. We're now on three m4.larges with good head room. Not too bad, I think? We meant to get cloud front set up before we got this sort of traffic, but glad to be surprised with an early bump. :)" This is me saying this: I think we are thoroughly over-provisioned now for the load we are seeing, but we wanted to avoid any more hiccups while you all are trying to check it out.
- rajangdavis 10y agoGetting some weird issues, can only get to the docs by clicking on the link to the docs and then refreshing the page a couple of times...
- AShedOfTools 10y agoWe had some scaling issues, and have added a couple more hosts to the pool. The errors should be resolved now
- sergeym 10y agothere is a wealth of information in their documentation about making performant rendering on the server and client https://react-server.io/docs/intro/why-react-server https://react-server.io/docs/intro/why-react-server I found it super interesting.
- deegles 10y agoCould react-server build in support for AMP? https://www.ampproject.org/ https://www.ampproject.org/
- oelmekki 10y agoIt even includes a Dockerfile and a docker-compose.yml file to get quickly started, that's cool :)
- fdim 10y agoI see a bunch of failed attempts in console to connect to slack websocket. Is everything looking ok for you? After blocking 2 iframes with adblocker I could finally inspect what was going on :) Anyway, I can definitely feel that is fast and seamless and worth to give a deeper look! In the meantime, prefetching all the content in docs or source views upon load generates quite a few requests and might explain your scaling issues. Would you mind sharing statistics for number of users and hardware behind ?
- davidalber 10y agoThat's a result of the Slack badge at the bottom of the page trying to use a WebSocket to update its counts. We discovered getting WebSockets working through ELB was not trivial and have decided instead to disable the real-time updates to the badge. The changes have been made for that, but sadly, not deployed in time for your visit. Anyway, the errors in the console aren't impacting the behavior of the site (the badge is falling back to polling to get updates, for instance). They are ugly, though, and will be gone in a future deployment.
- nacs 10y ago> getting WebSockets working through ELB was not trivial Amazon announced the Application Load Balancer today which supports Websockets: https://aws.amazon.com/blogs/aws/new-aws-application-load-balancer/ https://aws.amazon.com/blogs/aws/new-aws-application-load-ba...
- davidalber 10y agoOh, that's timely! I will check that out. Thanks for the heads up!
- underwater 10y agoBased on the documentation and the design principles this seems like a really promising framework. The data hydration, incremental HTML delivery and incremental code loading are really, really important for creating web apps that aren't load time hogs. Great to see that they were unopinionated about data fetching, too. That's one of the things that has made it difficult to drop Relay into existing applications. Is this used in production? Are there any performance numbers that you can share.
- Bartkusa 10y agoRedfin uses it in production. https://www.redfin.com/blog/2016/05/announcing-react-server.html https://www.redfin.com/blog/2016/05/announcing-react-server.... "We’ve been using it here at Redfin in production for over a year and it serves the three highest traffic pages on the site. We’re serving 1 billion requests a month from our React Server instance; hundreds of requests per second during peak hours."
- ken47 10y agoIf this works as advertised, this may prove to be a very useful project, that can replace numerous homegrown, half-complete implementations strewn about the internet.
- idbehold 10y agoHow does it handle fetching data from a path on the same origin? For instance, I only need to fetch('/api/users.json') on a certain page (/users). This means that it can either be hydrated in the initial state when performing a full page load of /users or needs to be fetched (using xhr/fetch) when navigating to that page from another page on the site (which shouldn't require a full page load). So how exactly does the server perform that same fetch when attempting to hydrate the full page without actually making an HTTP request against itself?
- onewaystreet 10y agoIt doesn't. The data is included with the rendered page. React uses checksums to tell if it needs to rerender.
- dustingetz 10y agoI believe React will always re-render, to attach click handlers and the like.
- Bartkusa 10y agoThis is true. However, if the checksums match, then React can skip tree-diffing and DOM mutations.
- kcjonson 10y agogigabo's account has been rate limited, but he wants to say: There's no data caching across pages. On first page load the responses from data requests for that page are transferred to the browser and rehydrated. For a client-side transition to another page there are two options: Fetch the data from the server as a bundle (this just works... one of the cooler features of React Server, I think) or make the individual requests via xhr from the browser. Both have their place. There's some more discussion of this here: https://react-server.io/docs/guides/client-transitions https://react-server.io/docs/guides/client-transitions
- wwalser 10y ago
- encoderer 10y agoAn alternative here is Hypernova by Airbnb.
- acid__ 10y agoCorrect me if I'm mistaken, but Hypernova has the javascript rendering siloed as a separate service. Which can be really useful in some cases (especially if you want to render React components from a Rails app). But if you want it all in one place (reduced complexity and overhead), React Server looks pretty promising.
- wwalser 10y agoReact-server seems to roll in additional opinions (sane default) about how to go about creating a high performance server-side rendered universal application. My evaluation is that react-server looks promising for prototyping and first versions of an application where being monolith is a reasonable approach. Hypernova seems like a good fit for organizations that are already building microservices and want to eek some additional performance out of the initial render of their SPAs.
- tboyd47 10y agoLooks fascinating, I will definitely be watching this project in the coming year. Just curious, if it's been successfully running in production for over a year, why is it only being used to serve three pages?
- Bartkusa 10y agoThat statistic is out of date; Redfin has built dozens of pages on React-Server by this point. (Also, just to be clear, we treat all home details pages as a single logical page.)
- hughbetcha 10y agoWould be useful if this project explained the difference between React and ReactServer. It seems they are as similar as Java and Javascript. Instead of the render() method in React to output JSX, it appears that ReactServer uses getElements() for a similar purpose. So the entire model and object lifecycle is probably different as well?
- hughbetcha 10y agoIs each page pushed to the browser in a static fashion? Or does ReactServer implement minimal client DOM updates in a similar manner to React?
- Bartkusa 10y agoEach page is split into sections. Each section may wait for async data and API responses. When all the data arrives, the section is rendered as an HTML string. The server streams each section's static HTML to the client as soon as it's ready, and after all prior sections are streamed. The server also streams the async data to the browser. This avoids the latency of the client downloading some HTML, then downloading some JS, then making the requisite API calls for the page's data. (Think of it as a hacky version of HTTP Server Push.) On the client-side, React and your JS are downloaded, React will recycle as much of the static DOM as possible (writing isomorphic JS isn't always easy), then take over and do its thing.
- hughbetcha 10y ago> Each page is split into sections. Each section may wait for async data and API responses. When all the data arrives, the section is rendered as an HTML string. Where are these waiting sections? On the browser client or the server? Is the React code that is to be rendered on the browser served up automatically by ReactServer? I'm sure it's a wonderful framework, but a diagram is really needed to understand any of this.
- patates 10y agoSo the client downloads the data twice? First embedded in HTML and then via an additional request?
- zinssmeister 10y agoReact Server looks fantastic! For some reason this week I stumbled over many great React.js articles, so I started a collection here http://deepreact.com http://deepreact.com mostly to save&share things with friends, since a lot of us are getting deeper into React now.
- silasb 10y agoThe company that I was consulting for tried to get Spring and React to play nice via Nashorn, but ended up scraping the idea 6 weeks in because of performance issues and not enough developers knowing the stack. Nashorn was missing a lot of essentials to make this easy out of the box. So looking at this is a breath of fresh air.
- pseudointellect 10y ago> "Blazing fast page load and seamless transitions." Click on Get Started and no seamless transition, but rather a very abrupt page load.
- antar 10y agoYou have a misspelling in your homepage: née not neé.
- nattofriends 10y agoMerged at https://github.com/redfin/react-server/pull/527 https://github.com/redfin/react-server/pull/527
- AShedOfTools 10y agothanks again!
- rando832 10y agowtf is neé?
- AShedOfTools 10y agoIts the French word for "born." Its often used for maiden names. In this case, we mean "we called it Triton before we called it React Server," which was more important to understand before https://github.com/redfin/react-server/pull/40 https://github.com/redfin/react-server/pull/40 merged
- crudbug 10y agoA simple model/flow of rendering pipeline would be helpful here based upon routing logic. As I understand, Pages are composed of Components, Components provide HTML sections. HTML sections are loaded incrementally.
- mattbroekhuis 10y agoI've been banging my head in this boilerplate for the last few weeks and it's been very interesting. https://github.com/erikras/react-redux-universal-hot-example https://github.com/erikras/react-redux-universal-hot-example How does this compare to that?
- delta1 10y agothat repo is pretty dated by now (June 2015) and is not really under active development https://github.com/erikras/react-redux-universal-hot-example/issues/1184#issuecomment-223383004 https://github.com/erikras/react-redux-universal-hot-example...
- bdefore 10y agoThis boilerplate served as a base for a project I worked on, which I then extracted out into an npm module for easier maintenance. You might find it helpful: https://github.com/bdefore/universal-redux https://github.com/bdefore/universal-redux That said, react-server attempts to solve the problem in more of a framework fashion. I hope to look further into it.
- kra34 10y agoevery time somebody makes a new react / angular derivative a unicorn loses it's horn.
- gedy 10y agoHumorously this looks a bit like Apache Wicket, a Java-based client/server UI framework which has been around for about 10 years: https://wicket.apache.org https://wicket.apache.org
- crudbug 10y agoI was thinking about the same thing + JSF. This might be the evolution of it, where the page routing is residing on client with server side state ?
- Swennemans 10y agoAre there any numbers comparing pre-rendered React versus React communicating with a JSON Api? It seems to put a lot more stress on the server which can neglect the (theoritical) speed improvements
- skrebbel 10y agoNot sure, but the time cost is the latency of loading an almost-empty index.html, loading and parsing your app, _then_ it starts running and hopefully fast doing some API requests and then it's off and good to go. Subsequent JSON-API-requests-and-then-rerenders should be pretty fast indeed, but those aren't the point :) You want to server-side render React apps so that while all that happens, the app already works.
- Amplifix 10y agoLooks very interesting, will give this a spin. I've been skimming the docs, but I assume you'll still have to install redux to handle state etc.
- kelvin0 10y agoI just recently made the switch into the Web Dev world (coming from C++/Python, desktop world). Since I knew of Django, I've started using it as the 'Backend/Server' part of my Web app dev stack. Basically using Django to render minimal React/HTML/JS/CSS to bootstrap my single page Web app. Wondering, what advantage would I have would I get from using react-server instead of Django (aside from using JS across the board)? Would appreciate feedback!
- reitoei 10y agoShared client/server code.
- orhanhenrik 10y agoI have not looked at how this framework does it, but I have built a nodejs server that does similar things myself. Some advantages: - The server can render the full page in html for the client, which means the website is viewable even without js (or before js has loaded, for example on slow network) - The server can preload all data the client needs. The webapp might need to fetch data from 3 API endpoints. Having a server do this and pass the results to the client on load is much more efficient. If the client (browser) loads it, the following happens: html loaded -> js loaded -> start calling APIs. If the server does it, the client instantly has access to this data. Rendering all the html can be a bit heavy on a weak server though, but you get the advantage that you quickly notice bottlenecks in your rendering. You can also implement some caching on your server to make it faster.
- deleted 10y ago[deleted]
- kelvin0 10y agoI appreciate your answer, which seems to apply to the general concept of server rendering. But Django can also do all what you mention. My question was: what can React-Server do that Django could not? I hope this clarifies my original interrogation.
- 10y ago
- mxuribe 10y agoMad props to a crew from the real estate industry who just pumped out cool tech for universal utility! Kudos to the folks from Redfin!