I have 2 components:
- Websites: To fetch all websites (~300 websites) from the database.
- DetailWebsite: To display detailed info of a website when a user selects it on the list.
I did 2 tests:
In the first test, I fetched 300 websites in the mount method and assign the result to public $websites. Then I click a website on the list to view detail, it takes ~2s to reload the Websites component then it loads the DetailWebsite component after that.
public function mount()
{
$this->fetchWebsites();
}
public function fetchWebsites() {.....}
But in the 2nd test, I fetched data and pass to the view in render method.
public function render()
{
return view('livewire.guest-posts', ['websites' => $this->fetchWebsites()]);
}
It only takes 800ms-1.5s (The time will have a big difference if I increase the items in the database). Why it can be faster than the 1st test since the mount method only runs one time at initial while render will be run every time I click a website to view detail.
This is my function to get the website detail:
public function selectWebsite($websiteId)
{
$this->selectedWebsiteId = $websiteId;
$this->emitTo('detail-website', 'findWebsite', $websiteId);
}
