Memanfaatkan fitur SSR di SvelteKit

Fri Aug 20 2021 08:09:18 GMT+0000 (Coordinated Universal Time)

Jadi, kita akan bahas fitur load function di SvelteKit. Ini fitur favoritku sih. Tapi ya mungkin yang kubahas cuma sekilas. Kalau mau yang lebih detail, nanti bisa cek di docsnya SvelteKit.

Jadi, dengan load function, fetch dilakukan di sisi server sehingga ketika sampai di client, hanya tinggal HTML hasil olahan. Keren kan ya? Udah kayak kalau pakai framework PHP.

Bentuk simpelnya seperti ini:

<script context="module">
 export async function load({fetch}){
  let data = await fetch("https://kucing.com")
  data = await data.json()

  return {
   props: {
    namaKucing: data
   }
  }
 }
</script>

<script>
 export let namaKucing
</script>

<ol>
 {#each namaKucing as x}
  <li>{x}</li>
 {/each}
</ol>

Simpel kan?

Nah, sekarang kita mau coba pakai POST:

<script context="module">
 export async function load({fetch}){
  let data = await fetch("https://kucing.com", {
   method: "post",
   body: "nama=anggora&tipe=rumahan",
   headers: {
    "Content-Type": "application/x-www-form-urlencoded"
   }
  })
  data = await data.json()

  return {
   props: {
    namaKucing: data
   }
  }
 }
</script>

<script>
 export let namaKucing
</script>

<ol>
 {#each namaKucing as x}
  <li>{x}</li>
 {/each}
</ol>

Jadi kalau yang POST, perbedaannya di dalam fetchnya ya...

Nah, sekarang mau kita gabung dengan membaca params dari page. Atau gampangannya kayak gini: nama file kita [tipeKucing].svelte, maka kita mau ambil variabel tipeKucing itu. Nah, kodenya kayak gini:

<script context="module">
 export async function load({fetch, page}){
  let data = await fetch("https://kucing.com", {
   method: "post",
   body: `nama=anggora&tipe=${page.params.tipeKucing}`,
   headers: {
    "Content-Type": "application/x-www-form-urlencoded"
   }
  })
  data = await data.json()

  return {
   props: {
    namaKucing: data
   }
  }
 }
</script>

<script>
 export let namaKucing
</script>

<ol>
 {#each namaKucing as x}
  <li>{x}</li>
 {/each}
</ol>

Buat yang mau donasi untuk kelangsungan komunitas Echlus, silahkan transfer ke halaman donasi kami.