Javascriptservices: React Redux Template (preview) and server side rendering

[pkellner]

I'm working on a Pluralsight course (building asp.net core and react apps) and the new react templates will factor in a big way based on the current ones. Is there a roadmap for what will be included feature wise? That is, I don't see the server side rendering in the new react-redux templates but maybe I'm missing it.

Please point me at the discussions around react and spas with asp.net core for the 2018 release mentioned.

[SteveSandersonMS]

The primary goal of the updated SPA templates is to align closely with what each SPA framework itself does and the de-facto standards used in those communities. So, the content in the Angular template is very close to an out-of-the-box Angular CLI application, hosted in ASP.NET and set up to run and publish using ASP.NET tools. Likewise the React template is very close to an out-of-the-box create-react-app application, hosted in ASP.NET and set up to run and publish using ASP.NET tools. For the React+Redux template, there isn't a de-facto standard starting point that the community uses, so we added Redux to the CRA template content in the way we think best matches React conventions.

This is all what you'll find in the preview1 release, and the plan is to publish this exact feature set as a supported RTM release of the templates in January. The roadmap, then, is what we already have plus updating to whatever each SPA framework changes as time goes on (e.g., updating to newer CRA conventions, or newer versions of Angular CLI, etc.)

That is, I don't see the server side rendering in the new react-redux templates but maybe I'm missing it.

It's not there, because CRA itself doesn't do SSR. It's not currently possible to use CRA to build a server-compatible bundle, so to implement this you need a custom Webpack setup, which is exactly what we're avoiding out of the box. If CRA gets the ability to build server bundles (like Angular CLI already has), then we'd enable it by default, but until then it's an opportunity for the community to recommend patterns around custom Webpack builds that enable server rendering (presumably using the same underlying APIs as the Angular template does to make the actual calls from .NET to Node).

[pkellner]

Thanks Steve, CRA does not do server side rendering I believe because it's hard to implement in a general purpose kind of way. Will Microsoft be maintaining the current react-redux templates that support server side rendering as both react, react-router and redux update going forward? (or will the current release of the templates be the last one likely of those templates that support server side rendering).

[SteveSandersonMS]

All the existing APIs (e.g., the asp-prerender-* tag helpers) continue to be supported and the libraries behind them are maintained. As for templates themselves, we're only going to ship one version of the SPA templates at a time - it would be hugely confusing to people otherwise - and the future releases will be the new ones based on Angular CLI / create-react-app. So out of the box there won't be an SSR-enabled React template as of the next release, but there could be in the future if CRA gets that feature.

[feafarot]

@SteveSandersonMS Hi!
I'm starting a new project on React + TypeScript and server rendering is crucial for us for the SEO purposes. I wonder maybe there are any examples how to approach this using CRA and aspnet-core? (We are going to use latest .Net Core). I was thinking maybe it would be possible to configure server build with react-app-rewired?

[SteveSandersonMS]

@feafarot As per the thread above, I'm afraid SSR is not supported by CRA natively. I'm not aware of a straightforward or supportable way of doing it, though if you find one I'd be interested to hear about it!

[feafarot]

@SteveSandersonMS Ok, I'll leave a comment if I find one. But could you please point me the docs that describe what need to be done for SSR in ASP.NET Core to work (Or just steps). I'm struggling to find this kind of info)

[SteveSandersonMS]

Please see https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#server-side-prerendering, or if you want to see how it's set up for the Angular CLI template (which is a bit different), see the tutorial at https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#server-side-rendering and how this maps to the underlying Prerenderer.RenderToString call at https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices.Extensions/Prerendering/SpaPrerenderingExtensions.cs#L163

[feafarot]

Thanks a lot!

[pschaeflein]

@SteveSandersonMS While I understand your approach to the templates, I feel that you are remiss in not including TypeScript in the upcoming React templates.

I am working on the training material for integrating Office UI Fabric components into an ASP.NET Core application. The complexity (and amount of steps required) to update the templates to use .tsx files will be a blocker for many devs moving from ASP.NET MVC.

[georgiosd]

@pschaeflein speaking for myself, I find that the removal of TS was a blessing! No longer do I have to define every little piece of React code for a small-medium app.

Anyway, did anyone manage SSR with the React template and wanna share some guidance? :)

[pkellner]

@georgiosd , sadly, create-react-app does not support server side rendering and since the new redux template is based on that, there is practically no way it can be done. I'm pretty sure that the only solution if you want SSR with create-react-app is to run the script "eject" and then you a lot of the value of create-react-app (react-scripts that is).

Hope this helps. I'd be happy if I'm wrong.

[feafarot]

@georgiosd This tool might help but it would be challenging react-app-rewired. This tool basically allows you to intercept webpack and change it's config before it run.

[georgiosd]

I am not sure what the complexity here is - wouldn't this work? https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a

[goofballLogic]

Not including SSR is a big mistake. SSR isn't just about SEO etc. it's an architectural choice to allow server-side rendering of (deep-linked) states within an application. create-react-app is addressing a particular segment of the market where rapid development of applications is the primary concern. The real value of SSR-focused architectures comes into play when you are developing and maintaining a "heavy" application over a long period of time, because it influences the development and testing cycle (e.g. by encouraging progressive enhancement). This is precisely where I would expect Microsoft to be adding value rather than going with the cheap-and-cheerful approach. Furthermore, it's trivial to implement in useful ways which could easily be toggled using some sort of switch. If I can help in any way coming up with a useful proposal, or the rationale for including it in your templates please let me know @SteveSandersonMS