หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

เกณฑ์มาตรฐาน SSR Framework

นี่คือการทดลองเพื่อตอบสนองต่อ https://twitter.com/thdxr/status/1777782835249553517 โดยระบุว่า next.js นั้นช้าลงมากในการแสดงผลด้านเซิร์ฟเวอร์เมื่อเทียบกับวานิลลาปฏิกิริยา

นี่ไม่ใช่การทดสอบที่ครอบคลุมหรือทางวิทยาศาสตร์ แค่อยากจะเปรียบเทียบแต่ละครั้งในการตั้งค่าที่ซับซ้อนน้อยกว่าการพิมพ์ hello world

เฟรมเวิร์ก

(ดัชนี) ชื่อ ops/sec เฉลี่ย (MS) ตัวอย่าง ร่างกาย (KB) การทำซ้ำ สัมพันธ์กับการตอบสนอง
0 'ตอบสนอง' 766 '1.305' 7663 '97 .28 ' 'x1.00' -
1 'sveltekit' 589 '1.696' 5898 '184.46' 'x2.00' '1.30 x ช้าลง'
2 'รีมิกซ์' 449 '2.224' 4497 '189.10' 'x2.00' '1.71 x ช้าลง'
3 'nuxt' 381 '2.622' 3814 '201.12' 'x2.00' '2.01 x ช้าลง'
4 'Qwik-City' 278 '3.584' 2790 '139.21' 'x1.00' '2.76 x ช้าลง'
5 'หน้าถัดไป' 104 '9.590' 1043 '187.67' 'x2.00' '7.37 x ช้าลง'
6 'Astro' 99 '10 .077 ' 993 '99 .91 ' 'x1.00' '7.74 x ช้าลง'
7 'mfng' 69 '14 .372 ' 696 '317.31' 'x2.50' '11 .10 x ช้าลง '
8 'ต่อไป' 53 '18 .673 ' 536 '284.64' 'x2.00' '14 .45 x ช้าลง '
  • React อยู่ที่นี่เป็นเพียงตัวแสดงผลพื้นฐานเพื่อเปรียบเทียบประสิทธิภาพของเฟรมเวิร์กกับ
  • การทำซ้ำ เป็นปัจจัยการทำซ้ำของข้อมูล 2x หมายถึงรายการข้อมูลที่แสดงผลแต่ละรายการได้รับการสังเกตสองครั้งในการตอบสนอง จำเป็นสำหรับการให้ความชุ่มชื้นในการทำงาน สำหรับผู้ที่เป็น 1x ข้อมูลความชุ่มชื้นหายไป

ผู้แสดงผล

(ดัชนี) ชื่อ ops/sec เฉลี่ย (MS) ตัวอย่าง ร่างกาย (KB) การทำซ้ำ สัมพันธ์กับมาร์โค
0 'มาร์โค' 6675 '0.150' 66759 '96 .74 ' 'x1.00' -
1 'คิตา' 3074 '0.325' 30742 '97 .34 ' 'x1.00' '2.17 x ช้าลง'
2 'Hono' 945 '1.058' 9452 '97 .15 ' 'x1.00' '7.06 x ช้าลง'
3 'Vue' 897 '1.114' 8977 '96 .72 ' 'x1.00' '7.44 x ช้าลง'
4 'ตอบสนอง' 764 '1.308' 7649 '97 .28 ' 'x1.00' '8.74 x ช้าลง'
5 'Qwik' 622 '1.605' 6230 '137.88' 'x1.00' '10 .73 x ช้าลง '
6 'แข็ง' 613 '1.630' 6137 '215.93' 'x2.00' '10 .89 x ช้าลง '

  • ของแข็ง อยู่ที่นี่ แต่ยังมีข้อมูลความชุ่มชื้นสำหรับความชุ่มชื้นด้านลูกค้ามันเปรียบได้กับเฟรมเวิร์กในลักษณะนั้นมากขึ้น

  • ร่างกาย คือการตอบสนองความยาวของร่างกายใน KB

  • ตารางได้รับการอัปเดตด้วย Kiliman ตอนนี้รีมิกซ์ใช้การเลื่อนเวลาให้ผลลัพธ์ที่ดีกว่ามาก

  • MFNG เป็นการใช้งาน RSC น้อยที่สุด สิ่งสำคัญที่จะเห็นผลลัพธ์เมื่อเทียบกับถัดไปเนื่องจากทั้งคู่สะท้อนประสิทธิภาพการแสดงผล RSC

สภาพแวดล้อมการทดสอบ

  • SSR เท่านั้น เราไม่ได้สร้างกลุ่มลูกค้าสำหรับโมดูลส่วนใหญ่
  • Next.js Route Cache ถูกปิดใช้งานโดยใช้ const dynamic = 'force-dynamic' (มิฉะนั้นเราจะทำการเปรียบเทียบเซิร์ฟเวอร์ HTTP แบบคงที่เนื่องจากไม่มีรหัสไดนามิกเช่นการเข้าถึงคุกกี้)
  • แทนที่จะผ่านเซิร์ฟเวอร์ HTTP รหัสมาตรฐานจะสร้างคำขอและการตอบกลับ HTTP จำลอง สิ่งนี้ทำให้มั่นใจได้ว่าเราจะไม่จ่ายค่าใช้จ่าย TCP
  • การทดสอบวิ่งบน node.js v20.6.1 บน MacBook Pro M1 Pro ของฉัน
  • แต่ละเฟรมเวิร์กแสดงตาราง 1,000 แถวแต่ละอันมีสองคอลัมน์ UUID
  • ข้อมูลตารางถูกเลียนแบบเป็น async และต้องการความสงสัยในการตอบสนอง, ของแข็งและ vue ในถัดไปมันจะถูกโหลดในส่วนประกอบ Async RSC บนรีมิกซ์มันถูกโหลดในฟังก์ชั่น loader เส้นทาง
  • การเรนเดอร์การสตรีมที่ใช้กับของแข็งปฏิกิริยาและ Vue

วิ่ง 

$ npm install
$ npm run build
$ npm start
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด