I would go with the 1st approach but As far as I know, the pros and cons of each approach are:
1.Sling Model exporter framework-json --> you need to create for sling model for each component model. For the custom model, you would have complete control of each property. It covers the redirect but not include the response of references like XF. 2.Custom servlet framework- json o/p - The custom servlet allows to control of everything but requires framwork validation to avoid unwanted results. e.g. https://aemlab.blogspot.com/2019/07/get-json-response-of-aem-page.html (e.g. It covers both redirect and reference response inclusion This is not production-ready, I created as a PoC) 3. Experience fragments - json,html o/p - same as point 1st but have to make multiple JSON requests to render the content of one page and MSM could be difficult in XF editor 4. Content fragments - json o/p - Limited data type.