Git Product home page Git Product logo

Comments (8)

andersekdahl avatar andersekdahl commented on July 20, 2024

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.

Daniel15 avatar Daniel15 commented on July 20, 2024

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.

SteveSandersonMS avatar SteveSandersonMS commented on July 20, 2024

@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.

llyys avatar llyys commented on July 20, 2024

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.

SteveSandersonMS avatar SteveSandersonMS commented on July 20, 2024

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.

gulbanana avatar gulbanana commented on July 20, 2024

that sounds like a very useful sample, I look forward to it

from javascriptservices.

SteveSandersonMS avatar SteveSandersonMS commented on July 20, 2024

That sample is now published so I'll close this.

from javascriptservices.

gulbanana avatar gulbanana commented on July 20, 2024

thanks!

from javascriptservices.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.