Level 102
Yeah you need to use ajax which is a Javascript thing. Do you use Javascript already?
Nov 5, 2021
12
Level 2
Load More Pagination
I have a server-side rendered app that hits an external API and shows some data on a page. I would like to add some pagination functionality where a user can click read more and more results are appended to the same page.
The problem is I have not found way to append the results to the same page. I am able to receive more results just by changing the query parameters and hitting the API again(in my controller and passing it to view) via a GET request but this overrides the current page results. In order to keep the current page results I'm thinking I would have to store the results in the back end and every API request just append the results. This approach is very messy and probably not viable since I would have to store a lot of unnecessary data. Is there an approach to creating an infinite scroll/ load more functionality server side. I have heard HTTP calls (AJAX) client side might be a solution.
Level 2
@Sinnbeck I have not worked only my front-end at all. Just added some links and buttons to traverse through the site. I have worked with JS, only with static pages though. I am planning on using a front-end framework, with Inertia(although I don't know much about it) like React/Vue but am confused on how that will fit in with this.
Level 102
@electric18 both vue and react can do something like this as they are Javascript frameworks. With inertia I would still use a regular ajax request to get more data though. It is really simple with react, and probably the same with vue
https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js/episodes/1
Level 2
@Sinnbeck Ok cool. AS of now I am making API requests within my controllers to get the initial results. Would it be more practical to get initial results and load results all together using React/Vue HTTP requests? Instead of having to get inital results via controller/laravel and then loading more with React/Ajax
Level 102
@electric18 you will still go through the controller, but for Ajax it will be a new controller that returns json. For inertia it works exactly as now. Inertia converts to json automatically
Level 2
@Sinnbeck Wouldn't the AJAX request happen in a .vue or .js file though?
Level 102
@electric18 yup but it would go to a laravel controller, which then handles the loading of data from the api.
You could do this in vue directly but I assume you need a key to do so. Storing an api key in vue is a bad idea as any user can read it then
Level 2
@Sinnbeck Alright. So the AJAX response would be sent to a controller which would collect the data and the send it back to a view or i guess a component.....?
Level 102
@electric18 yup exactly
https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
The api in question here is your own controller, and not the external api (because of security)
Personally I use react, but in theory it is the same
Level 2
@Sinnbeck ok. Thanks for the info. Really appreciate it!
Level 102
@electric18 happy to help. I assume that the website you are building is some internal tool? Inertia isn't built for seo. If seo is important, you could choose to use regular blade syntax and just add a vue component that is the "load more" element. You don't need to use vue for everything. It can just be a single element on a page
Level 2
@Sinnbeck Actually its a personal web app. Its my first time using laravel and I though I might mix some JS framework with it since Ive never used any. I haven't worked on any of my views just some simple stuff to navigate though pages and test functionality. At this point is using a front-end framework like Vue or React a good option?
Please or to participate in this conversation.