django - Django 和 React 之间的通信

Question

我正在尝试使用 Django 作为后端并使用 React 作为前端来设置一个项目。该项目有多个屏幕，数据库中有大量信息以及后端生成的图像，并且会包含一些针对不同屏幕的身份验证和用户权限。

根据我的发现 - 最好的方法是让 Django 渲染 html 文件:

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

引用 .js 文件:

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

这是使用 Webpack 创建的。

此 main.js 使用 REST api 从 Django 检索所需的数据:

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

与仅使用 Django 作为后端 + Django 模板作为前端不同，后端可以直接将上下文发送到模板:

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

并且模板可以直接使用此信息，而无需再次引用后端:

{% for bla in information %}

我想知道这是否是一个合理的设置？

让前端使用 REST 来检索它需要的每条信息，并且后端为它需要提供的每个数据部分公开另一个 REST api(而不是仅仅将所有信息推送到单个字典并将其与模板一起发送)，

此外，它至少需要 2 个 RTT 才能渲染整个页面(我想通常没问题)

Answer 1

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

我不同意这句话。我想说最好将 React 应用程序和 Django 应用程序完全分开。我相信，Django 应用程序应该只提供 API 和管理站点(也许，取决于您的需要)。前端应该是一个独立的应用程序，可以通过 NGINX/ExpressJs/Apache 等提供服务。

这种设置有几个优点。

从Django应用程序的角度来看，优点是:

1. Django 不会承担服务前端的负担。使用gunicorn 或uwsgi 来提供Django API。
2. 由于 Django 将仅通过 API 提供数据，因此它将清楚地说明前端应用程序如何与后端进行通信。我知道当 Django 为 React 应用程序提供服务时，您可以使用上下文发送数据，但是由于 API 和上下文共存，这可能会导致困惑。
3. 您可以使用Token based authentication , JWT等而不是 Django 自己的 session based authentication ，其中有 a lot of other advantages .

将前端应用程序从后端中解放出来对于前端来说是最好的事情。例如:

• 如果你有 Django 来服务前端，你几乎被迫使用基于 session 的身份验证(这并不是说你不能使用其他身份验证，但是拥有多个身份验证系统有什么意义)
• 您不可能使用server side rendering使用 Django 渲染前端。
• 可以说，您不知道 Django 是如何工作的，但您将被迫在本地计算机中设置 Django 应用程序，因为它服务于前端。
• 您不能使用 ExpressJs 来服务前端，或使用 advantages of using NGINX to serve those contents .
• 如果您有 Docker 设置，部署会很复杂。在这种情况下，您必须使用一个 Docker 容器来服务所有内容，否则您可以使用多个 Docker 容器来服务后端/前端。
• 假设您希望在一台服务器中为 Django 应用程序提供服务，而前端则来自另一台服务器，但是由于 Django 与前端紧密耦合，因此您无法执行此设置。
• 您可以轻松连接外部 RESTful API 服务，而无需担心 Django。甚至你可以使用任何其他框架，如 Tornado、Flask 等(但 DRF+Django ORM 很棒)来开发 API。

还有更多generic advantages of having backend and frontend separated .

有a fantastic tutorial您可以在 Medium 上阅读有关设置单独的 Django + ReactJs 应用的内容。