title: Livewire - Should I fetch data from database in mount method or render method?
body: <p>I have 2 components:</p>
  <ul>
  <li>Websites: To fetch all websites (~300 websites) from the database.</li>
  <li>DetailWebsite: To display detailed info of a website when a user selects it on the list.</li>
  </ul>
  <p>I did 2 tests:</p>
  <p>In the first test, I fetched 300 websites in the <code>mount</code> method and assign the result to <code>public $websites</code>. Then I click a website on the list to view detail, it takes ~2s to reload the <code>Websites</code> component then it loads the <code>DetailWebsite</code> component after that.</p>
  <pre><code>public function mount()
  {
      $this-&gt;fetchWebsites();
  }
  
  public function fetchWebsites() {.....}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1ILMo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ILMo.png" alt="enter image description here" /></a></p>
  <p>But in the 2nd test, I fetched data and pass to the view in <code>render</code> method.</p>
  <pre><code>public function render()
  {
      return view('livewire.guest-posts', ['websites' =&gt; $this-&gt;fetchWebsites()]);
  }
  </code></pre>
  <p>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 <code>mount</code> method only runs one time at initial while render will be run every time I click a website to view detail.</p>
  <p>This is my function to get the website detail:</p>
  <pre><code>public function selectWebsite($websiteId)
  {
      $this-&gt;selectedWebsiteId = $websiteId;
      $this-&gt;emitTo('detail-website', 'findWebsite', $websiteId);
  }
  </code></pre>