如何使用 React.js 和 Node.js 仅将所需资源加载到客户端浏览器

Question

I am going to building a very large SPA based ERP SaaS with react.js at frontend which has a really complicated role and permission-based system . I have done some analysis of my application so I realized that I must make a proper architecture of my application so that I shouldn't regret and worry about my application and it's scalability in the future. Mainly I was worried about role and base management. Where I need to switch between different components at first load.

Backend I am working with on this project: Php and node.js

My Exact Problem : I have about 500+ permissions with 100+ roles in my system. Some roles get only 1 to 10 permissions. This results in switching and showing the only component of that permission in the client browser at the frontend. My main problem is Why should I load unwanted components in the client browser of which users don't have permission to access?

Problem Example: Admin has given only 3 permissions to Mr.John in their system. Where system contains total of 100 permissions. Each permission results in switching and viewing 100 parent components. If Mr.John has only 3 permissions which should switch only 3 parent components so why other components are sent to the client browser?

What did I want to do?

After authentication, I want to verify the permission and role of that user at the backend and send only the required resources to the client. So that My application size depends upon the role and permission that a particular user has.

To solve this problem what I thought (Not Sure) :

Before this project I have a similar project at PHP without using any complicated frontend library. It was really easy during the development phase. I have worked with React and Vue. But I have never used Server-side-rendering. I thought the concept of SSR could help me so I went to tons of sources and learned about SSR. (Still, I am not sure that the concept of SSR can help me. )

Please Help me to make the proper decision?

Answer 1

What I understand about your problem is How can browser load exact files based on role and permission instead of all files.

Code-splitting is what you want exactly. This is not just React but for all front-end framework(or library) by using webpack

Read official articles

• https://reactjs.org/docs/code-splitting.html
• https://webpack.js.org/guides/code-splitting/

Maybe entry point of a bundle(webpack) must be simple. After getting a role and permission, the browser has to load components you want. Also, maybe react-router helps you. Or if you consider server-sider-rendering, next.js is for you