kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.69k stars 4.16k forks source link

Reactjs.net integration #46

Closed brunoAltinet closed 9 years ago

brunoAltinet commented 9 years ago

Hello, I was reviewing your kit, it's great work, I'm in the process of learning React.js and how it all fits together with asp.net. Maybe i have a wrong idea, but my ideal architecture would be a primary asp.net mvc web site with react.js mini apps, with central navigation (top navigation bar) handled server-side by asp.net mvc. So i can use react for building apps-per-page, yet have solid sever-side boundaries between apps. I hope you understand what i'm getting to. Anyway, by looking at different examples I chose to try and integrate this starter kit with reactjs.net. Also, i would like it if these mini apps had their own routing, on top of asp.net server-side routing, but there shouldn't be any overlapping. Do you see any issues with that aproach? I plan on making a blog post about it since i couldn't find anything that touches the subject. Thanks and best regards!

koistya commented 9 years ago

Sounds good to me. I don't see any possible issues with it. Each mini app will have its own routing. But.. is there an advantage of implementing it this way, as opposed to a single app (SPA) with purely client-side routing for all pages? In this case you can only use Web Api / SignalR from ASP.NET just for REST / HTTP / WebSockets endpoint and have all the front-end pages implemented with React.

brunoAltinet commented 9 years ago

Client-side approach has its drawbacks (high initial payload, fully client reliant (which makes it somewhat fragile), possible memory leaks between pages (especially since flux relies on singletons) etc.). I'd like to employ react as a server-side web renderer plus client-side behaviour library. I consider it a unique oportunity for react compared to angular, ember etc. . Plus, there are many existing asp.net mvc projects which could use an approach where you would just "sprinkle" react to get better UX from server-side pages, or embed an spa so that the experience is seamless (single css, header, footer). There are some examples of it, but they are very simplistic. Btw, i noticed that the whole example is loaded at once, is there a partial load example (fetching pages on-demand etc.)

koistya commented 9 years ago
Btw, i noticed that the whole example is loaded at once, is there a partial load example (fetching pages on-demand etc.) — @brunoAltinet

That's actually a great suggestion. I'm going to update the sample, to make it load the actual page contents with Ajax requests (as opposed to bundling that content).

koistya commented 9 years ago

@brunoAltinet, so.. here is an example, how page contents can be extracted into separate files, in order to avoid embedding that stuff into the main application bundle: https://github.com/kriasoft/react-starter-kit/pull/49

When users navigates through the website, Ajax requests are made to /api/pages/{name} Web API endpoint, and page contents is loaded to React app asynchronously.

To-Do: Need to update the bundling and pre-rendering logic to support this scenario.