Django & React with django-webpack-loader vs Decoup App Structure 链接到 Rest API?



我正在阅读以下教程:

http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

当你可以将django与react完全解耦,运行一个链接到DRF rest api的独立前端时,我无法完全理解使用django-webpack-loader这样的东西来完全集成react.js和django的附加值是什么。

我可能在这里把苹果比作桔子,但我不确定。有什么帮助吗?

来自django-webpack-loader教程:

现在我们已经交付了构建过程webpack,我们在django方面唯一需要的就是知道在我们的html页面中包括哪个捆绑包。这就是django webpack加载程序的用武之地。当webpack无法构建捆绑包时,它还会引发异常,并显示一些有用的信息来帮助调试问题。在开发过程中,webpackloader还会在生成新捆绑包时阻止请求,以便只加载最新的捆绑包。

这是该加载程序的核心功能。它告诉django哪些是当前要提供的捆绑包。它不会在服务器端呈现react应用程序,也不会替换应用程序需要使用的API。

当开发react应用程序时,你通常会使用某种捆绑器,将你的javascript代码转换到es5,对其进行丑化和缩小。因此,每次你的代码更改时,都会创建一个包含你的新javascript的新捆绑包。很多人都在使用webpack来完成这项任务。

现在,当请求到达django时,它需要提供基本html以及cssjs,以便由包含react应用程序的客户端加载。因此django需要知道要链接的文件的路径。但当webpack重建它们时,路径可能会不断改变。django-webpack-loader可以帮助您跟踪这些更改,并包括要获取的react应用程序的当前捆绑包的正确路径。

它不是API的替代品。它的唯一任务是解析react应用程序文件的正确路径。

编辑

因此,django-webpack加载程序的主要目的是确保正确解析到最新构建的路径,从而可以提供服务。这些路径将改变的原因是什么?

Weppack将一个随机散列附加到一个新的bundle(如bundle.4j2a032fg.js(中。通过这种方式,django可以告诉客户端缓存脚本,这样就不必每次都重新请求它。只有当url/路径发生更改时,客户端才会请求新的捆绑包。但这也需要django知道具有正确哈希的最新捆绑包。

使用Django模板时服务器端渲染会发生吗?

react上下文中的服务器端渲染(SSR(意味着nodejs服务器实际上在服务器上运行一次react应用程序,以生成应用程序的初始标记。然后可以通过应用程序静态地提供这些服务。它减少了用户感知的加载时间,因为应用程序的初始状态将立即显示,并且允许搜索引擎静态分析页面,这有利于SEO。

虽然django确实渲染模板,但默认情况下,它只渲染react应用程序周围的静态html。Django不呈现react应用程序本身。react应用程序仍然需要在客户端上初始呈现自己。因此,要启用django-do-do真正的服务器端渲染,您必须在django旁边运行一个nodejs进程,该进程为django提供react应用程序的静态渲染。

在教程中,他们使用的是模板。模板加载在后端。所以用户可以得到完全渲染的页面。使用django-rest框架,您需要编写单独的前端。更多信息:https://nickjanetakis.com/blog/server-side-templates-vs-rest-api-and-javascript-front-end

最新更新