In 2018, most large web applications use a frontend JavaScript framework such as Angular or React.js. Some of these such as Angular are full MVC frameworks, while others such as React are view replacements.

Since React is currently the most popular choice for frontend development, we will briefly look at how React and Django can work together. Architecturally, React replaces the Template layer rather than views of your Django application, as shown in the following diagram:

You can use the Django Rest framework or a simple service view to pass JSON data to React. Rendering of the template will then happen in the browser at the client side.

React interfaces can be more responsive and dynamic without reloading the page. There are entire web applications that can be built without reloading the page called Single Page Application (SPA). However, search engine crawlers typically lack the ability to execute JavaScript, which leads to poor SEO rankings of such sites. To overcome this, sometimes server-side rendering of JavaScript is used to render HTML.

With JavaScript as a viable option in the backend, Django and React are combined in many different ways. Some of the common patterns are:

• React based SPA and Django REST API backend: This an ideal separation of concerns. You will get general API backend for various types of clients such as mobile apps, but you may have to figure out how to support search indexing.
• React based SPA and Django API endpoints: Rather than build an entire API backend, this approach exposes each page as an API endpoint. This is easier for migrating sites piecemeal, but tightly couples your frontend and backend.
• Django templates and bundled React components: Django templates can refer a bundled React via a <script> tag and pass data for React properties. Here you can take advantage of JavaScript build tools such as Webpack to transpile and minify. It works well if your site needs both static and dynamic pages.

As you can see, server-side templates are still important for search engine optimization. A JavaScript heavy page might not be feasible on an underpowered client such as an IoT device. In many similar cases, you might want to render your pages using Django's powerful server-side templating system.