Communication between Django and React

Question

I'm trying to setup a project using Django for backend and React for frontend. The project has several screens, a lot of information in DB and images generated by the backend, and will include some authentication and user permissions for different screens.

According to what I found - the best way to do it is having Django render an html file:

def index(request):
    return render(request, 'frontend/index.html')

which references a .js file:

<script src="{% static "frontend/main.js" %}"></script>

Which is created using Webpack.

This main.js retrieves the data it needs from Django using a REST api:

 fetch("...some Django endpoint..").then(response => ... this.setState(...retrieved data...))

Unlike when just using Django for backend + Django templates for frontend where the backend can just send the context directly to the template:

def index(request):
    context = {'information': .... retrieve info from DB}
    return HttpResponse(loader.get_template('bla/index.html').render(context, request))

and the template can use this info directly, without referencing the backend again:

{% for bla in information %}

I'm wondering if it is a reasonable setup?

It seems excessive to have the frontend use REST for retrieving each piece of information it needs and the backend exposing another REST api for each part of data it needs to supply (Instead of just pushing all of the information to a single dict and sending it over along with the template),

Also, it requires at least 2 RTTs to render the full page (which I guess usually is okay)

Answer 1

According to what I found - the best way to do it is having Django render an html file:

I disagree with this line. I would say it would be best to keep the react app and Django app totally separate. I believe, the Django application should solely provide APIs and adminsite(maybe, depending on your needs). And the frontend should be a standalone app which can be served through NGINX/ExpressJs/Apache etc.

There are several advantages of this setup.

From Django application's perspective, the advantages are:

1. Django will not be burdened to serve the Frontend. Use gunicorn or uwsgi to serve the Django APIs.
2. As Django will provide data through API only, it will provide clarity on how the frontend application will communicate with the backend. I know that you can send data using context when Django serves the react app, but this might cause confusion because of API and context's co-existence.
3. You can use Token based authentication, JWT etc instead of Django's own session based authentication, which have a lot of other advantages.

Freeing your frontend application from backend is the best thing can happen for the frontend. Like for example:

• if you had Django to serve the frontend, you were almost forced to use session based auth(its not like you can't use other auths, but whats the point of having multiple auth systems)
• You couldn't have used server side rendering with Django rendering the frontend.
• Lets say, you are have no idea about how Django works, but you will be forced to setup a Django application in your local machine, because it serves the frontend.
• You couldn't have used ExpressJs to serve the frontend, or use the advantages of using NGINX to serve those contents.
• Deployment would be complicated if you have docker setup. In this case, you would have had to use one Docker Container to serve everything, else you could have used multiple docker containers to serve backend/frontend.
• Lets say, you want to serve the Django application in one server, frontend from other server, but with Django tightly coupled with Frontend, you can't do this setup.
• You can easily connect external RESTful API services without bothering about Django. Even you can use any other frameworks like Tornado, Flask etc(but DRF+Django ORM is awesome) to develop APIs.

There are some more generic advantages of having backend and frontend separated.

There is a fantastic tutorial which you can read on medium about setting up separate Django + ReactJs app.

Answer 2

You can use GraphQL, it has several advantages over REST, f.e.:

• only one endpoint for entire app;
• ability to fetch data with relations between them;
• easy data structure modifications on both sides;
• advanced client with cache/normalization/subscriptions/optimistic updates (I prefer apollo to relay);
• can be used as datasource for static site generation (SEO);
• you can stich other services/APIs;
• ... many more.

Using react Server Side Rendering you can get pages without additional requests - 'prefilled'/rehydrated, ready for interactions - better Time to Interactive.

Tutorial/demo: django-graphql-apollo-react-demo