Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

david19's avatar

Paginate(1) Performance

Hello Team, I have a usecase. I will show only 1 Post to the user, with simplePaginate(1). But the problem is, if the user click next Page, Livewire make a Request to the database, over and over again. I checked in the dev tools, its 9kb every request.

My question: Should i save the Post Collection in a session before? Or should i load all data without pagination, and use Alpine.js for show only 1 post?

Many thanks.

0 likes
13 replies
LaryAI's avatar
Level 58

One possible solution to improve performance in this scenario is to use Livewire's caching feature. By caching the results of the database query, you can avoid making repeated requests to the database.

Here's an example of how you can implement caching in your Livewire component:

use Livewire\Component;
use Illuminate\Support\Facades\Cache;

class PostsComponent extends Component
{
    public $page = 1;
    public $posts;

    public function mount()
    {
        $this->loadPosts();
    }

    public function loadPosts()
    {
        $this->posts = Cache::remember('posts:' . $this->page, 60, function () {
            return Post::simplePaginate(1);
        });
    }

    public function nextPage()
    {
        $this->page++;
        $this->loadPosts();
    }

    public function previousPage()
    {
        $this->page--;
        $this->loadPosts();
    }

    public function render()
    {
        return view('livewire.posts-component', [
            'posts' => $this->posts,
        ]);
    }
}

In this example, we're using the Cache::remember method to cache the results of the Post::simplePaginate(1) query for 60 seconds. The cache key is based on the current page number, so each page will have its own cache entry.

When the user clicks the next or previous page, we update the $page property and call the loadPosts method to fetch the posts from the cache or the database if the cache entry doesn't exist.

Remember to adjust the code according to your specific use case and database model.

1 like
david19's avatar

@LaryAI I dont think cache is the best solution. Because if the user solve the post, then this post should remove from the query. This posts are puzzles. The user can solve the puzzle on every post. This is why cache is not the best solution i think.

Tray2's avatar

As I see it you have two options here.

  1. Keep it as is, with a database hit on each query
  2. Load all into an object and handle it client side with javascript.

I would probably go with option one, as is, since it will handle the puzzles as separate instances.

1 like
david19's avatar

@Tray2 Many thanks. Yes option one is the best and very easy. But it can be heave if 20 users online same time and click next.

Tray2's avatar
Tray2
Best Answer
Level 73

@david19 That is nothing, the database can handle it. If you are using clobs in the db, it might however be wise to create files of them instead, and just store the file name in the database. Then it will not tax the database, and your webserver will handle the loading of the content of the file.

jlrdw's avatar

@david19

Or should i load all data without pagination, and use Alpine.js for show only 1 post?

Never a good idea, what if you had 10 million records, now do you want to really load that many?

I would suggest a database management course as well.

1 like
david19's avatar

Thank you very much for your answers. Yes, I just thought it was a problem. Because normally you have a pagination of 10,20 or 50. But with paginate(1), the user clicks on the Next button every few seconds. And loads 9kb

newbie360's avatar

@david19 Do you have wire:loading in the livewire component blade file, if yes add wire:key on the same element, something like this

<div ...... wire:key="......" wire:loading.class="opacity-50" ......>
	......
</div>
1 like
newbie360's avatar

@david19 if over and over again means when you clicked ONCE only on the next page button, and it infinite sending request, just add the wire:key to the wire:loading same element will solve the problem

Snapey's avatar

have you any idea potentially how many queries run on EVERY request? 3-4 seconds between clicks is a HUGE amount of time. Your system can serve potentially thousands of requests in that time.

1 like

Please or to participate in this conversation.