I have a requirement in my project. It is an existing project which is developed in Dotnet MVC + Sitecore 9.1, so some part of the page in that project needs to be implemented in react js, for example, calling the service and filtering the data. My question is how we can integrate the react js with this existing project that has MVC + Sitecore 9.1 ? Is there any way to do all this things? Thanks in advance.
1 Answer
Yes - Sitecore JSS / Headless Services
The officially supported Sitecore Headless Services has full support for ReactJS components on MVC pages in the form of Javascript Renderings or Client Side Embedding.
Sitecore JavaScript renderings
Sitecore JavaScript renderings offer support for both server-side and client-side rendering of ReactJS components on an existing Sitecore MVC page.
Client Side Embedding
Client Side Embedding is a simple approach for client-side only rendering of ReactJS components, especially if not aiming to have ReactJS drive the page layout.
Other Options
There is also a community supported extension of ReactJS.NET which is Sitecore.React. However the following considerations should be taken into account when deciding which direction to go:
- JSS is officially supported and maintained for Sitecore 9.1+
- ReactJS.NET and Sitecore.React are not officially supported by Sitecore
- JSS supports the Experience Editor, Sitecore.React also supports the Experience Editor, but does require you to call
FieldRenderer.Render(item, "field")
in the controller. - JSS supports the Tracker (for Analytics, Personalisation and Optimization),
- Sitecore.React also supports the Tracker with no extra code.
- JSS is more scalable as it has headless support, whereas the community modules above are coupled to .NET MVC.
- JSS has support for Sitecore Experience Accelerator in Sitecore 9.2+
- JSS requires your Sitecore license has this enabled - you will need to check your license details or contact your account manager to confirm.
- Sitecore.React does not require any extra licenses
- Sitecore.React has better support for hybrid modes. JSS can do a JavaScript rendering, but these do not scale well due to the SSR call made to the node server per rendering.
- Sitecore.React does not have a dependency on node.js.
-
3Just to clarify, with Sitecore.React, you don't need to write any extra code or effort for the Experience Editor, it supports this out of the box. Same with Tracker for analytics. Because it is just a controller rendering, it works just the same. You can personalize, a/b test etc... everything that you can do with a controller rendering... :)– Richard Seal ♦Jul 12, 2019 at 14:38
-
3Also - please note that the JSS JavaScript Rendering part is still experimental and is only designed for 1-2 components per page. It does not scale well due to the SSR call to the node service.– Richard Seal ♦Jul 12, 2019 at 18:15
-
Agreed with @Richard Seal about number of JSS component per page for performance Dec 5, 2019 at 18:29
-
Note that JSS Javascript Renderings are deprecated and no longer support since they do not scale well, and it is generally recommended that they are avoided. jss.sitecore.com/docs/techniques/mvc-integration/…– jammykamApr 16, 2021 at 2:06