ไม่มีชื่อบทความ
ดีมากที่ถามจุดนี้ เพราะหลายคนมักสงสัยเหมือนกันเลยจ้ะ — คำตอบคือ:
โดยรวมแล้ว ไม่ทำให้เว็บช้าขึ้นอย่างมีนัยสำคัญ ถ้าใช้อย่างถูกวิธี
โดยเฉพาะถ้าเป็นเว็บที่ถูก build แบบ static หรือใช้ SSG (Static Site Generation) ของ Next.js เช่น getStaticProps — content พวกนี้จะถูกแปลงไปเป็น HTML ตั้งแต่ตอน build แล้ว
วิเคราะห์ตามแต่ละวิธี
1. `dangerouslySetInnerHTML`
- ข้อดี: ทำงานเร็ว เพราะเบราว์เซอร์ render HTML ได้ทันที
- ข้อเสีย: ต้อง sanitize ดี ๆ เพื่อกัน XSS
- ประสิทธิภาพ: ไม่ต่างจาก HTML ปกติ ถ้า content ถูกเตรียมไว้แล้ว
2. แบบ array + object แล้ว map เป็น JSX
- ข้อดี: ปลอดภัยกว่า, ควบคุมได้มากกว่า (ใส่ลูกเล่นเฉพาะกับคำที่ต้องการ)
- ข้อเสีย: เขียนเพิ่มนิดหน่อย
- ประสิทธิภาพ: rendering ใช้
.map()ซึ่งเบาอยู่แล้ว ถ้า array ไม่ใหญ่มาก (หลักสิบ – หลักร้อย element) ก็แทบไม่ต่างจาก JSX ปกติ - ผลลัพธ์ตอน build: Next.js จะ compile JSX เป็น DOM instructions ที่เร็วอยู่แล้ว
3. ถ้าใช้ i18next + ``
- ทำงานคล้าย ๆ แบบ JSX mapping
- performance ไม่ต่างจากเขียน JSX เอง
สรุป
| วิธี | ปลอดภัย | เร็ว | เหมาะกับ |
|---|---|---|---|
dangerouslySetInnerHTML |
ต้อง sanitize | เร็วมาก | ใช้เมื่อ content เป็น HTML string อยู่แล้ว |
| JSX แบบ map array | ปลอดภัย | เร็ว | ควบคุมลูกเล่นและโค้ดได้ละเอียด |
| i18next + Trans | ปลอดภัย | เร็ว | เว็บหลายภาษา, ใช้ i18n |
สุดท้าย:
หลัง build แล้ว ทุกแบบจะถูกแปลงเป็น static HTML หรือ optimized React code ที่ไม่ต่างกันมากเรื่อง performance
แต่ถ้าจะทำให้ดีทั้งเร็วและปลอดภัย — วิธี JSX mapping (แบบที่ 2) จะบาลานซ์ที่สุด
ถ้าอยากลอง benchmark หรือดูว่าแบบไหนเร็วสุดก็ลองเปิด DevTools แล้วดู FPS / performance tab ได้ด้วยจ้ะ.