Smashing Podcast ตอนที่ 23 ด้วย Guillermo Rauch: Next.js คืออะไร?

วันนี้เรากำลังพูดถึง Next.js มันคืออะไร และมันเหมาะกับเวิร์กโฟลว์การพัฒนาเว็บของเราตรงไหน? ฉันได้พูดคุยกับ Guillermo Rauch ผู้ร่วมสร้างเพื่อหาคำตอบ

แสดงหมายเหตุ

• Guillermo Rauch บน Twitter
• Next.js

อัพเดทประจำสัปดาห์

• “การเรียนรู้ Props และ PropTypes ใน React”
  โดย David Adeneye
• “แรงบันดาลใจในการตัดสินใจออกแบบกับ Bradbury Thompson: The Art of Graphic Design”
  โดย Andy Clarke
• “การตั้งค่า API โดยใช้ Flask, Cloud SQL และ App Engine ของ Google”
  โดย Wole Oyekanmi
• “รูปแบบและการตรวจสอบในปฏิกิริยาอิออน”
  โดย Jerry Navi
• “วิธีช่วยให้ลูกค้าของคุณได้รับลิงก์ย้อนกลับเพิ่มเติมผ่านการออกแบบ”
  โดย Suzanne Scacca

การถอดเสียง

Drew McLellan: เขาเป็นผู้ก่อตั้งและ CEO ของ Vercel ซึ่งเป็นแพลตฟอร์มคลาวด์สำหรับไซต์แบบคงที่ที่เหมาะกับเวิร์กโฟลว์ Jamstack เขายังเป็นผู้ร่วมสร้าง Next.js ด้วย ก่อนหน้านี้เขาก่อตั้ง LearnBoost และ CloudUp และเป็นที่รู้จักกันดีในฐานะผู้สร้างไลบรารีโอเพ่นซอร์สโหนดยอดนิยมหลายแห่ง เช่น Socket.io, Mongoose และ SlackIn ก่อนหน้านั้น เขาเป็นผู้พัฒนาหลักใน MooTools ดังนั้นเราจึงรู้ว่าเขารู้จัก JavaScript ของเขาเป็นอย่างดีเหมือนกับหลังมือ คุณรู้หรือไม่ว่าเขาเคยได้รับพระราชอำนาจจากกษัตริย์แห่งสเปนเพื่อสร้างประติมากรรมน้ำแข็งจากผักกาดหอมภูเขาน้ำแข็ง? เพื่อนที่ยอดเยี่ยมของฉัน ยินดีต้อนรับ Guillermo Rauch สวัสดี กิลเลอร์โม่ สบายดีไหม

Guillermo Rauch: ฉันยอดเยี่ยมมาก ขอบคุณที่มีฉัน

Drew: วันนี้ฉันอยากจะคุยกับคุณเกี่ยวกับโลกทั้งใบของ Next.js เนื่องจากเป็นสิ่งที่ชัดเจนว่าคุณมีความรู้มากเป็นการส่วนตัว โดยส่วนตัวแล้วมีส่วนร่วมในฐานะผู้ร่วมสร้างตั้งแต่เริ่มต้น Next.js เป็นหนึ่งในชื่อโปรเจ็กต์ที่อยู่ในเรดาห์ของฉันในขณะที่ทำงานในพื้นที่ Jamstack แต่ไม่ใช่สิ่งที่ฉันเคยดูหรือทำงานด้วยอย่างใกล้ชิดมาก่อน สำหรับคนที่เป็นเหมือนฉัน ที่อาจไม่รู้ว่า Next.js คืออะไร คุณอาจให้ข้อมูลพื้นฐานกับเราว่ามันคืออะไรและปัญหาใดที่พยายามแก้ไข

Guillermo: Next.js เป็นสมาชิกที่น่าสนใจมากของจักรวาล Jamstack เพราะจริงๆ แล้ว Next.js เริ่มเป็นเฟรมเวิร์กที่เน้น SSR อย่างเต็มที่ เริ่มมีการนำไปใช้เป็นจำนวนมากนอกพื้นที่ Jamstack ซึ่งผู้คนกำลังสร้างสิ่งที่ยิ่งใหญ่โดยเฉพาะเมื่อพวกเขาต้องการให้ผู้ใช้สร้างเนื้อหาหรือเนื้อหาแบบไดนามิกหรือเครือข่ายสังคมออนไลน์หรืออีคอมเมิร์ซ และพวกเขารู้ว่าพวกเขาต้องการ SSR เพราะชุดข้อมูลของพวกเขาคือ ใหญ่มากหรือไดนามิกมาก มันตกอยู่ภายใต้เรดาร์ ฉันคิดว่าสำหรับผู้คนจำนวนมากในโลก Jamstack แต่ต่อมาใน Next.js ได้รับความสามารถในการเพิ่มประสิทธิภาพแบบคงที่

Guillermo: ตัวอย่างเช่น หากคุณไม่ทำการดึงข้อมูลที่ระดับบนสุดของหน้าด้วย Next.js หน้า React ของคุณก็จะเป็น … นอกจากนี้ สำหรับผู้ที่ยังไม่มีความรู้อย่างเต็มที่ Next.js เป็นเพียง React framework สำหรับการผลิต แต่มีความสามารถในการแสดงผลบางอย่าง จากนั้น เมื่อคุณได้รับความสามารถในการเพิ่มประสิทธิภาพแบบคงที่ หากคุณไม่ได้กำหนดดึงข้อมูลที่ระดับบนสุดของหน้าเว็บของคุณ ข้อมูลนั้นจะส่งออกเป็น HTML โดยอัตโนมัติ แทนที่จะพยายามดำเนินการใดๆ กับการแสดงผลของเซิร์ฟเวอร์

Guillermo: หลังจากนั้น มันยังได้รับความสามารถในการสร้างไซต์แบบสแตติก ซึ่งหมายความว่าคุณสามารถกำหนด data hook พิเศษได้ แต่ data hook นั้นรับข้อมูลในเวลาที่สร้าง Next.js กลายเป็นเฟรมเวิร์กแบบไฮบริด ไดนามิกและสแตติกที่ทรงพลังมาก และตอนนี้ก็เติบโตขึ้นอย่างมากในพื้นที่ Jamstack เช่นกัน

Drew: ผู้คนอาจบอกว่า React เป็นเฟรมเวิร์กอยู่แล้ว คุณคงได้ยินที่อธิบายแบบนั้น การเป็นเฟรมเวิร์กสำหรับ React หมายความว่าอย่างไร

Guillermo: นั่นเป็นข้อสังเกตที่ยอดเยี่ยม เพราะฉันมักจะชี้ให้คนอื่นเห็นว่า React ที่ Facebook และ React นอก Facebook เป็นสัตว์ที่ต่างกันโดยสิ้นเชิง จริง ๆ แล้ว React ที่ Facebook นั้นใช้ร่วมกับการเรนเดอร์เซิร์ฟเวอร์ แต่แม้กระทั่งการเรนเดอร์เซิร์ฟเวอร์ของพวกเขา ไม่ได้ใช้ Node.js มันใช้เครื่องเสมือนที่มีความเชี่ยวชาญสูงที่เรียกว่า Hermes ซึ่งสื่อสารกับแฮ็คการผลิตและ PHP stack และคำตอบ ความต้องการของ Facebook ขั้นสูงและแปลกใหม่ทั้งหมดนี้

Guillermo: เมื่อพวกเขาโอเพ่นซอร์ส React มันเกือบจะเหมือนกับโอเพ่นซอร์สส่วนประกอบ ฉันมักจะเรียกมันว่าโอเพ่นซอร์สเครื่องยนต์ แต่ไม่ได้ให้รถคุณ สิ่งที่เกิดขึ้นคือผู้คนอยากไปและขับรถไปกับมันจริงๆ พวกเขาต้องการไปยังสถานที่ต่างๆ ด้วย React ในชุมชน ผู้คนเริ่มสร้างรถยนต์ และพวกเขาจะฝัง React ไว้เป็นเครื่องยนต์ ซึ่งเป็นสิ่งที่ผู้ขับขี่ นักพัฒนาตามหาตั้งแต่แรก ทำให้ React เป็นส่วนพื้นฐานของรถ สิ่งต่างๆ เช่น Next.js และ Gatsby และ React Static และเฟรมเวิร์กอื่น ๆ เริ่มปรากฏขึ้นเพื่อแก้ไขความต้องการเช่น "ที่จริงฉันต้องการสร้างเพจและแอปพลิเคชันที่โหลดอย่างสมบูรณ์"

Guillermo: ในขณะที่ React เป็นเหมือนส่วนประกอบและเอ็นจิ้นสำหรับวิดเจ็ตเฉพาะภายในเพจมากกว่า แต่สิ่งนี้ก็เกิดขึ้นกับ Facebook อย่างแน่นอน พวกเขาจะยอมรับในวงกว้างและต่อสาธารณะว่าพวกเขาประดิษฐ์มันขึ้นมาสำหรับสิ่งต่าง ๆ เช่นชุดการแจ้งเตือน วิดเจ็ตการแชท ส่วนประกอบฟีดข่าว และส่วนประกอบเหล่านั้นคือเส้นทาง React ที่ฝังอยู่ในเนื้อหาของแอพที่มีอยู่จริงซึ่งมีรหัสจำนวนมาก และแม้แต่ไลบรารีและเฟรมเวิร์ก JS อื่นๆ

Guillermo: การสร้างกรอบงานสำหรับ React หมายความว่าอย่างไร คุณทำให้ React เป็นส่วนพื้นฐานของเรื่องราว หวังว่าและนี่คือสิ่งที่เราจะลองทำกับ Next.js เส้นโค้งการเรียนรู้นั้นเกี่ยวกับ React เป็นหลักโดยมีการเพิ่มบางส่วน พื้นผิวสำหรับ Next.js โดยเฉพาะเกี่ยวกับการดึงข้อมูลและการกำหนดเส้นทาง เรายังทำการเพิ่มประสิทธิภาพการผลิตเป็นจำนวนมาก ดังนั้นเมื่อคุณได้รับ React เมื่อคุณได้รับแอป Create React ซึ่งก็คล้ายๆ กัน ฉันชอบเรียกมันว่ารถบูทสแตรปที่ Facebook มอบให้คุณ บางทีความต้องการในการผลิตอาจไม่ตรงตามที่จริง . หรือถ้าคุณลองทำด้วยตัวเองโดยกำหนดค่า Webpack และกำหนดค่า Babel และกำหนดค่าการเรนเดอร์เซิร์ฟเวอร์และการสร้างแบบคงที่ ก็ยากที่จะรวบรวมรถตั้งแต่เริ่มต้น Next.js จะให้การกำหนดค่าศูนย์นี้แก่คุณและชุดค่าเริ่มต้นที่ปรับให้เหมาะสมสำหรับการผลิตเพื่อสร้างสิ่งที่ยิ่งใหญ่ทั้งหมดด้วย React

Drew: มันเหมือนกับว่าเกือบจะสร้างระบบนิเวศรอบๆ แอป React ของคุณด้วยชุดเครื่องมือที่กำหนดค่าไว้ล่วงหน้าเพื่อให้คุณ-

กิลเลอร์โม: ถูกต้อง

Drew: เริ่มต้นใช้งานและสร้างไซต์แบบคงที่หรือแสดงหรือกำหนดเส้นทางเซิร์ฟเวอร์

Guillermo: ถูกต้อง และคุณใช้คำที่นั่น ซึ่งเป็นกุญแจสำคัญสำหรับทั้งหมดนี้ ซึ่งได้รับการกำหนดค่าไว้ล่วงหน้าแล้ว เราโชคดีพอที่จะดึงดูดความสนใจของ Google Chrome ในฐานะผู้มีส่วนร่วมกับ Next.js หนึ่งในผู้นำของโปรเจ็กต์นี้ สิ่งสำคัญของเธอคือเมื่อพวกเขาทำงานเกี่ยวกับเฟรมเวิร์กภายในที่ Google พวกเขาประสบปัญหาเดียวกันมากมายที่ชุมชนและโอเพ่นซอร์สกำลังเผชิญอยู่ในปัจจุบัน มีความคิดริเริ่มที่แข่งขันกันมากมายที่ Google เกี่ยวกับวิธีการปรับขนาดและสร้างเว็บแอปที่มีประสิทธิภาพจริงๆ ออกจากกล่อง

Guillermo: คุณจะเข้าร่วมเป็น Googler และคุณจะได้รับกรอบงานที่คุณจะสร้างแอปพลิเคชันขนาดใหญ่ที่พร้อมสำหรับการผลิตและประสิทธิภาพสูงมาก Shubie เป็นส่วนหนึ่งของโครงการริเริ่มเหล่านั้นจำนวนมาก และสิ่งที่เธอพบก็คือมีส่วนประกอบหลักสองอย่างในการทำให้กรอบงานประสบความสำเร็จในวงกว้าง หนึ่งคือการกำหนดค่าล่วงหน้าหมายความว่าคุณมาทำงานคุณกำลังจะเริ่มแอพใหม่คุณควรได้รับสิ่งที่พร้อมแล้วที่จะไปและตอบสนองความต้องการการผลิตจำนวนมากที่ทราบ ณ จุดนั้น ภายในเวลาที่กำหนด.

Guillermo: ในทางกลับกัน ขั้นตอนที่สำคัญอีกอย่างที่เรากำลังดำเนินการคือความสอดคล้อง คุณสามารถได้รับเฟรมเวิร์กที่กำหนดค่าไว้ล่วงหน้าสำหรับการผลิตที่ได้รับการปรับให้เหมาะสมที่สุดแล้ว แต่ถ้าคุณไปข้างหน้าและตัวอย่างเช่น เริ่มแนะนำการพึ่งพาจำนวนมากหรือสคริปต์บุคคลที่สามจำนวนมาก หรือใช้เลย์เอาต์ที่ไม่มีประสิทธิภาพมากซึ่งใช้เวลานานในการวาดภาพเป็นต้น และอื่นๆ จากนั้นคุณจะทำให้การกำหนดค่าล่วงหน้านั้นสูญเปล่า ด้วยการผสมผสานการกำหนดค่าล่วงหน้าเข้ากับความสอดคล้องในช่วงเวลาหนึ่ง นักพัฒนาไม่เพียงแต่มีจุดเริ่มต้นที่ดีเท่านั้น แต่ยังได้รับการชี้นำสู่ความสำเร็จเมื่อเวลาผ่านไปด้วย

Drew: ดูเหมือนว่าคุณลักษณะของ Next.js นั้นค่อนข้างมีความเห็น เลเยอร์ UI คือ React มันใช้สคริปต์ประเภท ใช้ Webpack และนั่นก็เป็นตัวเลือกทั้งหมดที่โปรเจ็กต์สร้างขึ้น และนั่นคือสิ่งที่คุณได้รับ แก้ไขฉันถ้าฉันผิด แต่คุณไม่สามารถสลับ React สำหรับ Vue ตัวอย่างเช่นใน Next.js

Guillermo: นั่นเป็นจุดที่ดี ที่การตัดสินใจทางเทคนิคมาบรรจบกับศิลปะ ในแง่หนึ่ง ผมอยากอ้างว่า Next นั้นไม่มีความเห็นอย่างมาก และเหตุผลก็คือถ้าคุณไปที่ github.com/vercel/nextjs และไดเร็กทอรีตัวอย่างโดยเฉพาะ คุณจะเห็นว่าเกือบจะเหมือน การผสมผสานของเทคโนโลยีที่คุณสามารถใช้ร่วมกับ Next.js ได้ คุณจะเห็นแบบใช้ไฟ คุณจะเห็น Graphic UL คุณจะเห็น Apollo คุณจะเห็น Redux คุณจะเห็น MobX ในพื้นที่ CSS มีตัวเลือกมากขึ้น

Guillermo: เรามีพอร์ต CSS เริ่มต้นที่ฝังไว้ แต่คุณสามารถใช้สองรสชาติได้ แบบแรกมีการนำเข้า อีกแบบหนึ่งมีแท็กสไตล์ที่เราเรียกว่า Style JSX ซึ่งคล้ายกับแนวทางแพลตฟอร์มเว็บสำหรับ Shadow CSS เหตุผลที่ฉันหมายถึงว่าไม่มีความคิดเห็นก็คือเราต้องการให้ Next.js อยู่ใกล้กับ "โลหะเปลือย" ของเว็บมากที่สุด และไม่แนะนำสิ่งพื้นฐานมากมายที่หากเว็บตั้งแต่ 10 ปีนับจากวันนี้จะไม่เข้ากัน หากคุณดูตัวอย่าง คุณจะเห็นว่ามีเทคโนโลยีอื่นๆ ทั้งหมดที่คุณสามารถเสียบเข้าไปได้

Guillermo: ระดับพื้นฐานของความคิดเห็นคือมี React และคุณจะไม่สามารถแทนที่ได้ อย่างน้อยก็ในเร็วๆ นี้ มีแนวคิดว่าคุณควรจะสร้างเพจได้ และนี่ก็เหมือนกับสิ่งใหม่เมื่อเราเปิดตัวครั้งแรก ซึ่งทุกคนพยายามสร้างแอปพลิเคชันแบบหน้าเดียว สิ่งที่เรารู้ก็เหมือนกับอินเทอร์เน็ตประกอบด้วยเว็บไซต์ที่มีหน้าเว็บจำนวนมากที่สร้างจุดเริ่มต้นที่แตกต่างกันผ่านเครื่องมือค้นหา ทาง Twitter ทาง Facebook ผ่านเครือข่ายสังคม ผ่านอีเมลที่เป็นเพื่อนกัน เช่นเดียวกับที่คุณแนะนำบุคคลนั้นไปยังจุดเริ่มต้นเสมอ และบุคคลนั้นที่ผ่านจุดเข้านั้นไม่ควรต้องดาวน์โหลดภาระของแอปพลิเคชันทั้งหมด

Guillermo: จากนั้นเส้นทางนั้นก็นำเราไปสู่การใช้งานการเรนเดอร์เซิร์ฟเวอร์ จากนั้นจึงสร้างสแตติกสำหรับหลาย ๆ เพจ และอื่นๆ ระดับฐานอื่นๆ ของความคิดเห็นคือ Next ควรเป็นเฟรมเวิร์กที่ใช้กับเว็บได้ ไม่ใช่กับเว็บ ยิ่งไปกว่านั้น React ยังขาดการดึงข้อมูลและการกำหนดเส้นทางเบื้องต้น และเราเพิ่มสิ่งเหล่านั้นเข้าไป มีความคิดเห็นในระดับหนึ่งที่ต้องรับมือ เช่นเดียวกับที่ทุกคนต้องการเราเตอร์ ดังนั้นอาจมีเราเตอร์ในตัวตามค่าเริ่มต้นด้วย

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

กิลเลอร์โม: ถูกต้อง

Drew: เคยอยู่ในสถานการณ์ที่มีทางเลือกมากมายเหลือเกินว่าจะใช้ส่วนประกอบใด และอาจเกินกำลังและขัดขวางการทำงานอย่างมีประสิทธิผล

กิลเลอร์โม: ถูกต้อง

Drew: คุณเห็นคนใช้ Next.js สำหรับโปรเจ็กต์ประเภทใด โดยทั่วไปแล้วจะเป็นสถานการณ์ใดๆ ที่คุณอาจสร้างแอป React ที่ใช้งานจริง หรือเหมาะกับไซต์ที่มีเนื้อหาหนักบางประเภทมากกว่า มันมีความสำคัญในแง่นั้นหรือไม่?

Guillermo: ใช่แล้ว นี่เป็นการถกเถียงกันมานานแล้วว่าเว็บ เป็นเว็บสำหรับแอป เป็นเว็บสำหรับไซต์ไหม หรือเป็นไฮบริด? บทบาทของ JavaScript, et cetera, et cetera คืออะไร? เป็นการยากที่จะให้คำตอบอย่างตรงไปตรงมา แต่สิ่งที่ฉันคิดเกี่ยวกับเรื่องนี้คือเว็บได้รับการพัฒนาให้เป็นลูกผสมของเนื้อหาที่พัฒนาให้มีไดนามิกและเป็นส่วนตัวมากขึ้นสำหรับผู้ใช้ แม้ว่าคุณจะพูดเหมือนเว็บไซต์เนื้อหา เว็บไซต์เนื้อหาระดับไฮเอนด์ของโลกก็มีโค้ดเบสที่เทียบได้กับแอปเป็นอย่างมาก

Guillermo: ตัวอย่างที่ดีที่นี่คือเช่น New York Times พวกเขาจะให้วิดเจ็ตที่ฝังตัวพร้อมเครื่องมือวิเคราะห์ข้อมูลและแอนิเมชั่นเชิงโต้ตอบ และพวกเขาจะแนะนำเรื่องราวที่จะอ่านต่อไป และมีรูปแบบการสมัครรับข้อมูลซึ่งบางครั้งช่วยให้คุณ ส่วนหนึ่งของเนื้อหาและบางครั้งนับจำนวนบทความที่คุณอ่าน อย่างที่ฉันบอกคุณตอนที่เว็บถูกประดิษฐ์ขึ้น อย่างทิม เบอร์เนอร์ส-ลี จะแบบว่า "ไม่ บ้าจริง เป็นไปไม่ได้บนเว็บ" แต่นั่นคือเว็บที่เรามีอยู่ในปัจจุบัน

Guillermo: Next.js ตอบโจทย์ความต้องการสมัยใหม่ที่ซับซ้อนเหล่านี้ได้มากมาย ซึ่งหมายความว่าคุณจะเห็นการใช้งานอีคอมเมิร์ซจำนวนมาก คุณจะเห็นเนื้อหาจำนวนมากด้วย ความหมายของอีคอมเมิร์ซ ไม่ใช่แค่การซื้อสินค้า แต่ประสบการณ์เช่นเว็บไซต์อสังหาริมทรัพย์ที่ใหญ่ที่สุดบนเว็บ realtor.com, zillow.com, trulio.com หมวดหมู่ทั้งหมดคือ Next.js ทั้งหมดแล้วเนื้อหา เว็บไซต์ เราเพิ่งเริ่มใช้งาน washingtonpost.com ในฐานะลูกค้าของ Vercel และ Next.js เรามีหมวดหมู่ที่ 3 ที่ออกมาใหม่กว่าแต่น่าสนใจมาก ซึ่งเป็นแอปตัวเต็มและเนื้อหาที่ผู้ใช้สร้างขึ้น เช่น tiktok.com และแบบคุณ จะคิดว่ากรณีการใช้งานแอปพลิเคชันหน้าเดียวดั้งเดิมและแสดงอยู่ที่นั่นด้วย

Guillermo: Next.js มีความโดดเด่นเมื่อคุณต้องการมีเนื้อหาจำนวนมากที่ต้องให้บริการอย่างรวดเร็ว ต้องมีการปรับ SEO ให้เหมาะสม และท้ายที่สุด ก็เป็นการผสมผสานระหว่างไดนามิกและสแตติก

Drew: ก่อนหน้านี้ฉันเคยพูดกับ Marcy Sutton เกี่ยวกับ Gatsby ซึ่งดูเหมือนว่าจะอยู่ในพื้นที่ที่คล้ายกัน เป็นเรื่องดีเสมอที่ได้เห็นวิธีแก้ปัญหามากกว่าหนึ่งวิธีและมีตัวเลือกสำหรับโครงการหนึ่งไปยังอีกโครงการหนึ่ง คุณจะบอกว่า Next.js และ Gatsby ทำงานในพื้นที่ปัญหาประเภทเดียวกันหรือไม่ และมีความคล้ายคลึงหรือต่างกันมากน้อยเพียงใด

Guillermo: ฉันคิดว่ามีบางกรณีการใช้งานทับซ้อนกัน ตัวอย่างเช่น บล็อกส่วนตัวของฉัน rauchg.com ทำงานบน Next.js อาจเป็นบล็อก Gatsby ที่ยอดเยี่ยมเช่นกัน มีการทับซ้อนกันในพื้นที่เว็บไซต์แบบสแตติกขนาดเล็กและฉันไม่ได้หมายความว่าไม่เกี่ยวข้อง ดอทคอมจำนวนมากที่มีความสำคัญอย่างยิ่งยวดบนเว็บแบบคงที่โดยทั่วไปนั่นคือความสวยงามของ Jamstack ในความคิดของฉัน เนื่องจาก Next.js สามารถเพิ่มประสิทธิภาพหน้าเว็บของคุณได้อย่างคงที่ และจากนั้นคุณจะได้รับคะแนน Lighthouse ที่ยอดเยี่ยม คุณจึงสามารถใช้สำหรับกรณีการใช้งานที่ทับซ้อนกันได้

Guillermo: ฉันคิดว่าเส้นคงเส้นคงวาเมื่อคุณเริ่มมีความต้องการแบบไดนามิกมากขึ้นและคุณมีหน้าจำนวนมาก คุณจำเป็นต้องอัปเดตพวกเขาในคราวเดียว แม้ว่า Gatsby กำลังสร้างโซลูชันสำหรับสิ่งเหล่านั้น แต่ Next.js ก็มีโซลูชันพร้อมใช้งานจริงที่ใช้งานได้กับฐานข้อมูลทุกประเภท แบ็กเอนด์ข้อมูลประเภทใดก็ได้สำหรับ "สร้าง" หรือ "พิมพ์" หน้าจำนวนมากและจำนวนมาก นั่นคือที่ที่ลูกค้าในปัจจุบันจะไปที่ Next.js แทน Gatsby

Drew: ปัญหาอย่างหนึ่งที่ทุกคนต้องพบเจอเมื่อโซลูชันที่ใช้ JavaScript ของพวกเขาใหญ่ขึ้นคือประสิทธิภาพและวิธีที่สิ่งต่าง ๆ เริ่มทำงานได้ช้ามาก คุณมีขนาดกลุ่มใหญ่ ตามเนื้อผ้า สิ่งต่างๆ เช่น การแยกโค้ดอาจค่อนข้างซับซ้อนในการกำหนดค่าให้ถูกต้อง ฉันเห็นว่านี่เป็นหนึ่งในคุณสมบัติที่พุ่งเข้ามาหาฉันใน Next.js ซึ่งอ้างว่าการแยกโค้ดนั้นเป็นไปโดยอัตโนมัติ Next.js ทำอะไรในแง่ของการแยกโค้ดเพื่อให้ใช้งานได้

Guillermo: การสังเกตของคุณถูกต้อง 100% สิ่งที่ใหญ่ที่สุดอย่างหนึ่งของเว็บและน้ำหนักที่ใหญ่ที่สุดอย่างหนึ่งบนเว็บคือ JavaScript และเช่นเดียวกับวัสดุที่แตกต่างกันมีความหนาแน่นและน้ำหนักที่แตกต่างกันโดยไม่คำนึงถึงปริมาณทางกายภาพจริง JavaScript มีแนวโน้มที่จะเป็นองค์ประกอบที่หนาแน่นและหนักมาก แม้แต่ JavaScript จำนวนเล็กน้อยเมื่อเทียบกับตัวอย่าง เช่น รูปภาพที่สามารถประมวลผลแบบอะซิงโครนัสและนอกเธรดหลัก JavaScript ก็มีแนวโน้มที่จะสร้างความรำคาญเป็นพิเศษ

Guillermo: Next.js ทุ่มเทความพยายามอย่างมากในการเพิ่มประสิทธิภาพบันเดิลของคุณโดยอัตโนมัติ สิ่งแรกที่เป็นสัญชาตญาณแรกของฉัน เมื่อครั้งแรกที่ฉันคิดเกี่ยวกับ Next.js คือคุณจะกำหนด ตัวอย่างเช่น 10 เส้นทาง ในโลกของ Next.js คุณสร้างไดเร็กทอรีเพจและปล่อยไฟล์ของคุณไปที่นั่น Index.js, About.js, Settings.js, Dashboard.js, Termsofservice.js, Signup.js, Login.js สิ่งเหล่านี้กลายเป็นจุดเริ่มต้นสู่แอปพลิเคชันของคุณซึ่งคุณสามารถแชร์ผ่านสื่อทุกประเภท

Guillermo: เมื่อคุณป้อนข้อมูลเหล่านี้ เราต้องการให้ JS ที่เกี่ยวข้องกับหน้านั้นเป็นอันดับแรก และบางทีอาจเป็นบันเดิลทั่วไป เพื่อให้การนำทางที่ตามมาภายในระบบมีความรวดเร็วมาก Next.js ซึ่งดีมาก ดีมาก ดึงข้อมูลหน้าที่เหลือล่วงหน้าที่เชื่อมต่อกับจุดเริ่มต้นนั้นล่วงหน้าโดยอัตโนมัติ ทำให้รู้สึกเหมือนเป็นแอปพลิเคชันหน้าเดียว หลายคนพูดว่า "ทำไมไม่ลองใช้แอป Create React ถ้าฉันรู้ว่าฉันอาจจะมีสองสามเส้นทางล่ะ" ฉันบอกพวกเขาเสมอว่า “ดูสิ คุณสามารถหาพวกนั้นเป็นเพจได้ และเนื่องจาก Next.js จะดึงข้อมูลที่มีการเชื่อมต่อไว้ล่วงหน้าโดยอัตโนมัติ คุณจึงลงเอยด้วยแอปพลิเคชันหน้าเดียวของคุณ แต่จะปรับให้เหมาะสมกว่าสำหรับสีเริ่มต้นนั้น จุดเริ่มต้นนั้น”

Guillermo: นั่นคือวิธีการแยกรหัสเบื้องต้น แต่แล้วมันก็ซับซ้อนมากขึ้นเมื่อเวลาผ่านไป Google สนับสนุนการเพิ่มประสิทธิภาพที่ดีมากซึ่งเรียกว่า Module and No Module ซึ่งจะให้ JS ที่แตกต่างกันแก่เบราว์เซอร์ที่ทันสมัย ​​และ JS รุ่นเก่าที่มีโพลีฟิลด์จำนวนมากสำหรับเบราว์เซอร์อื่นๆ และการเพิ่มประสิทธิภาพนี้อัตโนมัติ 100% และช่วยประหยัดค่าใช้จ่ายได้มหาศาล เรามอบให้กับลูกค้ารายหนึ่งของเราที่เราโฮสต์บน Vercel ชื่อ Parnaby's ฉันเชื่อว่าถ้าฉันจำไม่ผิด มันเป็นสิ่งที่สำคัญมาก มันอาจจะเหมือนกับการประหยัดขนาดโค้ด 30% และนั่นเป็นเพียงเพราะพวกเขาอัพเกรด Next.js เป็นเวอร์ชันที่เพิ่มประสิทธิภาพบันเดิล JS ให้ดีขึ้น

Guillermo: นั่นคือประเด็นที่เราได้ดำเนินการไปก่อนหน้านี้ ซึ่งก็คือคุณเลือก Next.js และจะดีขึ้นและเหมาะสมยิ่งขึ้นเมื่อเวลาผ่านไปเท่านั้น มันจะเพิ่มประสิทธิภาพสิ่งต่าง ๆ ในนามของคุณต่อไป สิ่งเหล่านี้คือการกำหนดค่าล่วงหน้าที่คุณไม่เคยต้องรับมือหรือต้องกังวลเลย และการวิจัยที่คุณไม่เคยแม้แต่จะทำเลยด้วยความซื่อสัตย์สุจริต เห็นได้ชัดว่าฉันไม่ได้มีส่วนเกี่ยวข้องกับเรื่องนี้มากนัก แต่ฉันดูการอภิปรายภายในและพวกเขากำลังพูดถึงโพลีฟิลด์ทั้งหมดที่สำคัญกับ Internet Explorer X และ Soho เท่านั้น ฉันก็แบบ "ฉันไม่อยากรู้เลย มาอัปเกรด Next.js และรับประโยชน์ทั้งหมดเหล่านี้กัน”

Drew: บางครั้งมีประโยชน์มากมายในการยึดติดกับค่าเริ่มต้นและยึดติดกับการกำหนดค่าทั่วไปของสิ่งต่าง ๆ ซึ่งดูเหมือนจะเป็นแนวทาง Next.js จริงๆ ฉันจำได้เมื่อฉันเริ่มเขียน PHP ย้อนกลับไปในช่วงต้นปี 2000 และทุกคนใช้ PHP และ MySQL และในขณะนั้นฉันเพิ่งมาจาก Windows ดังนั้นฉันจึงต้องการใช้ PHP และ Microsoft Sequel Server คุณสามารถทำได้ แต่คุณกำลังว่ายน้ำทวนกระแสน้ำตลอดทาง ทันทีที่ฉันเปลี่ยนมาใช้ MySQL ระบบนิเวศทั้งหมดก็เริ่มทำงานให้ฉัน และฉันไม่ต้องคิดมาก

Guillermo: ใช่ ทุกอย่างเพียงแค่คลิก นั่นเป็นข้อสังเกตที่ยอดเยี่ยมมาก เราเห็นว่าตลอดเวลา เช่นเดียวกับระบบนิเวศของ Babel ที่มีพลังมากในตอนนี้ ซึ่งคุณสามารถ ตัวอย่างเช่น เร็วขึ้นเล็กน้อยโดยเปลี่ยน Babel เป็นอย่างอื่น แต่จากนั้นคุณจะต้องแลกกับความเข้ากันได้ของระบบนิเวศที่เหลือเชื่อ นี่คือสิ่งที่คุณสัมผัสถึงประสิทธิภาพก่อนหน้านี้ และเช่นเดียวกับหลายๆ คน การสร้างประสิทธิภาพและประสิทธิภาพการสร้างแบบคงที่เป็นคอขวดที่ใหญ่ และนี่คือสิ่งที่เรามีความขยันหมั่นเพียรในการปรับปรุงประสิทธิภาพของเครื่องมือของเราแบบค่อยเป็นค่อยไป

Guillermo: ตัวอย่างเช่น สิ่งหนึ่งที่ Next.js กำลังทำอยู่ตอนนี้คือการอัปเกรดค่าเริ่มต้นจาก Webpack 4 เป็น Webpack 5 ซึ่งมีข้อบกพร่องบางประการ และนั่นเป็นเหตุผลที่เราเสนอบริการนี้ให้กับผู้คนเป็นอันดับแรก ในแฟล็ก แต่ต่อมาจะกลายเป็นค่าเริ่มต้น Webpack 5 ทำการปรับปรุงประสิทธิภาพอย่างเหลือเชื่อ แต่เราไม่ได้เสียสละระบบนิเวศของ Webpack เราปรับปรุงทีละส่วน แน่นอนว่า มีสิ่งเล็ก ๆ น้อย ๆ ที่ต้องเสียสละ แต่นั่นเป็นประโยชน์ที่เหลือเชื่อของระบบนิเวศ JS ในวันนี้ที่ผู้คนจำนวนมากมองข้ามไป ฉันคิดว่าเพราะพวกเขาอาจเห็นว่า "โอ้ เราทำได้ X ในโซโห อาจจะเร็วกว่าเล็กน้อย หรือบางที MPM ในโซโหอาจใช้เวลาน้อยลง” พวกเขาหยิบรายละเอียดบางอย่างและพลาดภาพที่ใหญ่ขึ้นซึ่งเป็นมูลค่าของระบบนิเวศที่มหาศาล

Drew: คุณค่าของการมีการกำหนดค่าทั้งหมดและการบำรุงรักษา และด้านนั้นทำโดยโปรเจ็กต์อย่าง Next.js แทนที่จะใช้สิ่งนั้นกับตัวคุณเองโดยเปลี่ยนไปใช้อย่างอื่นนั้นช่างเหลือเชื่อ เพราะทันทีที่คุณเปลี่ยนจากค่าเริ่มต้นเหล่านั้น คุณกำลังรับภาระในการรักษาความเข้ากันได้ทั้งหมดและทำเอง สิ่งหนึ่งที่ฉันสนใจใน Next.js มากคือมีตัวเลือกสำหรับการสร้างไซต์แบบสแตติกหรือการแสดงผลฝั่งเซิร์ฟเวอร์ หรืออาจเป็นไฮบริดของทั้งสอง ฉันคิดว่ามีการเปลี่ยนแปลงเมื่อเร็วๆ นี้ในการอัปเดตล่าสุด คุณช่วยบอกเราหน่อยเกี่ยวกับเรื่องนั้นได้ไหม และเมื่อใดที่คุณอาจเลือกอย่างใดอย่างหนึ่ง

Guillermo: ใช่ แน่นอน องค์ประกอบหลักอย่างหนึ่งของแนวทางไฮบริดนี้รวมกับระบบเพจที่ฉันอธิบายไว้ก่อนหน้านี้คือ คุณสามารถมีเพจที่เป็นสแตติกทั้งหมดหรือเพจที่เซิร์ฟเวอร์แสดงผล หน้าที่คงที่อย่างสมบูรณ์มีประโยชน์ที่น่าทึ่งของสิ่งที่ฉันเรียกว่าการยกแบบคงที่ ซึ่งคุณสามารถนำทรัพย์สินนั้นมาวางไว้ที่ขอบได้โดยอัตโนมัติ เมื่อวางไว้ที่ขอบ ฉันหมายความว่าคุณสามารถแคชได้ คุณสามารถแคชไว้ชั่วคราว คุณสามารถทำซ้ำได้ คุณสามารถทำให้เมื่อมีคำขอเข้ามา มันจะไม่แตะต้องเซิร์ฟเวอร์เพราะเราทราบล่วงหน้า “ เฮ้ Slash Index เป็นแบบคงที่”

Guillermo: นั่นเป็นผลประโยชน์ที่น่าสนใจมาก เมื่อพูดถึงการให้บริการผู้ชมทั่วโลก โดยพื้นฐานแล้วคุณจะได้รับ CDN อัตโนมัติโดยเฉพาะอย่างยิ่งเมื่อคุณปรับใช้เครือข่าย Edge ที่ทันสมัย ​​เช่น Vercel หรือ AWS Amplify หรือ Netlify เป็นต้น Next.js มีหลักฐานว่าหากสามารถทำให้เป็นแบบคงที่ได้ ก็ควรเป็นแบบคงที่ เมื่อคุณเริ่มโครงการครั้งแรกและกำลังทำงานบนหน้าแรกของคุณหรือคุณกำลังเบื่อหน่ายกับกรอบงาน อาจทำให้ทุกอย่างคงที่เช่นกัน

Guillermo: แม้แต่สำหรับความต้องการระดับสูง ตัวอย่างเช่น vercel.com การใช้งาน Next.js ของเราเองนั้นไม่เปลี่ยนแปลงอย่างสมบูรณ์ เป็นการผสมผสานระหว่างการสร้างไซต์แบบสแตติกและสแตติกอย่างสมบูรณ์ ดังนั้นเพจการตลาดทั้งหมดของเราจึงเป็นแบบคงที่ บล็อกของเราสร้างแบบสแตติกจากแหล่งข้อมูลแบบไดนามิก จากนั้นแดชบอร์ดของเราที่มีข้อมูลไดนามิกจำนวนมาก แต่เราสามารถส่งมอบเป็นเชลล์หรือโครงกระดูกได้ หน้าทั้งหมดที่เกี่ยวข้องกับการดูการปรับใช้ของคุณ การดูโปรเจ็กต์ การดูบันทึกของคุณ ฯลฯ ล้วนแต่เป็นเพจสแตติกที่มี JavaScript ฝั่งไคลเอ็นต์

กิลเลอร์โม: นั่นทำหน้าที่เราได้อย่างไม่น่าเชื่อ เพราะทุกอย่างที่เราต้องการประสิทธิภาพแผงแรกที่เร็วมากนั้นได้รับการเรนเดอร์ล่วงหน้าแล้ว ทุกสิ่งที่จำเป็นต้องมี SEO เรนเดอร์ล่วงหน้าแล้ว และทุกอย่างที่ไดนามิกสุดขีด เราแค่ต้องกังวลเกี่ยวกับความปลอดภัย จากมุมมองของฝั่งไคลเอ็นต์ซึ่งใช้การเรียก API เดียวกันกับที่ ตัวอย่างเช่น CLI ของเราใช้หรือการรวมเข้าด้วยกัน ฯลฯ เว็บไซต์แบบคงที่อย่างสมบูรณ์ ใช้งานได้ราคาถูกมาก ปรับขนาดได้อย่างไม่น่าเชื่อ และอื่นๆ และอื่นๆ

Guillermo: ตอนนี้ สิ่งหนึ่งที่เราต้องการสำหรับบล็อกของเราคือ เราต้องการอัปเดตข้อมูลอย่างรวดเร็ว เราต้องการแก้ไขข้อผิดพลาดอย่างรวดเร็วและไม่รอให้ทั้งบิลด์เกิดขึ้น และนี่เป็นข้อดีที่สำคัญมากของ Next.js ที่เมื่อคุณคร่อมจากสแตติกเป็นไดนามิก มันจะให้สิ่งเหล่านี้ในระหว่างโซลูชันด้วย . สำหรับบล็อกของเรา เราใช้การสร้างสแตติกแบบเพิ่มหน่วย ดังนั้นโดยพื้นฐานแล้ว เราสามารถสร้างหน้าใหม่ได้ครั้งละหนึ่งหน้าเมื่อเนื้อหาพื้นฐานเปลี่ยนแปลงไป

Guillermo: ลองนึกภาพว่าเราไม่ได้มีแค่บล็อกโพสต์สองร้อยรายการ และเรามีบล็อกโพสต์จำนวนมากที่สร้างขึ้นตลอดเวลาและมีการอัปเดตอยู่ตลอดเวลา อย่างที่ฉันพูดถึงลูกค้ารายหนึ่งของเรา นั่นคือ Washington Post ในกรณีนี้ คุณต้องไป ไปสู่ ​​SSR เต็มรูปแบบมากขึ้น โดยเฉพาะอย่างยิ่งเมื่อคุณเริ่มปรับแต่งเนื้อหาสำหรับผู้ใช้แต่ละราย เส้นทางแห่งความซับซ้อนที่ฉันเพิ่งอธิบายไปนั้นเริ่มต้นจากการที่ฉันมีเพจทางการตลาดหนึ่งเพจ จนถึงฉันมีบล็อกที่มีหน้าสองพันหน้า สำหรับฉันมีเพจหลายหมื่นหรือหลายล้านหน้า นั่นคือเส้นทางของ Next.js ที่คุณสามารถเดินทางไปกับธุรกิจของคุณเองได้

Guillermo: จากนั้นคุณเริ่มเป็นนักพัฒนาซอฟต์แวร์เพื่อเลือกระหว่างความรับผิดชอบที่น้อยกว่าไปสู่ความรับผิดชอบที่มากขึ้น เพราะเมื่อคุณเลือกใช้ SSR ตอนนี้คุณกำลังรันโค้ดบนเซิร์ฟเวอร์ คุณกำลังรันโค้ดบนคลาวด์ มีความรับผิดชอบมากขึ้นด้วย พลังงานมากขึ้น. ความจริงที่ว่าคุณสามารถตัดสินใจได้ว่าคุณใช้เครื่องมือแต่ละประเภทที่ใด ฉันคิดว่า Next มีประโยชน์ที่น่าสนใจมาก

Drew: ในทางปฏิบัติของการรวมการสร้างไซต์แบบสแตติกและการเรนเดอร์ฝั่งเซิร์ฟเวอร์ มันทำงานอย่างไรในแง่ขององค์ประกอบเซิร์ฟเวอร์ คุณต้องการแพลตฟอร์มเฉพาะอย่าง Vercel เพื่อให้บรรลุเป้าหมายนั้น หรือเป็นสิ่งที่สามารถทำได้อย่างตรงไปตรงมาและเรียบง่ายยิ่งขึ้นหรือไม่

Guillermo: Next.js มีเซิร์ฟเวอร์สำหรับนักพัฒนา ดังนั้นคุณดาวน์โหลด Next และเรียกใช้ Next Dev ของคุณ นั่นคือเซิร์ฟเวอร์สำหรับนักพัฒนา เห็นได้ชัดว่าเซิร์ฟเวอร์ dev นั้นได้รับการปรับให้เหมาะสมที่สุดอย่างไม่น่าเชื่อสำหรับการพัฒนา เหมือนกับว่ามีเทคโนโลยีรีเฟรชเร็วล่าสุดที่ Facebook เปิดตัว โดยที่ … จริงๆ แล้ว Facebook ไม่ได้เปิดตัวมัน แต่ Facebook ใช้เป็นการภายในเพื่อรับการเปลี่ยนโมดูลยอดนิยมที่ดีที่สุดและมีประสิทธิภาพมากที่สุดและน่าเชื่อถือที่สุด โดยพื้นฐานแล้วคุณพิมพ์และการเปลี่ยนแปลงนั้นสะท้อนบนหน้าจอ นั่นคือเซิร์ฟเวอร์ dev

Guillermo: Next ให้เซิร์ฟเวอร์ที่ใช้งานจริงชื่อ Next Start และ Next Start มีความสามารถทั้งหมดของเฟรมเวิร์กสำหรับการโฮสต์ด้วยตนเอง สิ่งที่น่าสนใจเกี่ยวกับ Vercel คือเมื่อคุณปรับใช้ ถัดจากนั้น มันจะได้รับการปรับให้เหมาะสมโดยอัตโนมัติและไร้เซิร์ฟเวอร์ 100% ซึ่งหมายความว่าไม่มีความรับผิดชอบใด ๆ ของการดูแลระบบ การปรับขนาด การถอนเงินและการตรวจสอบเงินสด การไล่ออก การทำซ้ำ การล่มทั่วโลก และอื่นๆ เพื่อที่คุณจะต้องทำต่อไปเมื่อคุณเรียกใช้ Next Start ด้วยตัวคุณเอง

Guillermo: นั่นเป็นประโยชน์อย่างมากสำหรับ Next.js ตัวอย่างเช่น apple.com มีคุณสมบัติ โดเมนย่อย และหน้าต่างๆ บน dotcom บน Next.js ที่โฮสต์ด้วยตนเอง เนื่องจากความต้องการด้านความปลอดภัยและความเป็นส่วนตัวขั้นสูงและเข้มงวดมาก . ในทางกลับกัน washingtonpost.com ใช้ Vercel ดังนั้นเราจึงมีผู้ใช้ประเภทนี้มากมาย และเรายินดีเป็นอย่างยิ่งที่จะสนับสนุนพวกเขาทั้งหมด สิ่งที่ดีเกี่ยวกับทิศทางที่ไร้เซิร์ฟเวอร์ในความคิดของฉันคือสามารถให้สิ่งที่ดีที่สุดแก่คุณทั้งสองในแง่ของประสิทธิภาพที่เหมาะสมที่สุดซึ่งจะดีขึ้นเมื่อเวลาผ่านไปด้วยประสบการณ์นักพัฒนาที่ดีที่สุดเช่น "เฮ้ ฉันไม่มี ที่จะต้องกังวลเกี่ยวกับโครงสร้างพื้นฐานทุกประเภท”

Drew: The Next.js เป็นโครงการโอเพ่นซอร์สที่พัฒนาโดยทีมงานที่ Vercel มีผู้ร่วมให้ข้อมูลรายอื่นนอกเหนือจาก Vercel หรือไม่

Guillermo: ใช่ ดังนั้น Google Chrome จึงเป็นตัวหลักที่ส่ง PR ของเซิร์ฟเวอร์อย่างแข็งขัน ช่วยเราในการเพิ่มประสิทธิภาพและทดสอบกับพันธมิตร เช่น ผู้ใช้ Next.js รายใหญ่ๆ ที่เป็นส่วนหนึ่งของระบบนิเวศของ Google อยู่แล้ว เช่น เนื่องจากการใช้จำนวนมาก และแอพมากมาย ดังนั้นพวกเขาจึงต้องมีส่วนร่วมอย่างใกล้ชิดในฐานะพันธมิตร Facebook เรารักษาความสัมพันธ์ที่ดีกับทีมงาน Facebook ตัวอย่างเช่น การรีเฟรชอย่างรวดเร็ว เราเป็นเฟรมเวิร์ก React แรกในนั้น และพวกเขาช่วยแนะนำเราผ่านทุกสิ่งที่พวกเขาเรียนรู้จากการใช้ React และรีเฟรชอย่างรวดเร็วที่ Facebook

Guillermo: เราทำงานร่วมกับพันธมิตรจำนวนมากที่มีการปรับใช้แอป Next.js เป็นจำนวนมากจากการใช้งานประเภทต่างๆ เช่น ลองนึกภาพอีคอมเมิร์ซและเนื้อหา จากนั้นก็มีผู้ร่วมให้ข้อมูลอิสระมากมาย ผู้คนที่ใช้ Next.js เป็นการส่วนตัว แต่ยังรวมถึงนักการศึกษาและสมาชิกของทีมโครงสร้างพื้นฐานด้านหน้าของบริษัทขนาดใหญ่ด้วย เป็นความพยายามของชุมชนที่กว้างมาก

Drew: ดูเหมือนความกังวลที่ใครบางคนอาจมี ว่าสิ่งนี้กำลังได้รับการพัฒนาในส่วนสำคัญของ Vercel ว่าพวกเขาอาจมีความกังวลว่าพวกเขาจะถูกล็อคในการปรับใช้บนแพลตฟอร์มนั้น ๆ แต่ฟังดูแล้ว ไม่ได้เป็นเช่นนั้นจริงๆ และพวกเขาสามารถพัฒนาไซต์และปรับใช้บน Firebase หรือ Netlify หรือ...

Guillermo: ใช่อย่างแน่นอน ฉันชอบเปรียบเทียบมันมากสำหรับ Kubernetes แห่งยุค Front End ในทางใดทางหนึ่งเพราะในตอนท้ายของวันฉันเชื่อมั่นอย่างแรงกล้าว่า … Kubernetes เป็นสิ่งที่เกือบทุกคนต้องการเมื่อต้องการเรียกใช้กระบวนการ Linux เช่นเดียวกับที่คุณกำลังพูดเกี่ยวกับการแสดงความคิดเห็นและคุณกำลังพูดว่าเป็นเทคโนโลยีที่ดี ไม่ค่อยมีความคิดเห็น แต่มีความคิดเห็นบางอย่างที่เราลืมไป มันเหมือนกับว่าเมื่อสิ้นสุดวัน มันเติบโตจากการรันโปรแกรมลินุกซ์เฉพาะที่บรรจุเป็นคอนเทนเนอร์

Guillermo: ต่อไปอยู่ในตำแหน่งที่คล้ายคลึงกัน เพราะสิ่งที่เรามองว่าเป็นองค์ประกอบพื้นฐานสากลของโลกในฐานะองค์ประกอบ React เห็นได้ชัดว่าเป็นการให้ความเห็น แต่เราคิดว่าสำหรับองค์กรจำนวนมาก เช่นเดียวกับที่พวกเขาทั้งหมดมุ่งสู่ Linux เราเป็น เห็นสิ่งเดียวกันกับ React และ Vue แต่ Vue โชคดีที่มี Nuxt ด้วย ซึ่งเป็นวิธีแก้ปัญหาที่ยอดเยี่ยมมาก มันเทียบเท่ากับแนวคิดและหลักการเหมือน Next เรากำลังมุ่งสู่แพลตฟอร์มเหล่านี้ เช่น Next.js เช่น Nuxt เช่น Sapper สำหรับระบบนิเวศ Svelte

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

Drew: Next.js เวอร์ชันใหม่เพิ่งออกเมื่อเร็วๆ นี้ ฉันคิดว่าเวอร์ชัน 9.5 มีการเปลี่ยนแปลงที่สำคัญอะไรบ้างในการเปิดตัวครั้งนั้น?

Guillermo: สิ่งที่ยอดเยี่ยมที่สุดคืออย่างที่ฉันพูดไปก่อนหน้านี้ หลายสิ่งหลายอย่างเริ่มนิ่งและกลายเป็นไดนามิกมากขึ้นเมื่อสิ่งต่าง ๆ เติบโตขึ้น นี่เป็นการลงทุนสำหรับ WordPress ในตอนเริ่มต้น WordPress ใช้แนวทางฐานข้อมูลไฟล์แบบคงที่ จากนั้นจึงเพิ่มความต้องการฐานข้อมูล แบบเดียวกับที่คุณอธิบายไว้ว่า PHP พัฒนาขึ้นเป็น MySQL มากขึ้นเรื่อยๆ สิ่งที่ดีเกี่ยวกับ Next.js 9.5 คือทำให้การสร้างสแตติกส่วนเพิ่มเป็นฟีเจอร์ที่พร้อมสำหรับการผลิต ดังนั้นเราจึงนำมันออกจากแฟล็กที่ไม่เสถียร

Guillermo: ฟีเจอร์นี้ช่วยให้คุณเปลี่ยนเส้นทางจากสแตติกเป็นไดนามิกโดยไม่ต้องละทิ้งประโยชน์ของสแตติกทั้งหมด และไม่ต้องใช้งานไดนามิกที่แสดงผลบนเซิร์ฟเวอร์อย่างเต็มรูปแบบ ดังนั้นมันจึงยืดอายุการใช้งานสแตติกของคุณให้ยาวนานขึ้น วิธีที่เราใช้ที่ Vercel ดังที่ฉันได้กล่าวไปแล้ว มันเหมือนกับว่าบล็อกของเราได้รับการเรนเดอร์ล่วงหน้าอย่างสมบูรณ์ ณ เวลาที่สร้าง แต่จากนั้น ตัวอย่างเช่น จริงๆ แล้ว เรากำลังจะทำประกาศสำคัญๆ ในอีกไม่กี่นาที และเมื่อใด เราเขียนบล็อกเกี่ยวกับเรื่องนี้ เราต้องการที่จะปรับแต่ง แก้ไข แสดงตัวอย่าง และอื่นๆ โดยไม่ต้องออกบิลด์ 5-10 นาทีทุกครั้งที่เราเปลี่ยนจดหมายหนึ่งฉบับของโพสต์บล็อกหนึ่งฉบับ

Guillermo: ด้วยการสร้างสแตติกที่เพิ่มขึ้น คุณสามารถสร้างใหม่ได้ครั้งละหนึ่งหน้า อาจใช้เวลานาทีหรือวินาที ขึ้นอยู่กับว่าไซต์ของคุณใหญ่แค่ไหน ตอนนี้ใช้เวลาเป็นมิลลิวินาที อีกครั้ง คุณไม่จำเป็นต้องละทิ้งประโยชน์ของสแตติก นั่นอาจเป็นสิ่งที่ฉันตื่นเต้นมากที่สุดเกี่ยวกับความเสถียรบน Next.js 9.5 และโดยเฉพาะอย่างยิ่งเนื่องจากชุมชน JS และชุมชน React และชุมชนเฟรมเวิร์กและชุมชนที่สร้างไซต์แบบคงที่ได้พูดคุยเกี่ยวกับยูนิคอร์นในการสร้างแบบคงที่ที่เพิ่มขึ้นสำหรับ a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

ดรูว์: น่าทึ่งมาก If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. คุณมีคำพรากจากกันบ้างไหม?

Guillermo: No, thank you for having me.