การถ่ายโอนสถานะไปยังไคลเอนต์
หลีกเลี่ยงคำขอซ้ำด้วยการถ่ายโอนสถานะ
การถ่ายโอนสถานะไปยังไคลเอนต์ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาการดึงข้อมูลซ้ำสองครั้ง
ระหว่าง SSR เซิร์ฟเวอร์จะดึงข้อมูลเพื่อสร้าง HTML หากไม่มีตัวช่วย ไคลเอ็นต์จะดึงข้อมูลเดิมอีกครั้งหลังการเติมความสามารถให้หน้าเว็บ ทำให้เสียคำขอโดยเปล่าประโยชน์และอาจทำให้เนื้อหากะพริบ
TransferState เข้ามาช่วย
TransferState ของ Angular จะทำให้ข้อมูลบนเซิร์ฟเวอร์เป็นอนุกรมแล้วฝังไว้ใน HTML จากนั้นไคลเอ็นต์จะอ่านข้อมูลดังกล่าวแทนการดึงใหม่ ข้อมูลจะถูกส่งมาในแท็กสคริปต์ของคำตอบ
ข้อมูลถูกส่งต่ออย่างไร
สถานะที่เก็บไว้บนเซิร์ฟเวอร์จะถูกฝังเป็น JSON ภายในหน้าเว็บ เมื่อเริ่มทำงาน ไคลเอ็นต์จะแปลงข้อมูลกลับจากอนุกรม ทำให้การแสดงผลครั้งแรกใช้ข้อมูลเดียวกับที่เซิร์ฟเวอร์ใช้
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>การใช้ makeStateKey
สร้างคีย์ที่ระบุชนิดข้อมูลด้วย makeStateKey จากนั้นอ่านหรือเขียนผ่านบริการ TransferState
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);รูปแบบอ่านก่อนแล้วจึงดึงข้อมูล
ทั้งบนเซิร์ฟเวอร์และไคลเอ็นต์: หากมีคีย์อยู่ใน TransferState ให้ใช้ค่านั้น มิฉะนั้นให้ดึงข้อมูล เซิร์ฟเวอร์จะดึงและจัดเก็บข้อมูล ส่วนไคลเอ็นต์จะพบค่าที่จัดเก็บไว้และข้ามการเรียก
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClient ทำให้โดยอัตโนมัติ
การเรียก provideClientHydration(withHttpTransferCacheOptions()) (เปิดใช้เป็นค่าเริ่มต้นเมื่อเปิดใช้การเติมความสามารถให้หน้าเว็บ) จะทำให้ HttpClient แคชคำตอบ GET จากเซิร์ฟเวอร์ไว้ใน TransferState ดังนั้นคำขอเดียวกันจากไคลเอ็นต์จะได้รับข้อมูลจากแคชโดยไม่ต้องสร้างคีย์เอง
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))ป้องกันเนื้อหากะพริบ
เนื่องจากไคลเอ็นต์นำข้อมูลที่ส่งต่อมาใช้ มุมมองหลังการเติมความสามารถจึงตรงกับ HTML จากเซิร์ฟเวอร์ทุกประการ ช่วยป้องกันการกะพริบที่เนื้อหาหายไปแล้วโหลดใหม่
ข้อควรระวังด้านความปลอดภัย
สถานะที่ส่งต่อจะถูกฝังอยู่ใน HTML สาธารณะ อย่าใส่ข้อมูลลับ โทเค็น หรือข้อมูลส่วนตัวของผู้ใช้ที่คุณไม่ต้องการเปิดเผยในซอร์สของหน้าเว็บลงใน TransferState
แบบกำหนดเองเทียบกับแบบอัตโนมัติ
แคชการส่งต่อผ่าน HTTP จะครอบคลุมการดึงข้อมูลที่ใช้ GET ส่วนใหญ่โดยอัตโนมัติ ให้ใช้ makeStateKey ด้วยตนเองสำหรับสถานะที่คำนวณจากสิ่งอื่นนอกเหนือจาก HTTP และต้องการส่งต่อจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์
ขอบเขตของแคช
แคชการส่งต่อผ่าน HTTP มีขอบเขตต่อคำขอ และจะถูกใช้ครั้งเดียวบนไคลเอ็นต์ หลังจากคำขอแรกของไคลเอ็นต์ที่ตรงกันอ่านข้อมูลแล้ว การเรียกครั้งต่อ ๆ ไปจะส่งไปยังเครือข่ายตามปกติ
ตรวจสอบว่าทำงาน
ตรวจสอบคำตอบจาก SSR และมองหาสคริปต์สถานะที่ฝังอยู่ ในแท็บเครือข่ายของเบราว์เซอร์ คุณควรเห็นว่าการดึงข้อมูลซ้ำถูกข้ามไปทันทีหลังการเติมความสามารถให้หน้าเว็บ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับการส่งต่อสถานะของคุณ
สรุปทบทวน
คุณได้เรียนรู้การส่งข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์ด้วย TransferState และ makeStateKey ใช้แคชการส่งต่อผ่าน HTTP แบบอัตโนมัติ ป้องกันการดึงข้อมูลซ้ำและเนื้อหากะพริบ และไม่นำข้อมูลส่วนตัวไปไว้ในสถานะที่ฝังแบบสาธารณะ
คำถามที่พบบ่อย
บทเรียน “การถ่ายโอนสถานะไปยังไคลเอนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การถ่ายโอนสถานะไปยังไคลเอนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การถ่ายโอนสถานะไปยังไคลเอนต์”
หลีกเลี่ยงคำขอซ้ำด้วยการถ่ายโอนสถานะ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การถ่ายโอนสถานะไปยังไคลเอนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่ต้องใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์
- การตั้งค่า Angular SSR
- เส้นทางเซิร์ฟเวอร์และโหมดการเรนเดอร์
- การถ่ายโอนสถานะไปยังไคลเอนต์