Comments (8)
First of all, this repo is awesome!
Here's something we're currently thinking about in a ASP.NET MVC + React application: We have an application which uses React to render the application shell (header, navigation, footer, etc). We want to use React for that to be able to render a different shell depending on which device you use (responsive design is nice, but having the same markup for all devices comes with limitations).
Now, on some pages the entire page is rendered with React but on some pages we want to render with MVC/Razor (because it's convenient, those pages are static, and we get a lot of functionality from out CMS frameworks Razor helpers).
My plans for this has been something like:
...
<body>
@Html.RenderReactComponent("App", new {
ServerContent = RenderBody(),
Navigation = Navigation.GetItems()
})
</body>
...
And the React part would be something like:
class App extends React.Component {
render() {
return (
<Layout
serverContent={this.props.serverContent}
navigation={this.props.navigation}
/>
);
}
}
class Layout extends React.Component {
render() {
return (
<div>
<header>
<ul>
{this.props.navigation.map(item => <li>...</li>)}
</ul>
</header>
<ServerContent serverContent={this.props.serverContent} />
<footer></footer>
</div>
);
}
}
class ServerContent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{__html: this.props.serverContent}}></div>;
}
}
I don't think this would require you to do anything special (except make it possible to pass an object of props
to the component to render).
But here's the tricky part: the call to RenderBody()
might itself call @Html.RenderReactComponent()
if any pages contain smaller sections of interactive content where we want to use React. And that's not a problem on it's own, but the thing that makes it difficult is that React won't know that there's an inner call to ReactDOM.renderToString()
inside of the ServerContent
passed to App
since it will just get a big string.
I wouldn't expect this project to magically solve this, just wanted to give you some insight into real world use of ASP.NET + React.
Btw, will this be limited to ASP.NET 5, or will it work with the current ASP.NET?
from javascriptservices.
will this be limited to ASP.NET 5, or will it work with the current ASP.NET?
I just learnt about this NodeServices project today. I've got a project called ReactJS.NET that does something similar, and works on both ASP.NET 4 and 5.
from javascriptservices.
@andersekdahl Thanks for that info! That will come in useful when planning further React support. And yes, at the moment, the only plan is to build this for ASP.NET 5, but obviously the source is open and I'm sure you could backport it to older ASP.NET if you wanted.
@Daniel15 Cool project! I just tech-reviewed an article last week that uses ReactJS.NET for server-side rendering. I'd be very interested to know if you have views on other React+ASP.NET crossover functionality that people are looking for.
from javascriptservices.
It would really hepful to see, how to use server side data loading.
NodeServices/samples/react/ReactGrid/ReactApp/components/PeopleGrid.jsx
So this data would be rendered in server side not imported by webpack.
import { fakeData } from '../data/fakeData.js';
I don't mean ajax request, but how to inject data via props or globally injected object in server side for PeopleGrid.
I would love to use server side component rendering for the user profile, that already has the data and not to make additional ajax request, for the data.
from javascriptservices.
Agreed. I'm working on a much larger and more realistic React example here: https://github.com/aspnet/NodeServices/tree/master/samples/react/MusicStore
I'm in the process of putting in server-side rendering now. This includes fetching data asynchronously on load.
from javascriptservices.
that sounds like a very useful sample, I look forward to it
from javascriptservices.
That sample is now published so I'll close this.
from javascriptservices.
thanks!
from javascriptservices.
Related Issues (20)
- package reinstall HOT 2
- s
- Uncaught ReferenceError: vendor_ is not defined when using DllReferencePlugin HOT 5
- aspnet-webpack support? HOT 2
- Module not found : error : Can't resolve './../$$_gendir/ClientApp/app/app.browser.module.ngfactory' HOT 1
- Buffer is deprecated in Node 10
- Expose some of the internal classes HOT 1
- React+Redux Template does not compile with --strict HOT 1
- JavaScriptServices vs Templating github HOT 1
- SSR with Vue requires javascript enabled? HOT 2
- What happened to the template in .NET Core 2.1?
- Ignore
- Delay in domain-task Promise Resolution when Server Side Rendering HOT 1
- How to publish the javascriptservices project (asp.netcore rest api project which uses node api) to IIS 8. The application not wroking after publishing to IIS HOT 2
- UseProxyToSpaDevelopmentServer doesn't auto-refresh browser using an Aurelia ClientApp with HMR HOT 3
- Release date for angular 6 template ? HOT 1
- Using Angular template - all routes are directing to Angular app directly, unable to implement ASP.NET /API route HOT 2
- Files being written to disk with WebpackDevMiddleware HOT 1
- The request matched multiple endpoints HOT 1
- Need clarification
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from javascriptservices.