DEV Community: Nutchapon Makelai

Sveltekit การทำงานกับ remote function [Part 2]

Nutchapon Makelai — Fri, 10 Jul 2026 02:00:00 +0000

สวัสดีครับเพื่อนๆ! 👋 กลับมาเจอกันอีกแล้วตามสัญญา! หลังจากบทความที่แล้วเราได้ทำความรู้จักกับพระเอกอย่าง query แบบเบสิกกันไปพอหอมปากหอมคอ วันนี้เราจะพามาอัปเลเวลความแอดวานซ์ขึ้นไปอีกขั้นครับ 🚀

ใครที่เคยปวดหัวกับปัญหา N+1 ดึงข้อมูลซ้ำซ้อนจน Database ร้องขอชีวิต หรือกำลังอยากทำข้อมูลแบบ Real-time อัปเดตสดๆ ลื่นๆ... ปูเสื่อรอเลยครับ! เพราะวันนี้เราจะมาเจาะลึกทีเด็ดของ SvelteKit Remote function อีก 2 ท่า นั่นก็คือ query.batch() ฮีโร่ผู้มาช่วยมัดรวมรีเควสต์ และ query.live() สายสตรีมมิ่งข้อมูลแบบสดๆ! 🔥 จะเจ๋งและว้าวแค่ไหน ลุยกันเลยครับ! 👇

📑 query.batch

ตัวนี้ทำงานคล้ายๆ รุ่นพี่ query ปกติเลย แต่ query.batch เกิดมาเพื่อเป็นฮีโร่แก้ปัญหาเวลาเราต้องเรียก query ข้อมูลพร้อมกันหลายๆ ตัว (batches) ภายใต้ microtask เดียวกัน 🦸‍♂️ ซึ่งมันช่วยปราบปัญหา N+1 ได้แบบอยู่หมัด! แทนที่ข้อมูลแต่ละชิ้นจะต้องแยกกันยิง request ไปหา database มันกลับใช้วิธี รวมกลุ่ม (group) query ทั้งหมดมัดรวมกัน แล้วส่งไปทีเดียวจบเลย! 📦

พอมาถึงฝั่ง server (ไฟล์ *.remote.js) สิ่งที่มันได้รับจะไม่ใช่ตัวแปรเดี่ยวๆ แต่จะมาเป็น array ของตัวแปรทั้งหมดแทน 🍱 และทริคคือ ตอนเราส่งผลลัพธ์กลับไป เราจำเป็นต้องส่งกลับไปใน รูปแบบของฟังก์ชัน หน้าตาแบบนี้
(ค่าตัวแปรรับเข้า(input): Input, ค่าตำแหน่ง(index): number) => Output

มึนๆใช่ม่ะ 😵‍💫 งั้นเรามาดูตัวอย่างกัน

import * as v from 'valibot';
import { query } from '$app/server';
import * as db from '$lib/server/database';

export const getWeather = query.batch(v.string(), async (cityIds) => {
    const weather = await db.sql`
        SELECT * FROM weather
        WHERE city_id = ANY(${cityIds})
    `; //ตรงนี้จะส่ง cityIds ที่เป็น array ไปให้ database ค้นหาและส่งค่ากลับมา 🔍
         // ออกมาเป็น weather array ที่มีค่าข้อมูลของ id เมือง, ชื่อเมือง และสภาพอากาศ 🌤️

    const lookup = new Map(weather.map(w => [w.city_id, w])); //ตรงส่วนนี้จะทำการสร้าง Map ใหม่ 🗺️
        //โดยทำการ map array ให้เป็น array แบบ 2 มิติ [key,value]

        //หลังจากนั้นเราจะ return โดยให้สังเกตว่า cityId คือค่าที่เรา input เข้ามา แต่เป็น object เดี่ยวๆ
        //ไม่ใช่ array เหมือนที่รับเข้ามาผ่าน argument ด้านบนนะ ⚠️
        //และการ return ยังเป็น functions ที่จะใช้ Map.get(key) เพื่อดึงค่าข้อมูล weather ของเมืองนั้นๆ ออกไป 📤
    return (cityId) => lookup.get(cityId); 
});

<script>
    import CityWeather from './CityWeather.svelte';
    import { getWeather } from './weather.remote';

    let { cities } = $props(); // รับค่าของ cities จาก props ที่ส่งเข้ามา (อาจจะมีมากกว่า 5 ข้อมูล) 🏙️
    let limit = $state(5); // ตั้ง limit ว่าจะเอาข้อมูลกี่ตัว 📏
</script>

<h2>Weather 🌤️</h2>
<!-- ทำการ slice เพื่อดึงข้อมูล 5 ตัวหน้าสุดออกมา -->
{#each cities.slice(0, limit) as city}
    <h3>{city.name}</h3>
        <!-- ส่ง city id เข้าไปยัง remote function แบบ 1-1 
             แต่ remote function จะเอาไปมัดรวมเป็น batch (array ของ city.id) ให้อัตโนมัติ ✨
             และส่งค่า weather ที่ได้รับกลับมาเข้าไปยัง component CityWeather ต่อไป 
        -->
    <CityWeather getWeather(city.id)} weather="{await"/>
{/each}

{#if cities.length > limit}
    <button onclick={() => limit += 5}>
        Load more ➕
    </button>
{/if}

โดยขั้นตอนการทำงานแบบสรุปจากโค้ดด้านจะเป็นแบบนี้ครับ

1️⃣ ฝั่ง Client: สั่งงานแบบเดี่ยวๆ แต่แอบรอเพื่อน (Microtask Grouping)
จากโค้ดในหน้า .svelte เรามีการใช้ #each วนลูปสร้าง <CityWeather> และเรียกใช้ getWeather(city.id) ทีละเมือง

ซึ่งแทนที่ฟังก์ชัน getWeather จะวิ่งไปหา Server ทันทีทีละรอบ (ซึ่งถ้ามี 5 เมือง ก็จะยิง 5 Requests) ตัว SvelteKit จะทำการ "หน่วงเวลา" ไว้สั้นๆ ในระดับ Microtask เพื่อรอดูว่าในจังหวะนั้นมีการเรียก getWeather ตัวอื่นๆ อีกไหม

2️⃣ การมัดรวม (Batching) ก่อนส่ง
เมื่อ SvelteKit เห็นว่ามีการเรียก getWeather 5 ครั้งพร้อมๆ กัน มันจะทำการ มัดรวม (Batch) ค่า city.id ทั้ง 5 ตัวนั้นเข้าด้วยกันให้กลายเป็น Array ก้อนเดียว เช่น ['bkk', 'cnx', 'hdy', ...] แล้วส่ง Request ก้อนนี้ไปหา Server แค่ ครั้งเดียว! 📦

3️⃣ ฝั่ง Server: รับก้อน Array ไปทำงานรอบเดียว
ตัดภาพมาที่ไฟล์ weather.remote.js บน Server

export const getWeather = query.batch(v.string(), async (cityIds) => { ... })

สิ่งที่รับเข้ามา: พารามิเตอร์ cityIds จะไม่ได้รับค่าเป็น string เดี่ยวๆ แล้ว แต่จะได้รับเป็น Array ['bkk', 'cnx', 'hdy'] ตามที่ Client มัดรวมมาให้
การ validation จะเป็นการตรวจสอบ แยกเดี่ยว ของแต่ละข้อมูลภายใน Array ที่ส่งเข้ามา
การ Query (แบบประหยัดพลังงาน): เราเอา Array นี้ไปดึงข้อมูลจาก Database ในรอบเดียว (ผ่านคำสั่ง ANY(${cityIds}) หรือ IN (...)) ทำให้ Database ทำงานแค่ 1 ครั้ง ได้ผลลัพธ์สภาพอากาศของทุกเมืองกลับมาพร้อมกันเลย 🌩️

4️⃣ ฝั่ง Server: จัดเรียงข้อมูลให้ค้นหาง่าย (Mapping)

const lookup = new Map(weather.map(w => [w.city_id, w]));

พอได้ข้อมูลมาจาก Database มันมักจะมาเป็น Array ธรรมดา เราจึงเอามาจัดลง Map (พจนานุกรมข้อมูล) โดยให้ city_id เป็น Key และ w (ข้อมูลสภาพอากาศ) เป็น Value เพื่อให้เดี๋ยวตอนดึงข้อมูลกลับไป จะได้ค้นหาได้ไวๆ ⚡ (ไม่ต้องไปนั่งลูปหาใหม่ทีละตัว)

5️⃣ ฝั่ง Server: จุดพีค! การ Return ออกมาเป็น "ฟังก์ชัน"

return (cityId) => lookup.get(cityId);

สังเกตว่าเรา ไม่ได้ return ข้อมูลกลับไปตรงๆ แต่เรา return ฟังก์ชัน กลับไปแทน! 🤯 เพราะ SvelteKit ฝั่ง Client ต้องการคนช่วย "แจกจ่าย" ข้อมูลให้ถูกคน มันจะเอาฟังก์ชันนี้ไปทำงานต่อ โดยจะโยน city.id เดี่ยวๆ เข้ามาถามฟังก์ชันนี้ว่า "สภาพอากาศของเมืองนี้คืออะไร?" ฟังก์ชันนี้ก็จะไปหยิบค่าจากตู้ lookup ที่เราสร้างไว้ในข้อ 4 ส่งคืนให้

6️⃣ ฝั่ง Client: แจกจ่ายผลลัพธ์กลับสู่ Component

เมื่อ SvelteKit ฝั่ง Client ได้รับฟังก์ชันแจกจ่ายของมาแล้ว มันก็จะทำหน้าที่แกะกล่อง Batch ออก แล้วส่งผลลัพธ์ (ข้อมูลสภาพอากาศ) กลับคืนไปให้ <CityWeather> แต่ละตัวตามที่เคยขอไว้แบบ 1 ต่อ 1 อย่างแม่นยำเป๊ะ! 🎯

🟢query.live

ตัวนี้ก็อยู่แก๊งเดียวกับ query แต่ทีเด็ดคือมันพกความสามารถในการดึงข้อมูลแบบ real-time จาก server มาด้วย!🔥 แต่จุดที่ต้องจำไว้คือ callback ของ query.live จะเป็นฟังก์ชันสไตล์ generator function และของที่มันคายกลับมาให้เราจะอยู่ในรูปร่างหน้าตาของ AsyncIterable แทน ลองดูตัวอย่างการใช้ query.live ทำนาฬิกาแสดงเวลาทุกๆ 1 วินาทีกัน ⏰

`getDateLive.remote.js`

import { query } from '$app/server';

export const getTime = query.live(async function* () {
    while (true) {
        yield new Date();
        await new Promise((f) => setTimeout(f, 1000));
    }
});

ในช่วงที่กำลังทำ server-side rendering อยู่ ตัว await getTime() ที่โดนเรียกจากฝั่ง client จะคายค่าจาก yield ออกมาให้เราก่อนเป็นออเดิร์ฟจานแรก 🍽️ แล้วมันก็จะพักเบรกการทำซ้ำทันที ซึ่งข้อมูลจานแรกนี่แหละ จะถูกหยิบมาใช้ต่อตอนทำ hydration นั่นเอง 💧

พอข้ามมาฝั่ง client side เจ้าตัว query.live จะทำตัวเป็นสายสืบที่เชื่อมต่ออยู่ตลอดเวลาตราบใดที่มันยังเกาะติดอยู่กับ component 🕵️‍♀️ และถ้ามีหลาย instance เกิดขึ้น พวกมันก็จะใจดีแชร์ท่อเชื่อมต่อเส้นเดียวกันทั้งหมด 🤝 แต่เมื่อไหร่งานเลี้ยงเลิกรา ไม่มีใครเรียกใช้มันแล้ว การเชื่อมต่อก็จะถูกตัดฉับ! การ stream หยุดลง และระบบทำซ้ำก็จะหยุดตามไปด้วย 💤

นอกจากนี้ เจ้า live query ที่ถูกส่งข้ามมาฝั่ง client ยังใจดีแถม property และ method พิเศษมาให้ใช้เพิ่มอีก 2 ตัวนะคือ:

connected 🔌
reconnect() 🔄

`src/routes/time/+page.svelte`

<script>
    import { getTime } from './time.remote.js';

    const time = getTime();
</script>

<p>{await time}</p>
<p>connected: {time.connected}</p>
<button onclick={() => time.reconnect()}>Reconnect 🔄</button>

ถ้าวันดีคืนดีเกิดเหตุไม่คาดฝัน เน็ตหลุด หรือเกิด error จนคุยกับ remote function ไม่รู้เรื่อง 💔 ค่า connected จะเปลี่ยนเป็น false ทันที แต่ไม่ต้องตกใจไป! Sveltekit จะพยายามฮึดสู้กู้การเชื่อมต่อให้เราอัตโนมัติ (ใช้วิธีเช็คซ้ำแบบ exponential backoff คือยิ่งต่อไม่ติด ก็จะยิ่งทิ้งช่วงรอนานขึ้นเรื่อยๆ) ซึ่งในจังหวะนั้น ค่า window.navigator.onLine ของเบราว์เซอร์ก็จะกลายเป็น false ไปด้วยนะ 📉

แต่ถ้า window.navigator.onLine กลับมาเป็น true และระบบเชื่อมต่อกลับไปหา remote function บน server ได้สำเร็จ ค่า connected ก็จะกลับมายิ้มแฉ่งเป็น true อีกครั้ง! 🌈

และที่สำคัญ สำหรับ query.live จะไม่มี method refresh() ให้เรียกนะ ❌ เพราะตัวมันเองสุดยอดอยู่แล้ว สามารถอัปเดตข้อมูลตัวเองได้ตลอดเวลาแบบ self-updating เลย 😎

แต่ถ้าใครสายฮาร์ดคอร์ 🎸 อยากล้วงลึกเข้าไปจัดการข้อมูลในระดับ stream เอง แทนที่จะนั่งรอข้อมูล reactive แบบง่ายๆ ผ่าน current คุณก็สามารถสร้าง async function มารับช่วงต่อ แล้วเปิดใช้ for...await กวาดข้อมูลข้างในมาเล่นได้เลย! 🌪️ เพราะว่าเนื้อแท้แล้ว ของที่ remote function แบบ live โยนกลับมาให้ ก็ยังมีหน้าตาเป็น async-iterable อยู่ดีนั่นแหละ

`src/routes/time/+page.svelte`

async function logTimes() {
    for await (const value of getTime()) {
        console.log(value);
        if (someCondition) break;
    }
}

ซึ่งผู้ใช้งานที่ดึง live query ตัวเดียวกันมาเล่นในช่วงเวลาเดียวกัน (ไม่ว่าจะใช้ท่า await, current หรือเปิดลูป for...await) ระบบจะจับยัดให้ใช้ท่อการเชื่อมต่อเส้นเดียวกันทั้งหมดเลยทันที

ข้อควรระวังฝั่ง Client: ⚠️ สำหรับท่า for...await นั้น ข้อมูลชิ้นแรกสุดที่จะวิ่งเข้ามาหาเรา จะเป็นข้อมูลอัปเดตตัว "ล่าสุด" ที่โดนดึงมาจาก instance อื่นๆ (most-recently-received value) 🆕 และถ้าสมมติว่าฝั่ง server สาดข้อมูลมาเร็วจัดจน Client ย่อยไม่ทัน ระบบจะ เก็บไว้เฉพาะค่าล่าสุดที่ค้างอยู่เท่านั้น 📌 (เพราะคอนเซปต์ของ Live Stream ไม่ใช่ Event Log นะครับ มันเลยไม่ได้เก็บประวัติย้อนหลังทั้งหมดไว้ให้)

ส่วนการทำงานบนฝั่ง Server: 🖥️ คำสั่ง for...await บนเซิร์ฟเวอร์จะทำงานแบบแชร์รอบกัน (Shared Iteration) ร่วมกันในแต่ละ Request ส่งผลให้แม้ว่าจะมีผู้ใช้หลายคนแห่มาเรียกใช้พร้อมๆ กันใน Request เดียวกัน มันก็ฉลาดพอที่จะไม่สั่งให้ตัว Generator ต้องวิ่งเต้นรันซ้ำซ้อนให้เปลืองแรง 🧠

🚨🚨 สำคัญ!! ห้ามไปเผลอทำแคช (Cache) ผลลัพธ์ของ Live Query ใน Service Worker เด็ดขาด! เพราะมันจะทำให้ข้อมูลที่ถูกก๊อปปี้ไป ดันนั่งสตรีมตัวเองต่อไปเรื่อยๆ อย่างไม่รู้จักเหน็ดเหนื่อย แม้ว่าเราจะกดปิดหน้าเว็บทิ้งไปแล้วก็ตาม 😱 และอย่าลืมเช็คให้ชัวร์ด้วยว่า ระบบดักแคชของคุณได้เตะเอา Responses ที่แปะป้าย Cache-Control ว่า no-store ออกไปจากการทำแคชเรียบร้อยแล้ว 🧹

เป็นยังไงกันบ้างครับเพื่อนๆ กับความทรงพลังของ query.batch() และ query.live() 🤯 บอกเลยว่า SvelteKit รอบนี้เขาทำการบ้านมาดีมากจริงๆ ช่วยให้ชีวิต Dev อย่างเราง่ายขึ้นเยอะ โค้ดคลีนขึ้น แถมประหยัดทรัพยากรฝั่ง Server ไปได้อีกเพียบ! 🎉

แต่เดี๋ยวก่อน... มหากาพย์ Remote function ของเรายังไม่จบลงแค่นี้นะครับ! 🎬 ที่ผ่านมาเราเน้นแต่เรื่องการ "ดึงข้อมูล" มาแสดงผลกันไปแล้ว แล้วถ้าเราอยากจะ "ส่งข้อมูล" หรือบันทึกอะไรบางอย่างกลับไปที่ Server ล่ะ ต้องทำยังไง? 🤔

ในบทความหน้า เราจะเปลี่ยนฟีลจากตระกูล query ไปทำความรู้จักกับ Remote function อีกประเภทหนึ่งที่เกิดมาเพื่อจัดการเรื่องการส่งข้อมูล (Mutation) โดยเฉพาะ! นั่นก็คือ form 📝 ครับผม! มันจะมาช่วยลบภาพความยุ่งยากของการจัดการฟอร์มแบบเดิมๆ ออกไปได้ยังไง เตรียมตัวรอติดตามกันในบทความถัดไปได้เลยครับ! แล้วเจอกัน 😉✨

Sveltekit การทำงานกับ remote function [Part 1]

Nutchapon Makelai — Fri, 03 Jul 2026 06:31:24 +0000

สวัสดีครับเพื่อนๆ! 👋 วันนี้จะมาเล่าเรื่องน่าตื่นเต้นให้ฟังนะเพื่อนๆ สำหรับใครที่เป็นสาย SvelteKit เตรียมตัวอัปเดตความรู้ใหม่กันได้เลย เพราะตอนนี้เขามีของเล่นใหม่ที่กำลังอยู่ในช่วงทดลองใช้งาน แต่บอกเลยว่าว้าวมาก! เราไปดูกันดีกว่าว่ามันคืออะไร...

📡 Remote function คืออะไร

เป็น function ตัวใหม่ ✨ (ที่คาดว่าจะเป็น new way to implement สำหรับ Sveltekit 3.0) เอาไว้ใช้สื่อสารพูดคุยกันระหว่างฝั่ง client และ server ของ Sveltekit นั่นเอง 💬

ความเจ๋งคือเราสามารถเรียกใช้มันจากมุมไหนของ Sveltekit ก็ได้ 🌍 ไม่จำเป็นต้องจำกัดแค่ฝั่ง server หรือ client แต่จุดสำคัญคือ การทำงานของมันจะเกิดขึ้นที่ฝั่ง server เสมอ 👍 นั่นหมายความว่ามันสามารถทะลุทะลวงไปดึงข้อมูลหรือโมดูลที่เป็น server-only ได้สบายๆ เช่น ตัวแปร environment ที่เราประกาศไว้ หรือพวกฐานข้อมูลต่างๆ ก็ดึงมาได้ชิลๆ เลย 😎

เวลาจะใช้งาน เราจะต้องใช้ท่าการ await แบบใหม่ของ Sveltekit ⏳ ที่ช่วยให้คุณโหลดหรือดึงข้อมูลแบบ promise มาใช้ใน component ของคุณได้ทันที 🚀

⚠️ หมายเหตุ: ตอนนี้ทั้ง await และ remote function ยังอยู่ในช่วงทดลองใช้งาน 🧪 (experimental) นั่นแปลว่า syntax บางอย่างอาจจะมีการปรับเปลี่ยนหรือบินหายไปบ้างในอนาคต 🥲 แต่แกนหลัก (core functional) ของมันก็จะยังทำงานได้ตามที่เราคาดหวังแน่นอน

ถ้าใครคันไม้คันมืออยากลองของใหม่ตอนนี้ สามารถไปเปิดโหมด experimental ได้ที่ไฟล์ svelte.config.js(.ts) ตามโค้ดด้านล่างนี้เลย 👇

`svelte.config.js(.ts)`

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        experimental: {
            remoteFunctions: true
        }
    },
    compilerOptions: {
        experimental: {
            async: true
        }
    }
};

export default config;

🏃‍♂️ Let get started!!

เราสามารถเริ่มใช้ remote function ได้ง่ายๆ ผ่านการสร้างไฟล์นามสกุล .remote.js หรือ .remote.ts 📝 ซึ่งตอนนี้มี function ให้เราหยิบมาเล่นทั้งหมด 4 ตัวด้วยกันคือ:

query (ที่เราจะมาพูดถึงกันในบทความนี้)
form
command
prerender

หลักการทำงานเบื้องหลังคือ เวลาที่เรา import ตัว remote function ไปใช้ในฝั่ง client มันจะถูกแอบแปลงร่างเป็นโค้ดที่หุ้มด้วย fetch ในช่วง build time 🏗️ นั่นหมายความว่าระบบจะใจดีสร้างเส้น HTTP endpoint ให้เราแบบอัตโนมัติ ✨ ด้วยเหตุนี้เราเลยเอาไฟล์ .remote.js หรือ .remote.ts ไปแปะไว้ตรงไหนก็ได้ภายใต้โฟลเดอร์ /src

🚨 ยกเว้น! ห้ามเอาไปวางในโฟลเดอร์ /src/lib/server เด็ดขาดนะ เพราะทำไมนะหรอ เพราะมันเป็น folder ที่ถูกล๊อคชื่อไว้เพื่อใช้เป็น server-only module ยังไงละ❗

🔍 query

คำสั่งนี้เอาไว้สำหรับค้นหาข้อมูลแล้วดึงมาแสดงผลชิลๆ 🕵️‍♂️ อารมณ์เหมือนเวลาเราเรียก HTTP Method GET นั่นแหละ

ทริคเล็กๆ: ถ้าข้อมูลของเราเป็นแบบคงที่ (static data) ไม่ค่อยเปลี่ยน แนะนำให้เลี้ยวไปใช้คำสั่ง prerender จะเวิร์คกว่า เพราะตัว query จะไม่สามารถทำงานได้ถ้าหน้า page นั้นถูกตั้งค่าเป็น prerender ทั้งหมด

มาดูตัวอย่างการสร้าง remote function ด้วยคำสั่ง query ภายใต้ไฟล์ src/routes/blog/data.remote.js กันครับ

`src/routes/blog/data.remote.js`

import { query } from '$app/server';
import * as db from '$lib/server/database';

export const getPosts = query(async () => {
    const posts = await db.sql`
        SELECT title, slug
        FROM post
        ORDER BY published_at
        DESC
    `;

    return posts;
});

📌 หมายเหตุ: ในตัวอย่างต่อๆ ไป จะเห็นว่ามีการ import พวก $lib/server/database และ $lib/server/auth เข้ามาด้วย อันนี้เป็นแค่โมดูลจำลองเพื่อให้เห็นภาพการทำงานเฉยๆ นะ ของจริงคุณสามารถเชื่อมต่อไปยัง database หรือ service ตัวไหนก็ได้ตามใจชอบเลย 🔌 ส่วน db.sql ก็เป็นแค่ฟังก์ชันสมมติให้ดูว่าเรากำลังคุยกับ database อยู่เท่านั้นจ้า

ซึ่งตัวข้อมูลที่จะส่งกลับมาผ่านฟังก์ชัน getPosts จะทำงานอยู่ในรูปแบบ Promise ⏳ ซึ่งเดี๋ยวมันจะถูกแปลงร่างออกมาเป็นข้อมูล posts ให้เราใช้งานได้นั่นเอง 📄

`src/routes/blog/+page.svelte`

<script>
    import { getPosts } from './data.remote';
</script>

<h1>Recent posts</h1>

<ul>
    {#each await getPosts() as { title, slug }}
        <li><a href="/blog/{slug}">{title}</a></li>
    {/each}
</ul>

สังเกตไหมว่าเวลาเราหยิบ remote function ประเภท query มาใช้ในฝั่ง client side เราจะต้องแปะ await ไว้เสมอ ซึ่งถ้าแจ็คพอตแตก ฟังก์ชัน query เกิด error ขึ้นมา 💥 ระบบก็จะเด้งพาเราไปยังหน้า +error.svelte หรือแสดงผลตาม <svelte:boundary> ตัวที่อยู่ใกล้ที่สุดให้เอง 🛡️

แต่เดี๋ยวก่อน! ฟังก์ชัน query ที่ถูก import เข้ามาในฝั่ง client ยังมี properties ลับๆ ให้เราเรียกใช้เพื่อจัดการเรื่องเวลา (timing) ได้เนียนขึ้น แถมไม่ต้องพึ่ง await ตลอดด้วยนะ โดยมี properties ให้ใช้คือ:

loading ⏳
error ❌
current ✅

`src/routes/blog/+page.svelte`

<script>
    import { getPosts } from './data.remote';

    const query = getPosts();
</script>

<h1>Recent posts</h1>

{#if query.error}
    <p>จะ render ตอนเกิด error ขึ้น 🚨</p>
{:else if query.loading}
    <p>จะ render ระหว่างที่ query function นั้นทำการ fetch ข้อมูล 🔄</p>
{:else}
// จะ render เมื่อ query function ทำการ fetch เรียบร้อย และสำเร็จ ✨
    <ul>
        {#each query.current as { title, slug }}
            <li><a href="/blog/{slug}">{title}</a></li>
        {/each}
    </ul>
{/if}

📖 ปล. แต่ในหัวข้อถัดๆ ไปของบทความนี้ เราจะเน้นใช้งานรูปแบบการเรียกผ่าน await เป็นหลักเพื่อความกระชับนะ

🔣Query arguments

แน่นอนว่าฟังก์ชัน query ยอมให้เราโยนตัวแปร หรือ arguments เข้าไปได้ด้วย 📨 เช่น ถ้าเราอยากจะหยิบข้อมูล slug จาก URL parameters แล้วส่งเข้าไปในฟังก์ชัน query ก็ทำได้สบายๆ แบบนี้เลย 👇

`src/routes/blog/[slug]/+page.svelte`

<script>
    import { getPost } from '../data.remote';

    let { params } = $props(); //ดึงข้อมูล parameters จาก url 🔗

        //นำ parameters ที่มี key ชื่อว่า slug ส่งเข้า remote function 📨
    const post = $derived(await getPost(params.slug));  
</script>

<h1>{post.title}</h1>
<div>{@html post.content}</div>

ข้อควรระวังคือ เวลาเราโยนตัวแปรเข้าหา remote function เราต้องตรวจสอบ (validate) ความถูกต้องของข้อมูลด้วยนะ ว่าเป็นประเภทข้อมูลที่ถูกต้องไหม ✅ ซึ่งตรงนี้เราจำเป็นต้องพึ่งพวก library ตรวจข้อมูลที่รองรับ Standard Schema อย่างเช่น Valibot หรือ Zod มาช่วยเป็นยามเฝ้าประตูให้ 👮‍♂️

`src/routes/blog/data.remote.js`

import * as v from 'valibot';
import { error } from '@sveltejs/kit';
import { query } from '$app/server';
import * as db from '$lib/server/database';

export const getPosts = query(async () => { /* ... */ });
                          // vvvvvvv ใส่ schema ตรงนี้ก่อนเข้า function 🛡️
export const getPost = query(v.string(), async (slug) => {
    const [post] = await db.sql`
        SELECT * FROM post
        WHERE slug = ${slug}
    `;

    if (!post) error(404, 'Not found');
    return post;
});

และไม่ต้องห่วงเรื่องข้อมูลซับซ้อน เพราะไม่ว่าจะเป็นตัวแปรที่รับเข้ามา หรือข้อมูลที่ส่งกลับไป ทั้งหมดจะถูกแปลงผ่านกลไกที่เรียกว่า devalue 🔄 ซึ่งเจ๋งตรงที่มันรองรับประเภทข้อมูลอย่าง Date และ Map (หรือประเภทข้อมูลอื่นๆที่เราสร้างเองผ่าน transport hook ด้วย) ได้ด้วย (รวมถึงประเภทข้อมูลแปลกๆ ที่เราสร้างเองผ่าน transport hook ด้วยนะ) ทำให้มันทรงพลังและยืดหยุ่นกว่าการใช้ JSON.stringify แบบปกติเยอะเลย 💪

🧠 เกร็ดความรู้: สำหรับคำสั่ง query หรือ prerender ถ้าเราโยนตัวแปรแบบ object, maps หรือ sets เข้าไป แล้วข้อมูลข้างในหน้าตาเหมือนกันเป๊ะ แค่สลับที่กัน ระบบจะมองว่าเป็น cache key ตัวเดียวกันเลยนะ! เช่น getPosts({ limit: 10, offset: 10 }) กับ getPosts({ offset: 10, limit: 10 }) ถือว่าเป็นตัวเดียวกัน 👯‍♀️ แต่ถ้าโปรเจกต์ของคุณมองว่า "ลำดับ" การเรียงมีความสำคัญมาก ไม่อยากให้มันมองเป็น cache key เดียวกัน แนะนำให้เปลี่ยนไปส่งข้อมูลเป็น array แทนนะ

👯Deduplication

นี่คือฟีเจอร์ "ป้องกันการขอข้อมูลซ้ำซ้อน" 🚫 ปกติแล้วพอเราเรียกใช้ฟังก์ชัน query ตัว Sveltekit จะจัดการแอบจำตัวแปรที่ส่งเข้าไป แล้วสร้างเก็บเป็น cache key 🗝️ ไว้ ซึ่งในฝั่ง server เจ้า cache key ตัวนี้จะถูกเอาไปใช้สร้างแคชแบบ request-scoped สิ่งนี้ทำให้การเรียกขอข้อมูลซ้ำๆ ผ่าน query ด้วยตัวแปรเดิม ระบบจะประมวลผลให้ แค่เพียงครั้งเดียวเท่านั้น! ⚡ ทำให้ได้ผลลัพธ์ไวขึ้นเยอะ แถมยังช่วยลดภาระไม่ให้รัว request ไปถล่มฝั่ง database อีกต่างหาก 😌

เราสามารถหยิบ await ไปวางไว้ตรงไหนก็ได้ตามสะดวก ไม่ว่าจะเป็นในระดับ components, event handlers, universal load function หรือแม้แต่ async callback 🎯 Sveltekit จะช่วยจัดการรวบตึงการทำซ้ำ (deduped) ให้ทันที ถ้าจับได้ว่ามีการเรียกใช้ query ด้วยตัวแปรเดิมใน cache key มาดูตัวอย่างกัน

`src/routes/deduped/+page.svelte`

<script>
  import { getData } from './data.remote.js';

  // ใช้ await ในระดับ component template -- ทำการสร้าง cache key 🗝️
  const data = getData();
</script>

<p>{await data}</p>

<!-- แต่ในส่วนนี้ถูกเรียกใช้งานอีกครั้ง ซึ่ง sveltekit จะทำการ dedupes 
ข้อมูลกับส่วน component template ด้านบนให้เอง ซึ่งจะไม่ทำให้เกิด request เพิ่มเติมวิ่งไปหา database 🛡️ -->
<button onclick={async () => console.log(await getData())}>
    click me!
</button>

ตัว cache key นี้จะถูกส่งต่อและแชร์ให้กันตลอดตราบใดที่ query ยังมีคนเรียกใช้งานอยู่ เช่น ตอนที่ component กำลัง render, ตอนกำลังใช้ await หรือโดนอ้างอิงจากที่อื่น แต่พอหมดคนใช้งานแล้ว ข้อมูลแคชก็จะถูกลบหรือ release ทิ้งไปสวยๆ 💨 เช่น ตอนที่ผู้ใช้กด refresh หน้าเว็บ เป็นต้น

♻️ Refreshing queries

ในจังหวะที่เราอยากจะขออัปเดตดึงข้อมูลให้เป็นของใหม่จริงๆ ฟังก์ชัน query ก็เตรียม method มาให้เราไปดูดข้อมูลมาใหม่ (re-fetched) ได้ด้วยนะ 🔄 โดยเรียกใช้ method ที่ชื่อว่า refresh เจ้านี่จะวิ่งหน้าตั้งไป fetch เพื่อหอบเอาข้อมูลใหม่ล่าสุดจาก server กลับมาเสิร์ฟให้เราทันที 🏃‍♂️💨

`src/routes/blog/+page.svelte`

<button onclick={() => getPosts().refresh()}>
    Check for new posts 🔄
</button>

💡 อย่างที่รู้กันว่า query มันถูกจำ (cache) ไว้ตอนเราอยู่หน้าเพจนั้นๆ แปลว่า getPosts() === getPosts() เป๊ะ! ดังนั้นคุณไม่ต้องเหนื่อยไปประกาศตัวแปรซ้ำๆ อย่าง const posts = getPosts() เป็นทอดๆ เพียงเพื่อหวังให้ query มันอัปเดตหรอกนะ สบายใจได้เลย 💓

เป็นยังไงกันบ้างครับเพื่อนๆ กับการใช้งาน query เบื้องต้น ไม่ยากอย่างที่คิดเลยใช่ไหมล่ะ? 😁 แต่อย่างที่บอกไปตอนแรกว่าฟังก์ชันมันไม่ได้มีแค่นี้นะ! สำหรับบทความนี้คงต้องขอพักไว้ตรงนี้ก่อน แล้วเดี๋ยวในบทความหน้า... เราจะไปคุยกันต่อแบบเจาะลึกในเรื่องของ query.batch() และ query.live() 🚀 รับรองว่ามีทีเด็ดรออยู่อีกเพียบ เตรียมตัวรอติดตามกันได้เลยครับ! 😉✨

Stop flickering theme after page refresh in Sveltekit and Daisy UI

Nutchapon Makelai — Tue, 14 Nov 2023 09:39:19 +0000

Hi, Sveltian today I would like to share you how to stop theme flickering after we refreshing a page while we using Daisy UI with Sveltekit

New in Daisy UI 4.0

Now with Daisy UI 4.0 has been release with new component call Theme Controller it bring us to a more easier way to change between two theme in Daisy UI , for more info about what change and what new in Daisy UI 4.0 let check this link

Let see what Theme Controller can do

Now I expected you has been installing a new Sveltekit project (with a Skeleton Project option selected)

Tailwind CSS and Daisy UI , then we will starting our code

checking you tailwind.config.js , need to have at least 2 of any themes (how to setup themes)

I have set 2 customize theme name 'light' and 'dark'

adding attribute data-theme on html tag in src/app.html page

for me will set it as 'light' theme by default while page is loaded

build svelte component name 'ModeSwitcher' (this name is up to your decide) and in that svelte component put below code into it and using this component on +layout.svelte

I has using Theme Controller using a swap component from DaisyUI and set it value to 'dark' as it is my dark mode theme name

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

now you can running your dev server and using the that input checkbox (or now it is a sun & moon button) to changing between two themes , for me it will change between theme name 'light' and 'dark'

BUT!! you will notice that while we reload or refresh the page from a dark theme it will be reloaded back to a default theme that we has been set in html tag from previously

Made theme persistent

firstly I will introduce you to a basically way to persist a theme by using cookie and onMount function of svelte if self

let copy a code below and paste it in your current component

<script>
    import { onMount } from 'svelte';

    let isDark = false;
    onMount(() => {
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        const cookiesObject = ca.map((cookie) => {
          const [name, value] = cookie.split('=');
          return { name, value };
        });
        const cookieIsDark = cookiesObject.find(cookie=> cookie.name==='isDark');
        isDark = JSON.parse(cookieIsDark ? cookieIsDark.value : "false") ;
    });


    function setModeCookie() {
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + 365);
        document.cookie = `isDark=${isDark}; expires=${expirationDate.toUTCString()}`;
    }
</script>

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

In the code while the component is onMount state it will decoding and get a value of cookie name 'isDark' that data type is boolean and will tell us the page currently in dark mode or not and it value will binding with input checked state

for a first time it will be set to false because page didn't have any cookie yet

and after we changing a theme with our theme controller, it will calling setModeCookie function that will set a cookie name 'isDark' with value of our 'isDark' variable (that suppose to be true by now because we clicked a theme controller and change a page's theme to dark)

now if you try to refresh or reload the page, the theme will be back into a theme that we has been using before we refresh or reload the page

BUT AGAIN!! you will notice some flickering effect after we refresh or reload the page while on 'dark' theme that because the page will be rendered from server side as a 'light' theme and then after 'onMount' is complete the page will get a cookies and set it back to our theme controller to made the page to be in 'dark' theme again

Stop theme flickering effect!!!

So far we has been using cookie to set a value that telling us, is currently page is in dark mode or not then in Sveltekit we can accessing that cookie on server side too !!
then what we need to do is we will calling that cookie in server side and passing it value back to our page and the page will rendered on value of that passing from server side

let create new file in src folder and name it +layout.server.js and in that file put below code into it

/** @type {import('./$types').LayoutServerLoad} */
export async function load({ cookies }) {
    const isDark = cookies.get('isDark') ?? "false";
    return { isDark };
}

and put this code below into ModeSwitcher component

<script>
    import { page } from '$app/stores';

    let isDark = JSON.parse($page.data.isDark);

    function setModeCookie() {
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + 365);
        document.cookie = `isDark=${isDark}; expires=${expirationDate.toUTCString()};`;
    }
</script>

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

then if you see a code in +layout.server.js we will try to get a value of cookie with name 'isDark' and if it not exist just passing "false" as a string and made our ModeSwitcher component receiving that value by using import { page } from '$app/stores'; this will get a store of page that we will need to subscribe and call it data by $page.data.isDark , last but not less we will set that value back to ModeSwitcher component 's variable name 'isDark' and that variable is got binding on our input checkbox of Theme Controller

that mean while page is rendered, a 'isDark' value will set into a value of our cookie that passing by server side and then it will rendered to correctly theme that suppose to be show in the page with out flickering effect at all

Deploying Sveltekit on IIS !

Nutchapon Makelai — Sat, 15 Jul 2023 05:34:23 +0000

This is will be long article because it a self note for deploying Sveltekit project (as node project) on IIS version 10.
For a while I searching thru the internet and asking in svelte discord (so good community , if you're svelter don't miss to join in) I found out it have little information about how to deploying Sveltekit on IIS , may be I've so many conditions and requirements to made Sveltekit project working on my IIS server.

Conditions and Requirements

running with one port and separate each project by sub-directory.
ex.
projectA ==> https://my.testsites.com:443/projectA
projectB ==> https://my.testsites.com:443/projectB
Need to be Server side rendering (SSR) which is Sveltekit project suppose to be.
Any form actions are not blocked by Cross-site Request Forgery (CSRF) protection of Sveltekit project.

Prerequisites

express.js on sveltekit project
node.js (recommend LTS version) on IIS server globally install
some demo Sveltekit project, Let using Sveltekit demo project
IIS Services -- how to install IIS

after install IIS

How to step by step

run npm i in your sveltekit project folder
installing additional dependencies
- adapter-node for sveltekit npm i -D @sveltejs/adapter-node
- dotenv npm i dotenv
setup .env file in your root folder of your project and put this in your .env file

ORIGIN=http://localhost:PORT_OF_SITES

while PORT_OF_SITES will be your port number of IIS site you want to deploy to let say it is 443 then it will be

ORIGIN=http://localhost:443

this will be using after we have deploy Svletekit project to IIS and prevent CSRF blocked after any form actions

In root folder of your project find svelte.config.js and adding adapter-node and set base path to made it support a sub-directory in Sveltekit, let change all code inside like this

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter(),
        paths: {
            relative: false,
            base: '/NAME_OF_SUB-DIRECTORY'
        }
    }
};

while NAME_OF_SUB-DIRECTORY will specifies where your app is served from and allows the app to live on a non-root path
ex. you want your site address like https://my.sites.com/svelteiis then svelte.config.js code will be like this

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter(),
        paths: {
            relative: false,
            base: '/svelteiis'
        }
    }
};

after we adding adapter-node and adding base path we need to prepend all root-relative links with the base value or they will point to the root of your domain, not your base path (this is how the Sveltekit and browser work)

in src\routes\Header.svelte, src\routes\about\+page.svelte and src\routes\sverdle\+page.svelte we will adding import { base } from '$app/paths'; in <script> tag and adding every <a> tag with {base}
ex. <a href="{base}/">Home</a>, {base}/about">About</a>

next we will build our project as a node project by using npm run build and let adapter-node handle it's job . . . . . after some times you will have a build folder appear in your root project like image below

let change side to config our IIS , firstly open our IIS and on your left pane just opening till you seen Default Web Site just right click on it and click explore like image below

-it will open a new window of file explorer with path C:\inetpub\wwwroot(let note this as a wwwroot folder) after that you can copy a build folder that we has created earlier in our Sveltekit project folder and let changing it name form build to a name of what your sub-directory you want that will match with base path that we config earlier or it cause some issue on navigating to your site!
after this step your wwwroot folder will be like image below

**you can deploy your project on new IIS site too by creating a new site in IIS and set physicals path to your deploy folder and bring your build folder into there and following the step by changing build folder name.

next we need to copy 2 files form your root project folder, that is .env file and package.json file and bring it to your deploying folder in wwwroot and running just npm i --omit=dev in this folder to made node downloading only required dependencies after running npm creating new web.config file and adding this code into your web.config file

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <add name="iisnode" path="server.cjs" verb="*" modules="iisnode" />
    </handlers>
    <iisnode node_env="production" nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
    <rewrite> 
        <rules>             
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                <match url="^server.cjs\/debug[\/]?" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            </rule>

            <rule name="StaticContent">
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                <action type="Rewrite" url="public{PATH_INFO}" />
            </rule>

            <rule name="DynamicContent">
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                </conditions>
                <action type="Rewrite" url="server.cjs" />
            </rule> 
        </rules>
        <outboundRules>
            <rule name="back">
                <match serverVariable="RESPONSE_Location" pattern="(.*)/server.cjs" />
                <action type="Rewrite" value="{R:1}" />
            </rule>
        </outboundRules>
    </rewrite>  
    <defaultDocument>
        <files>
            <add value="server.cjs" />
        </files>
    </defaultDocument>
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin" />
        </hiddenSegments>
        <requestLimits maxAllowedContentLength="4294967295" />
      </requestFiltering>
    </security>
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
</configuration>

after this config your Sveltekit deploy folder will be like a image below

last but not least we need to have some JavaScript file that will be running after iisnode calling to our project , that made our project can adjust some environment setting let create a new file name server.cjs or any other name but if you change the name you need to put that name into a web.config file from earlier (try search and replace server.cjs with your new file's name in web.config) after creating a server.cjs file add this code below to your file

require('dotenv').config();
const express = require('express')

import('./handler.js')
    .then((handler) => {
        const app = express();
        // Custom middleware to make routing case-insensitive
        app.use((req, res, next) => {
            const urlSegments = req.url.split('/');
            urlSegments[1] = urlSegments[1].toLowerCase();
            req.url = urlSegments.join('/');
            next();
        });

        // let SvelteKit handle everything else, including serving prerendered pages and static assets
        app.use(handler.handler);

        app.listen(process.env.PORT, () => {
            console.log(
                'app start on port ' + process.env.PORT
            );
        });

    }).catch((err) => console.error(err));

this will made your .env file that you copying from earlier working as aspect and will set your origin of project to prevent CSRF protection from a form actions of the project itself and it will made your site can accessing with case insensitive url at a first sub-directory.
by the way you can disabled case insensitive by comment out below code in server.cjs

app.use((req, res, next) => {
            const urlSegments = req.url.split('/');
            urlSegments[1] = urlSegments[1].toLowerCase();
            req.url = urlSegments.join('/');
            next();
        });

now inside the project folder in wwwroot will look like this

after that you can try going to the site that you have deploy by go to
http://localhost/NAME_OF_SUB-DIRECTORY or http://localhost:YOUR_IIS_PORT/NAME_OF_SUB-DIRECTORY
and finally you has achieved Sveltekit deploying on IIS !

If you has any question or suggestion on my walkthrough feel free to giving me a comment below. ;)

Thanks you
Have a nice day and keep coding