我正在启动一个新的应用程序，用于Nodejs和React的实践。 在我的公司中，我正在从事React / graphql项目，但是没有针对后端和前端的设计模式，也没有任何可行的方法。 我想建立一个社交网络，这很简单，但是我想介绍一些进行练习的设计模式。 React App和节点服务器是否有任何设计模式或最佳实践？
节点后端和React应用的设计模式
•
问答
moochendi 回答：节点后端和React应用的设计模式
设计模式很重要，但是当涉及到React和NodeJS时，很多人在尝试使一个类似于骨架的React应用程序与一个简单的（再次类似于骨架的）NodeJS Web服务器无缝地工作时遇到了问题。表达。到目前为止，这两个最普遍的问题是在生产环境中运行webpack-dev-server并在添加API时违反了CORS安全性。
因此，我将省略设计模式（当超越简单的客户端和后端原型时，可以并且应该在以后考虑），而将精力集中在最佳实践上。我将其定义如下：
-
具有用于支持性能的客户端的构建系统。实际上，这意味着要使脚本包的尺寸最小。这是通过使用捆绑器执行的树状摇动，在产品构建中最小化和压缩包来实现的。压缩文件应包括gzip和Brotli，后者的捆束尺寸比gzip减少约19％。
-
可以选择性地将React应用程序（它是一个整体式SPA）拆分为几个SPA，每个SPA都有自己较小的包。
-
拥有一个网络服务器，可通过禁用对React构建生成的通常很小的.html文件的缓存并为大型脚本包启用长期缓存来进一步提高性能。
-
调试方便。实际上，这意味着能够使用相同的调试器（例如单个VS Code实例）来调试开发在浏览器中运行的客户端代码和后端NodeJS代码。加上支持实时重新加载的功能。也可以从VS Code切换到Chrome DevTools进行客户端代码调试。在生产环境中，这意味着可以调试客户使用的最小化和压缩的脚本包，以重现该客户报告的问题。同样，使用VS Code或Chrome DevTools。
-
为CORS问题留出空间，并且不要在生产中使用webpack-dev-server。
-
具有用TypeScript编写的客户端和后端测试用例以及其他所有内容。
-
在Web服务器中实施SPA后备。这意味着服务器应将对未知页面的请求重定向到SPA登陆页面。例如，使用
historyApiFallback设置（专门为支持SPA而存在）在webpack-dev-server中启用了此行为。任何SPA都需要回退行为，因为用户可以在导航中看到任何内部页面的路径栏，可以手动重新输入，然后按Enter键或刷新浏览器。在这两种情况下，Web服务器都被请求对其不知道的内部SPA页面的请求打中，并且对404错误的响应对用户而言并不好。出于安全考虑，回退容限应有其限制，显然无效请求仍应触发错误。