I'm developing a wordpress theme that uses REST API mostly. Normally I'm just creating a custom endpoint and pulling the data from that endpoint with vanilla JS's fetch.

My problem is: I have a sidebar that contains posts and contains pagination with rest api. I coded a custom endpoint for there and all good.

But my question is: There are 2 different functions right now for this sidebar.

1. a. Rest API custom endpoint function that creates an endpoint for the client side.

   b. And one JS function that pulls this data and writes to sidebar with fetch(). I use for this for the pagination and sidebar data gets updated every 15 seconds with interval().

2. (to call sidebar on page load from backend) Almost exact same function that I created for REST API to show sidebar on page load. Same query, everything is same. Difference is there is no JS fetch() and making the JS job in the backend with PHP. (like pagination rules, htmls etc.)

I felt bad about it. I mean there are 2 different things doing the almost same thing.

Is there way that I can bypass 2nd way? I mean this way only stands to load same sidebar with the page.

I tried to load the sidebar via javascript with Rest API endpoint and with on DOM load. But it looks hacky. Sidebar comes after the page loaded. Tried to ASYNC method for the javascript to prevent page load until sidebar has loaded but it looked more hacky.

I hope I was able to explain my question, English is not my main language; sorry for my bad grammar. :)