我正在创建一个web应用程序

前端-reactjs和后端java.

前端和后端通过rest相互通信.

在UI上,我显示一个项目列表.我需要筛选一些参数.

Option 1: filter logic is on front end

在这种情况下,我只需要打一个get电话到后端并获取所有项目.

Pros:为此,我不需要将数据发送到后端并等待响应.刷新列表的速度应该更快.

Cons:如果我需要多个前端客户.比如说一款移动apply.我还需要在此应用程序上再次创建过滤器.

Option 2: filter logic is on back end

在这种情况下,我会在应用加载时获取所有列表项.用户更改过滤器选项后,我需要发送带有过滤器参数的get请求,并等待响应.

Pros:过滤器逻辑只写入一次.

Cons:速度可能会慢得多.因为发送请求和返回结果需要时间.

Question:过滤器逻辑应该在哪里?在前端还是后端?或者什么是最佳实践?

推荐答案

在后端进行过滤和限制.如果你有一百万条记录,同时有十万用户试图访问这些记录,你真的想向每个用户发送一百万条记录吗?这会扼杀你的服务器和用户体验(等待100万条记录从后端 for each 用户传播,然后在前端传播,与只获取20-100条记录,然后单击(分页)按钮检索下一个20-100条记录相比,这需要很长时间).除此之外,在前端过滤100万条记录同样需要很长时间,最终也不太实际.

从现实世界的Angular 来看,大多数网站都有一些记录限制:Ebay=50-200条记录,Amazon=20,Target=20...这确保了服务器的快速响应和每个用户的流畅用户体验.

Reactjs相关问答推荐

如何在useEffect中使用useParams()

URL参数和React路由中的点

NextJS(AppRouter)、Apollo(客户端),在根布局中使用ApolloProvider时出错

react 副作用循环

从Microsoft Excel粘贴复制的单元格时,将Excel单元格格式(粗体、下划线、斜体)带入Reaction

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

Redux Store未触发React组件中的重新呈现

for each 子级加载父路由加载器

需要特定的数学函数来标准化动画持续时间

无法使用Reaction日期选取器和Next.js设置初始日期

PWA:注册事件侦听器不会被触发

强制 useEffect 仅运行一次

为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么?

提前输入错误:选项类型上不存在属性名称

react 测试库不测试包含 react 路由 dom V6 的组件

添加 React/Redux 组件模板的 VS Code 扩展

自动重新获取不起作用 - RTK 查询

在 React 中,为什么不能向空片段添加键(短语法)?

如何不旋转 mui 自动完成弹出图标?

为什么我不能使用 formik 更改此嵌套对象中的值