Focus blur on client routing ideal for SPAs?

I have a single page application. There is a page with products and on the bottom a link to go to the next page. Upon clicking this "next" link the list of products in the DOM is replaced. While the link clicked has stayed the same and maintains focus from the click. Is it better for me to do something like document.activeElement.blur()(which removes focus on currently focused element to reset focus) in that case? Or should I just leave focus on that as is?

I'm unsure what best practice is as with normal server routed pages the focus would be reset with the page load. But I haven't seen any information indicating manually resetting focus on client routing would be the best experience from an accessibility point of view.

I also just found there is differing behavior when resetting the focus. Which begs the question if it should be done if the behavior is different for different browsers? Can be viewed in this codepen that resets focus every 1.5seconds.

• Chrome: focus is cleared but once tab is pressed again we focus on the link next from the one that was previously focused.
• Firefox: same as Chrome.
• Safari: Resets focus order to first focusable item.
• IE11: same as Safari.
• Edge: same as Safari.

Edited for clarity around the JS. And added findings on that JS's behavior in different browsers.