All data to react (frontend) comes via .model.json, which contains all info of the page. If I want to have a component that should not be cached, rather gets called on every request and then .model.json should always gets updated content, how we can do that ?
Use case is : On each request, I want to check whether the user is allowed for particular action and then pass that true/false to the model.json so that react does not render the component (want to achieve CUG at component level )
Do not wish to create a servlet as this info is required before page rendering and ajax call would delay rendering.
Also, can we still add HTL on component in AEM that been mapped with React so that data attributes can be read by react component during rendering ? And then use SDI on that component ?
I wouldn't do that this way, because it can open a security hole. Just call the models.json and let the server-side implementation all the rest. If the user has enough permissions, the "secured" data is included in the model, otherwise it's omitted (or a flag set to false).
And yes, CUG is working with requests to model.json as well.