For an ecommerce application I would say that infinite scrolling is not the way to go. Infinite scrolling tends to be better for social media/discovery type websites as it allows for more user engagement and tends to be better for mobile as the user simply scrolls and never has to click.
However, these positives come with a price. Mainly, poor page performance, heavy consumption of device resources, inability to bookmark previous locations to come back to it later and unless you have a fixed footer you will typically not ever be able to show that to the user which can have valuable information.
That being said, from the UX perspective, on an ecommerce website it is often better to get the necessary items at once rather than anything you can find because you can better direct your user.
I would recommend a pagination system that allows the user to choose how many items are displayed on their screen. This gives the user more control and allows them to bookmark items as they paginate past. Although there may seem to be more actions for the user to perform, it gives them the tools to more intuitively navigate your products. They will be able to say "Oh, that item was on page 3" and quickly access it.
According to UX Planet, pagination can lead to better conversion rates, a deeper sense of control for the user and allows for easier item location.
If you are wishing to minimize page refresh, you might consider an AJAX solution to load paginated content within the page. Just make sure the URL gets updated with each "page" within your product area.
I recommend reading through the entire UX Planet article as it goes into more detail and could help you with your decision.
As for the better practice between JSON appending to the dom or loading directly as html. I believe that is a better question for the Stack Overflow portion of stack exchange.
Hope this helped.