Standalone REST API & Standalone React SPA vs Django and React combined

Question

I would like to create a React SPA, which is fed by querying a Django REST API. I was reading this, and I encounter this point:

I see the following patterns (which are common to almost every web framework):

1. React in its own “frontend” Django app: load a single HTML template and let React manage the frontend (difficulty: medium)
2. Django REST as a standalone API + React as a standalone SPA (difficulty: hard, it involves JWT for authentication)
3. Mix and match: mini React apps inside Django templates (difficulty: simple)

It seems that in case of an SPA (Single Page Application), it would be better to choose 1. As far as I understand, the React app would just be a big file with all the required css, html and js, right?

So we just create this file, and serve it on a specific endpoint of the Django app. Then, I do not understand the benefits of the "standalone" way of doing things. We would need two different domains, it would cause issues with authentication, and the standalone SPA would in fact just be serving a static file right? Is there a reason why it would be interesting to use a standalone SPA?

But when I read React in Django or React as a standalone?, it is advised to keep front-end and back-end separated. I wonder what I am missing, and what is the benefit of creating a standalone React SPA. reactjs - React in Django or React as a standalone? - Stack Overflow mentions that it would allow backend to be reused by different applications, but I do not understand what would prevent my backend from being reused if it is serving a static file. My backend will not disappear, it will still be here, ready to be reused, right?

Misogamy

Answer 1

pt1. yes the react app is bundled into a couple of files that you can use in your html template

pt2. standalone would be interesting if you already have a large Django project running, and you cannot afford migrating everything to a React SPA

pt3. You are correct in stating the backend is just another application serving content, and can be accessed like any other API. The difference lies in the content being served: When creating a React SPA, the backend is only concerned about what data is requested and what data needs to be persisted to the database. Now your frontend code can focus on specific frontend problems, such as user experience and browsing/navigation of the user: For example utilizing the Redux store, where you can store your JWT token in the browser session, or cache already retrieved data that might be useful on other pages. This offloads the backend considerably because you don't need to send the same data twice.

Heroics