I have built a website in React which has different components. I make those components visible/invisible based on the role of the logged-in user. Also, I have used react router. My doubt is are all of those components sent to the user (client browser) when the user hits the website first time itself (and then show/hide them as per user role and navigate across them using react router)? If yes, is it a good practice (performance and security wise), if not what is standard approach.
It is not a good practice send to user all in one bundle. For example admin panel (possibly has vulnerable code). You should use react lazy to send components only after login based on user role. If we talk about performance it also the best split bundle to the chunks for fastest first load.