การตั้งค่าเกาะของแอสโทรและรีแอ็กต์

การเริ่มต้นโครงการ Astro ใช้ npx create astro@latest ซึ่งเรียกใช้ตัวช่วยสร้างแบบโต้ตอบเพื่อเลือกแม่แบบ การตั้งค่า TypeScript และตัวจัดการแพ็กเกจ Astro รองรับโครงเริ่มต้นหลายแบบ เช่น แม่แบบว่าง แม่แบบบล็อก และแม่แบบเอกสารประกอบ

การผสานรวมของ Astro ช่วยเพิ่มการรองรับกรอบงานให้กับโครงการ การเรียกใช้ npx astro add react จะติดตั้ง @astrojs/react, react และ react-dom โดยอัตโนมัติ และปรับปรุง astro.config.mjs ให้รวมการผสานรวม React ไว้ด้วย การตั้งค่าทั้งหมดใช้เพียงคำสั่งเดียว

ไฟล์ .astro เป็นรูปแบบส่วนประกอบของ Astro ประกอบด้วยส่วนข้อมูลนำหน้า (JavaScript ที่อยู่ระหว่างเครื่องหมาย ---) และส่วนแม่แบบ โดยค่าเริ่มต้น ไฟล์ Astro จะส่งออก HTML แบบสแตติก โดยจะไม่มีการส่ง JavaScript ไปยังเบราว์เซอร์ เว้นแต่คุณจะเพิ่มไดเรกทีฟไคลเอนต์อย่างชัดเจน

การนำเข้าส่วนประกอบ React ลงในไฟล์ Astro ใช้ไวยากรณ์โมดูล ES มาตรฐาน ได้แก่ import Counter from './Counter.jsx' หากไม่มีไดเรกทีฟไคลเอนต์ Astro จะแสดงผลส่วนประกอบ React เป็น HTML แบบสแตติกบนเซิร์ฟเวอร์ และส่ง HTML นั้นไปยังเบราว์เซอร์ ซึ่งหมายความว่าไม่มีการส่ง JavaScript สำหรับส่วนประกอบนี้เลย

การเพิ่ม client:visible ให้กับแท็กส่วนประกอบในแม่แบบ Astro จะเปลี่ยนส่วนประกอบนั้นให้เป็นเกาะ: <Counter client:visible /> จากนั้น Astro จะส่ง JavaScript ของส่วนประกอบไปยังเบราว์เซอร์ ไฮเดรตส่วนประกอบเมื่อเลื่อนเข้าสู่พื้นที่แสดงผล และทำให้ใช้งานแบบโต้ตอบได้ หากไม่มีไดเรกทีฟ ส่วนประกอบนั้นจะเป็น HTML แบบสแตติก

ส่วนประกอบ React ที่ใช้เป็นเกาะ Astro เขียนด้วย React มาตรฐาน โดยใช้ฮุก สถานะ เอฟเฟกต์ และไลบรารี React ใด ๆ ก็ได้ ภายในส่วนประกอบ React เองไม่มี API เฉพาะของ Astro ขอบเขตของเกาะกำหนดไว้ในแม่แบบ Astro ไม่ใช่ภายในโค้ดของส่วนประกอบ

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

ไลบรารี @nanostores/react มีอะตอมขนาดเล็กที่เกาะใด ๆ ก็สมัครรับข้อมูลได้ เกาะหนึ่งเขียนค่าลงในอะตอมของสโตร์ขนาดเล็ก และอีกเกาะหนึ่งอ่านค่า เนื่องจากสโตร์ขนาดเล็กไม่ขึ้นกับกรอบงาน รูปแบบนี้จึงใช้ได้กับเกาะ React และ Vue ในหน้าเดียวกันด้วย

คอลเลกชันเนื้อหาของ Astro เป็นวิธีจัดการไฟล์ Markdown และ MDX ที่มีความปลอดภัยด้านชนิดข้อมูล กำหนดแบบแผนของคอลเลกชันด้วย Zod วางไฟล์ Markdown ไว้ใน src/content/ แล้ว Astro จะสร้างฟังก์ชันสำหรับสืบค้นที่มีชนิดข้อมูลครบถ้วน รูปแบบนี้เป็นแนวทางมาตรฐานสำหรับบทความบล็อก เอกสารประกอบ และหน้าผลิตภัณฑ์

การเรียกใช้ astro build จะสร้างโฟลเดอร์ dist/ ที่ประกอบด้วยไฟล์ HTML แบบสแตติก สำหรับแต่ละหน้า Astro จะส่งออกไฟล์ HTML ที่มีเนื้อหาซึ่งแสดงผลบนเซิร์ฟเวอร์ และมีเฉพาะชุด JavaScript ที่จำเป็นสำหรับเกาะในหน้านั้นเท่านั้น หน้าที่ไม่มีเกาะจะไม่มี JavaScript เลย

ผลลัพธ์แบบสแตติกสามารถนำไปใช้งานบน CDN ใดก็ได้ (Netlify, Vercel, Cloudflare Pages) โดยไม่ต้องมีเซิร์ฟเวอร์ หากต้องการการแสดงผลฝั่งเซิร์ฟเวอร์ (เส้นทางแบบไดนามิก จุดปลายทาง API) Astro รองรับอะแดปเตอร์ SSR สำหรับ Node.js, Vercel Edge, Cloudflare Workers และ Deno เกาะทำงานเหมือนกันทั้งสองโหมด

ต้องแก้ไขส่วนประกอบ React ที่นำเข้าในแม่แบบ Astro อย่างน้อยเพียงใดจึงจะทำให้ส่วนประกอบนั้นโต้ตอบได้บนไคลเอนต์

ตั้งค่า Astro ให้ใช้ React ด้วย npx astro add react ไฟล์ Astro เป็นแบบสแตติกโดยค่าเริ่มต้น การเพิ่มไดเรกทีฟ client: ให้กับแท็กส่วนประกอบ React จะเปลี่ยนให้เป็นเกาะที่ผ่านการไฮเดรต ส่วนประกอบ React ยังคงเป็น React มาตรฐานโดยไม่มี API เฉพาะของ Astro สถานะแยกเป็นอิสระในแต่ละเกาะ และ nanostores ช่วยให้สื่อสารข้ามเกาะได้ ผลลัพธ์จากการสร้างโครงการคือ HTML แบบสแตติกพร้อม JavaScript เฉพาะของเกาะที่จำเป็น