การแชร์สถานะและการกำหนดเส้นทางระหว่างรีโมต

รีโมตของ Module Federation แต่ละตัวเป็นแอปพลิเคชันที่สร้างและติดตั้งใช้งานแยกจากกัน สถานะของรีโมต (React useState, บริบท และคลังจัดเก็บของ Zustand) จะอยู่ในขอบเขตโมดูล JavaScript ของตัวเอง โฮสต์และรีโมตจะไม่แชร์สถานะกันโดยอัตโนมัติ คุณต้องออกแบบการแชร์อย่างชัดเจน

กลไกแชร์สถานะที่เรียบง่ายที่สุดคือ URL รีโมตใด ๆ ก็สามารถอ่านพารามิเตอร์ URL สตริงคำค้น และค่าแฮชได้โดยไม่ต้องสื่อสารข้ามรีโมต วิธีนี้เหมาะอย่างยิ่งกับสถานะการนำทางหลัก ค่าตัวกรอง และสถานะใด ๆ ที่ควรบันทึกเป็นบุ๊กมาร์กและแชร์ผ่านลิงก์ได้

CustomEvents ผ่าน EventTarget ของเบราว์เซอร์ช่วยให้รีโมตสื่อสารกันได้โดยไม่ต้องนำเข้าโมดูลโดยตรง รีโมตหนึ่งเรียกใช้ window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart })) และโมดูลอื่นใด (ไม่ว่าจะเป็นโฮสต์หรือรีโมตอื่น) ก็รับฟังด้วย window.addEventListener('cart:updated', handler) ได้ โดยไม่จำเป็นต้องมีโมดูลที่แชร์ร่วมกัน

สร้าง "รีโมตสถานะ" โดยเฉพาะที่เปิดเผยคลังจัดเก็บของ Zustand หรือ Jotai จากนั้นทั้งโฮสต์และรีโมตอื่น ๆ จะนำเข้าจากรีโมตสถานะนี้และได้รับอินสแตนซ์ของคลังจัดเก็บเดียวกัน เนื่องจากเป็นซิงเกิลตันที่แชร์ร่วมกัน วิธีนี้มีประสิทธิภาพสำหรับสถานะที่แชร์ร่วมกันซับซ้อน เช่น การยืนยันตัวตน ตะกร้าสินค้า และการตั้งค่าผู้ใช้ แต่จะเพิ่มการพึ่งพาด้านการติดตั้งใช้งาน

เชลล์ (โฮสต์) เป็นเจ้าของสถานะที่แชร์ร่วมกันทั้งหมด และส่งสถานะลงไปยังรีโมตผ่านพร็อพส์หรือบริบท รีโมตจะได้รับฟังก์ชันเรียกกลับ เช่น onCartUpdate และการนำทางในรูปพร็อพส์ วิธีนี้ทำให้สถานะรวมศูนย์อยู่ที่โฮสต์ แต่โฮสต์ต้องรู้จักส่วนติดต่อของรีโมต จึงเกิดการเชื่อมโยงที่แน่นหนา

สถานะประวัติและตำแหน่งของ React Router จัดเตรียมโดยคอมโพเนนต์ Router (BrowserRouter หรือ createBrowserRouter) ในการตั้งค่า Module Federation ต้องมี Router เพียงหนึ่งตัวเท่านั้น หากวางไว้ในรีโมตแต่ละตัว จะทำให้เกิดบริบทการนำทางหลายชุดที่แย่งกันทำงาน และทำให้เกิดข้อขัดแย้งในการนำทาง

กฎด้านสถาปัตยกรรมคือ โฮสต์ (เชลล์) เป็นผู้จัดเตรียม Router รีโมตจะได้รับพร็อพส์ด้านการนำทางจากโฮสต์ (หรืออ่านจาก URL โดยตรง) รีโมตไม่ควรสร้าง BrowserRouter ของตัวเอง เพราะจะขัดแย้งกับ Router ของโฮสต์และทำให้การนำทางของแอปพลิเคชันทั้งหมดเสียหาย

ค่าของบริบท React จะผูกอยู่กับอินสแตนซ์ React และออบเจ็กต์บริบทที่เฉพาะเจาะจง หากต้องการให้บริบททำงานข้ามโฮสต์และรีโมต ทั้งสองฝั่งต้องนำเข้าออบเจ็กต์บริบทเดียวกันจากแหล่งเดียวกัน โดยทั่วไปคือรีโมตสถานะที่แชร์ร่วมกันหรือแพ็กเกจยูทิลิตีที่แชร์ร่วมกัน ซิงเกิลตันของ React ช่วยให้บริบทเดียวกันทำงานได้ในรีโมตทั้งหมด

ในสถาปัตยกรรม Module Federation ที่เป็นระเบียบ เชลล์ (โฮสต์) เป็นเจ้าของสิ่งต่อไปนี้: เชลล์ HTML, ตัวให้บริการ Router, บริบทการยืนยันตัวตน, ตัวให้บริการธีมและโทเค็นการออกแบบ และการนำทางส่วนกลาง รีโมตเป็นเจ้าของเนื้อหาของโดเมนฟีเจอร์ของตนเอง เชลล์จะประกอบรีโมตเข้ากับเค้าโครงโดยไม่จำเป็นต้องรู้รายละเอียดการทำงานภายใน

รูปแบบต่อต้านที่ใหญ่ที่สุดของ Module Federation คือการเชื่อมโยงระหว่างโฮสต์กับรีโมตอย่างแน่นหนา เช่น โฮสต์นำเข้าชนิดข้อมูลจากรีโมต รีโมตนำเข้าคอมโพเนนต์จากโฮสต์ หรือทั้งสองฝ่ายแชร์แพ็กเกจ npm ที่ต้องอัปเดตพร้อมกัน การเชื่อมโยงเหล่านี้ขัดต่อเป้าหมายของการติดตั้งใช้งานอย่างอิสระ

กำหนดสัญญาที่ชัดเจนระหว่างโฮสต์กับรีโมต ได้แก่ พร็อพส์ที่คอมโพเนนต์รีโมตรองรับ CustomEvents ที่รีโมตเรียกใช้ และพารามิเตอร์ URL ที่รีโมตอ่าน ให้บันทึกสัญญาเหล่านี้เป็นอินเทอร์เฟซ TypeScript ในแพ็กเกจชนิดข้อมูลที่แชร์ร่วมกัน วิธีนี้ช่วยให้ทีมต่าง ๆ พัฒนาไปอย่างอิสระภายใต้สัญญาที่ตกลงกันไว้

ควรวางตัวให้บริการ React Router (BrowserRouter) ไว้ที่ใดในสถาปัตยกรรม Module Federation

การแชร์สถานะระหว่างรีโมตของ Module Federation ทำได้โดยใช้สถานะจาก URL (เรียบง่ายที่สุด), CustomEvents (เชื่อมโยงกันอย่างหลวม ๆ), รีโมตสถานะที่แชร์ร่วมกัน (คลังจัดเก็บแบบรวมศูนย์) หรือสถานะที่โฮสต์เป็นเจ้าของและส่งผ่านพร็อพส์ โฮสต์ต้องเป็นเจ้าของตัวให้บริการ Router เพียงตัวเดียว รีโมตไม่ควรสร้าง Router ของตนเอง สัญญาการสื่อสารที่ชัดเจนผ่านอินเทอร์เฟซ TypeScript ช่วยให้ทีมต่าง ๆ แยกจากกันได้ และทำให้เกิดการติดตั้งใช้งานอย่างอิสระอย่างแท้จริง