ใน Next.js App Router ให้ระบุ URL เท่านั้นเพื่อเรนเดอร์ page.tsx บนเซิร์ฟเวอร์และวางลงใน pane ใหม่ของ FlexLayoutSplitScreen

v1.0.0

หน้านี้เองเป็นเป้าหมายการทดสอบ Server Component

FlexLayout ทั่วไปจะรับผิดชอบการจัดเลย์เอาต์และการปรับขนาดเหมือนเดิม และการแบ่งแบบไดนามิกจะถูกจัดการโดย FlexLayoutSplitScreen จุดเริ่มต้นเฉพาะสำหรับ Next.js จะสร้าง URL ของ DragBox เป็น registry ที่สร้างขึ้นแล้วเรนเดอร์ page.tsx บนเซิร์ฟเวอร์และส่งผลลัพธ์ไปยัง pane ที่แบ่งนั้น

1. สร้าง Registry

text

ตั้งค่าเส้นทางแอปและเส้นทางเอาต์พุตที่ด้านบนของสคริปต์ของโปรเจกต์ที่ใช้ ผลลัพธ์ที่สร้างขึ้นจะเป็น registry แบบสถิติที่สามารถตีความกลุ่มเส้นทางและ segment แบบไดนามิกได้

ตั้งค่าเส้นทางแอปและเส้นทางเอาต์พุตที่ด้านบนของสคริปต์ในโปรเจกต์ที่ใช้ ผลลัพธ์ที่สร้างขึ้นคือ registry นำเข้าแบบสถิติที่สามารถตีความกลุ่มเส้นทางและ segment แบบไดนามิก โดยค่าเริ่มต้น export คือ FlexLayoutNextSplitScreen

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. ใช้ FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen เป็น wrapper เฉพาะสำหรับ Next.js ที่ให้การเรนเดอร์เซิร์ฟเวอร์ของ URL pane โดยใช้ page registry ที่สร้างขึ้น เพียงห่อ FlexLayoutSplitScreen tree ที่รับ pane ตาม URL หนึ่งครั้งเท่านั้น

tsx

3. การกู้คืนการรีเฟรช URL pane

เป้าหมายการกู้คืนคือ URL pane ของ Next ที่สามารถสร้างใหม่ได้เท่านั้น

รวมอยู่ใน persistent snapshot เฉพาะ pane ที่ถูกห่อด้วย FlexLayoutNextSplitScreen และ DragBox เฉพาะสำหรับ Next.js ที่ใช้วิธี url และไม่ระบุ targetComponent โดยตรงหรือไม่ใช้ iframe เท่านั้น วิธี targetComponent จะไม่ขัดขวางการเรนเดอร์ปกติ แต่จะถูกละเว้นในเป้าหมายการกู้คืนการรีเฟรช

เมื่อกำหนด persistence จะมีการจัดเก็บเฉพาะ metadata ที่สามารถทำให้เป็นแบบอนุกรมได้ เช่น URL, screenKey, containerName, navigationTitle และโครงสร้างการแบ่งเท่านั้น ไม่ได้จัดเก็บ ReactElement เอง หาก restoreOnReload เป็น false จะไม่ใช้ persistence และหาก syncWithBrowserUrl เป็น true จะจัดเก็บ snapshot ตาม pathname + search URL เมื่อย้อนกลับ/ไปข้างหน้าหรือกลับไปที่ URL เดิม จะมีการกู้คืนสถานะการแบ่งทั้งหมดตาม URL นั้น และเมื่อรีเฟรชจะกู้คืน snapshot ของ URL ปัจจุบันด้วย

tsx

4. DragBox จะส่งเฉพาะ URL เท่านั้น

DragBox เฉพาะสำหรับ Next.js จะรับเฉพาะ URL โดยไม่ต้องสร้าง targetComponent โดยตรง หากระบุ targetComponent จะใช้วิธีการเดิมเป็นหลักและ pane นั้นจะไม่รวมอยู่ในเป้าหมาย persistence

tsx

5. iframe เป็นตัวเลือก

ค่าเริ่มต้นของ iframe คือ false จะต้องกำหนดเป็น true เฉพาะเมื่อจำเป็นต้องใช้ URL ภายนอกหรือบริบทเอกสารที่แยกต่างหาก โหมด iframe ไม่ต้องการ page registry ของ FlexLayoutNextSplitScreen และจะไม่รวมอยู่ในเป้าหมาย persistence

tsx

ในหน้าเซิร์ฟเวอร์จะมี params และ searchParams ที่ดึงมาจาก URL ถูกส่งไป อย่างไรก็ตาม split pane ไม่ใช่ Next Router แยกต่างหาก ดังนั้น usePathname, useParams, useSearchParams ของ Client Component ภายในจะทำงานตาม URL ที่แท้จริงของเบราว์เซอร์

Current version