Smashing Podcast Episode 23 Dengan Guillermo Rauch: Apa Selanjutnya.js?

Hari ini, kita berbicara tentang Next.js. Apa itu, dan di mana mungkin cocok dengan alur kerja pengembangan web kami? Saya berbicara dengan co-creator Guillermo Rauch untuk mencari tahu.

Tampilkan Catatan

• Guillermo Rauch di Twitter
• Selanjutnya.js

Update mingguan

• “Menguasai Props Dan PropTypes In React”
  oleh David Adeney
• “Keputusan Desain Terinspirasi Dengan Bradbury Thompson: Seni Desain Grafis”
  oleh Andy Clarke
• “Menyiapkan API Menggunakan Flask, Cloud SQL Google, dan App Engine”
  oleh Wole Oyekanmi
• “Bentuk Dan Validasi Dalam Ionic React”
  oleh Jerry Navi
• “Cara Membantu Klien Anda Mendapatkan Lebih Banyak Tautan Balik Melalui Desain”
  oleh Suzanne Scacca

Salinan

Drew McLellan: Dia adalah pendiri dan CEO Vercel, platform cloud untuk situs statis yang sesuai dengan alur kerja Jamstack. Dia juga co-creator Next.js. Dia sebelumnya mendirikan LearnBoost dan CloudUp, dan terkenal sebagai pencipta beberapa perpustakaan sumber terbuka node populer seperti Socket.io, Mongoose, dan SlackIn. Sebelum itu, dia adalah pengembang inti di MooTools, jadi kami tahu dia tahu jalan di sekitar JavaScript seperti punggung tangannya. Tahukah Anda bahwa dia pernah menerima komisi kerajaan dari Raja Spanyol untuk membuat patung es dari selada gunung es? Teman-temanku yang hebat, tolong sambut Guillermo Rauch. Hai Guillermo, apa kabar?

Guillermo Rauch: Saya sangat hebat, terima kasih telah menerima saya.

Drew: Saya ingin berbicara dengan Anda hari ini tentang seluruh dunia Next.js, karena itu adalah sesuatu yang jelas-jelas Anda ketahui secara pribadi, karena telah terlibat sebagai co-creator sejak awal. Next.js adalah salah satu nama proyek yang telah ada di radar saya saat bekerja di ruang Jamstack, tetapi itu bukan sesuatu yang sebenarnya pernah saya lihat atau kerjakan terlalu dekat sebelumnya. Untuk orang-orang seperti saya, yang mungkin tidak mengetahui apa itu Next.js, mungkin Anda bisa memberi kami sedikit latar belakang tentang apa itu dan masalah apa yang coba dipecahkannya.

Guillermo: Next.js adalah anggota yang sangat menarik dari dunia Jamstack, karena Next.js sebenarnya mulai menjadi kerangka kerja yang sepenuhnya berfokus pada SSR. Itu mulai mendapatkan banyak adopsi di luar ruang Jamstack di mana orang-orang membangun hal-hal yang sangat besar khususnya ketika mereka ingin memiliki konten yang dibuat pengguna atau konten dinamis atau jejaring sosial atau e-commerce, dan mereka tahu bahwa mereka menginginkan SSR karena kumpulan data mereka sangat besar atau sangat dinamis. Itu jatuh di bawah radar saya pikir untuk banyak orang di dunia Jamstack, tetapi kemudian Next.js memperoleh kemampuan untuk optimasi statis.

Guillermo: Di satu sisi, misalnya, jika Anda tidak akan melakukan pengambilan data di tingkat atas halaman Anda dengan Next.js, halaman React Anda akan menjadi ... Omong-omong, bagi mereka yang tidak sepenuhnya tahu, Next.js hanyalah kerangka kerja React untuk produksi, tetapi memiliki kemampuan untuk melakukan beberapa rendering. Kemudian ketika Anda mendapatkan kemampuan pengoptimalan statis, jika Anda tidak akan menentukan pengambilan data di tingkat atas halaman Anda, itu secara otomatis diekspor sebagai HTML alih-alih mencoba melakukan apa pun dengan rendering server.

Guillermo: Kemudian di kemudian hari, itu juga memperoleh kemampuan untuk pembuatan situs statis, yang berarti bahwa Anda dapat menentukan kait data khusus, tetapi kait data itu mendapatkan data pada waktu pembuatan. Next.js menjadi hybrid, kerangka dinamis dan statis yang sangat kuat, dan sekarang telah berkembang pesat di ruang Jamstack juga.

Drew: Orang-orang mungkin mengatakan bahwa React sudah menjadi framework, Anda pasti mendengarnya dijelaskan seperti itu. Apa sebenarnya yang dimaksud dengan kerangka kerja untuk React?

Guillermo: Itu pengamatan yang bagus, karena saya selalu menunjukkan kepada orang-orang bahwa Bereaksi di Facebook dan Bereaksi di luar Facebook adalah binatang yang sama sekali berbeda. Bereaksi di Facebook sebenarnya digunakan bersama dengan rendering server, tetapi bahkan rendering server mereka, misalnya, tidak menggunakan Node.js, ia menggunakan mesin virtual yang sangat khusus yang disebut Hermes yang berkomunikasi dengan jenis peretasan produksi dan tumpukan PHP dan jawaban mereka semua kebutuhan Facebook yang canggih dan eksotis ini.

Guillermo: Ketika mereka open source React, hampir seperti open source komponen. Saya selalu menyebutnya seperti open source mesin, tetapi tidak memberi Anda mobil. Apa yang terjadi adalah orang-orang benar-benar ingin pergi dan mengemudi dengannya, mereka ingin pergi ke berbagai tempat dengan React. Di komunitas, orang-orang mulai membuat mobil, dan mereka akan menyematkan React sebagai mesinnya, yang oleh pengemudi, pengembang, pada awalnya, menjadikan React sebagai bagian mendasar dari mobil. Hal-hal seperti Next.js dan Gatsby dan React Static dan banyak kerangka kerja lain mulai muncul yang memecahkan kebutuhan seperti, "Saya sebenarnya ingin membuat halaman dan aplikasi yang terisi penuh."

Guillermo: Sementara React lebih seperti komponen dan mesin untuk widget tertentu di dalam halaman, ini tentu saja berlaku untuk Facebook. Mereka akan secara luas dan publik mengakui bahwa mereka menciptakannya untuk hal-hal seperti kumpulan notifikasi, widget obrolan, komponen umpan berita, dan komponen-komponen itu adalah rute Bereaksi yang disematkan ke dalam konten aplikasi produksi yang ada dengan banyak baris kode dan bahkan perpustakaan dan kerangka kerja JS lainnya.

Guillermo: Apa artinya membuat kerangka kerja untuk React, itu berarti Anda menjadikan React sebagai bagian mendasar dari cerita, semoga dan ini adalah sesuatu yang akan kami coba lakukan dengan Next.js, kurva pembelajarannya terutama tentang React dengan beberapa tambahan permukaan untuk Next.js, khususnya seputar pengambilan dan perutean data. Kami juga melakukan banyak optimasi produksi, jadi ketika Anda mendapatkan React, ketika Anda mendapatkan aplikasi Create React, yang semacam itu, saya suka menyebutnya mobil bootstrap yang diberikan Facebook kepada Anda, mungkin kebutuhan produksi tidak terlalu terpenuhi. . Atau jika Anda mencoba melakukannya sendiri dengan mengonfigurasi Webpack dan mengonfigurasi Babel serta mengonfigurasi rendering server dan pembuatan statis, juga sulit untuk merakit mobil dari awal. Next.js akan memberi Anda konfigurasi nol ini dan juga kumpulan default yang dioptimalkan untuk membangun seluruh hal besar dengan React.

Drew: Jadi ini seperti menempatkan semacam ekosistem di sekitar aplikasi React Anda dengan kumpulan alat yang telah dikonfigurasi sebelumnya untuk memungkinkan Anda-

Guillermo: Benar.

Drew: Jalankan dan lakukan pembuatan situs statis atau rendering atau perutean server.

Guillermo: Benar, dan Anda menggunakan kata di sana yang sangat, sangat penting untuk semua ini, yang sudah dikonfigurasi sebelumnya. Kami cukup beruntung untuk menarik perhatian Google Chrome sebagai kontributor Next.js. Salah satu pemimpin proyek ini, menurutnya adalah ketika mereka mengerjakan kerangka kerja secara internal di Google, mereka menghadapi banyak masalah yang sama dengan yang dihadapi komunitas dan open source saat ini. Ada banyak inisiatif bersaing yang berbeda di Google tentang cara menskalakan dan membuat aplikasi web yang benar-benar berperforma di luar kotak.

Guillermo: Anda akan bergabung sebagai Googler dan Anda akan diberikan kerangka kerja yang dengannya Anda akan membuat aplikasi siap produksi yang sangat besar dan berkinerja sangat tinggi. Shubie adalah bagian dari banyak inisiatif tersebut, dan apa yang dia temukan adalah bahwa ada dua bahan utama untuk membuat kerangka kerja berhasil dalam skala besar. Salah satunya adalah pra-konfigurasi, artinya Anda mulai bekerja, Anda akan memulai aplikasi baru, Anda harus diberikan sesuatu yang sudah siap digunakan dan memenuhi banyak permintaan produksi yang diketahui pada saat itu. pada waktunya.

Guillermo: Di sisi lain, langkah penting lainnya yang sedang kami kerjakan adalah kesesuaian. Anda dapat diberikan kerangka kerja pra-konfigurasi siap produksi yang paling optimal, tetapi jika Anda melanjutkan dan, misalnya, mulai memperkenalkan banyak dependensi berat atau skrip pihak ketiga atau menggunakan tata letak yang sangat tidak efisien yang membutuhkan waktu lama untuk melukis dan seterusnya dan seterusnya, maka Anda akan membuat pra-konfigurasi menjadi sia-sia. Dengan mencampur pra-konfigurasi dengan kesesuaian dari waktu ke waktu, pengembang tidak hanya memiliki titik awal yang bagus, tetapi juga dipandu untuk sukses dari waktu ke waktu.

Drew: Tampaknya karakteristik Next.js, cukup berpendirian, lapisan UI React, menggunakan skrip tipe, menggunakan Webpack, dan itu semua adalah pilihan yang dibuat proyek dan itulah yang Anda dapatkan. Koreksi saya jika saya salah, tetapi Anda tidak dapat menukar React dengan Vue, misalnya, dalam Next.js.

Guillermo: Itu poin yang bagus, di mana pengambilan keputusan teknis bertemu dengan semacam seni. Di satu sisi, saya benar-benar ingin mengklaim bahwa Next sangat tidak masuk akal, dan alasannya adalah jika Anda secara khusus membuka github.com/vercel/nextjs dan direktori contoh, Anda akan melihat bahwa hampir seperti ledakan kombinasi teknologi yang dapat Anda gunakan bersama dengan Next.js. Anda akan melihat berbasis api, Anda akan melihat Graphic UL, Anda akan melihat Apollo, Anda akan melihat Redux, Anda akan melihat MobX, di ruang CSS ada lebih banyak pilihan.

Guillermo: Kami memiliki port CSS default yang tertanam, tetapi kemudian Anda dapat menggunakan dua rasa itu, satu dengan impor, satu dengan tag gaya yang kami sebut Style JSX, yang sangat mirip dengan pendekatan platform web untuk Shadow CSS. Alasan yang saya maksud tidak beropini adalah kami ingin Next.js tetap sangat dekat dengan "logam telanjang" web, dan tidak memperkenalkan banyak hal primitif yang jika web dari 10 tahun dari hari ini tidak akan kompatibel dengannya. Kemudian jika Anda melihat contohnya, Anda akan melihat bahwa ada semua teknologi lain yang dapat Anda pasang.

Guillermo: Tingkat dasar opini adalah bahwa ada React dan Anda tidak akan dapat menggantinya, setidaknya dalam waktu dekat. Lalu ada konsep Anda harus bisa membuat halaman, dan ini seperti hal baru ketika kami pertama kali meluncurkannya, di mana semua orang mencoba membuat aplikasi satu halaman. Apa yang kami sadari adalah seperti internet terdiri dari situs web dengan banyak halaman yang membuat titik masuk berbeda melalui mesin pencari, melalui Twitter, melalui Facebook, melalui jejaring sosial, melalui teman email, seperti Anda selalu membimbing orang tersebut menuju titik masuk, dan orang yang datang melalui titik masuk itu tidak perlu mengunduh seluruh beban aplikasi.

Guillermo: Kemudian jalur itu mengarahkan kami untuk mengimplementasikan rendering server, kemudian pembuatan statis untuk beberapa halaman, dan lain-lain. Tingkat dasar opini lainnya adalah Selanjutnya harus menjadi kerangka kerja yang berfungsi untuk web, bukan melawan web. Kemudian di atas semua itu, React kehilangan pengambilan data dan perutean primitif, dan kami menambahkannya. Ada tingkat opini yang harus dihadapi seperti semua orang membutuhkan router, jadi sebaiknya Anda memiliki router bawaan.

Drew: Keuntungan besar memiliki default itu adalah menghilangkan banyak kerumitan pilihan, itu hanya ada di sana, itu dikonfigurasi, dan Anda bisa mulai menggunakannya tanpa perlu berpikir terlalu banyak, karena saya pikir kita semua sudah -

Guillermo: Tepat sekali.

Drew: Berada dalam situasi di mana ada terlalu banyak pilihan komponen apa yang akan digunakan, dan itu bisa sangat melelahkan dan menghalangi produktivitas.

Guillermo: Tepat sekali.

Drew: Untuk proyek apa Anda melihat orang menggunakan Next.js? Apakah pada dasarnya untuk situasi apa pun di mana Anda mungkin membangun aplikasi React produksi, atau lebih cocok untuk jenis situs berat konten tertentu? Apakah itu penting dalam arti itu?

Guillermo: Ya, jadi ini telah menjadi perdebatan lama tentang web, apakah web untuk aplikasi, apakah web untuk situs, apakah itu hibrida? Apa peran JavaScript, dan lain-lain? Agak sulit untuk memberikan jawaban langsung, tetapi pendapat saya tentang ini adalah web selalu berkembang menjadi campuran konten yang berkembang menjadi lebih dan lebih dinamis dan pribadi bagi pengguna. Bahkan ketika Anda mengatakan seperti situs web konten, situs web konten kelas atas di dunia memiliki basis kode yang sangat mirip dengan aplikasi.

Guillermo: Contoh yang bagus di sini adalah seperti New York Times, mereka akan memberi Anda widget yang disematkan dengan alat analisis data dan animasi interaktif, dan mereka akan merekomendasikan cerita apa yang harus dibaca selanjutnya, dan mereka memiliki model langganan bawaan yang terkadang memberi Anda bagian dari konten dan terkadang menghitung berapa banyak artikel yang telah Anda baca. Seperti jika saya memberi tahu Anda ini ketika web ditemukan, seperti Tim Berners-Lee akan seperti, "Tidak, itu gila, itu tidak mungkin di web," tapi itulah web yang kita miliki saat ini.

Guillermo: Next.js menjawab banyak kebutuhan modern yang kompleks ini, yang berarti Anda akan melihat banyak penggunaan e-niaga, Anda akan melihat banyak konten dengan itu. Omong-omong, makna e-niaga tidak hanya seperti membeli barang, tetapi juga pengalaman seperti situs web real estat terbesar di web, realtor.com, zillow.com, trulio.com, bahwa seluruh kategori adalah Next.js, lalu konten situs. Kami baru saja bergabung dengan washingtonpost.com sebagai pelanggan Vercel dan Next.js, kami kemudian memiliki kategori ketiga yang lebih muncul tetapi sangat menarik, yaitu aplikasi lengkap dan konten buatan pengguna, seperti tiktok.com, dan sejenisnya akan berpikir kasus penggunaan aplikasi satu halaman asli juga cukup terwakili di sana.

Guillermo: Next.js semacam bersinar ketika Anda perlu memiliki banyak konten yang harus disajikan dengan sangat, sangat cepat, harus dioptimalkan SEO, dan pada akhirnya, itu campuran dinamis dan statis.

Drew: Saya sebelumnya telah berbicara dengan Marcy Sutton tentang Gatsby, yang tampaknya berada di ruang yang serupa. Itu selalu bagus untuk melihat lebih dari satu solusi untuk masalah dan memiliki pilihan untuk satu proyek ke proyek berikutnya. Apakah Anda akan mengatakan bahwa Next.js dan Gatsby beroperasi di ruang masalah yang sama, dan seberapa mirip atau berbedakah keduanya?

Guillermo: Saya pikir ada tumpang tindih untuk beberapa kasus penggunaan. Misalnya, blog pribadi saya rauchg.com berjalan di Next.js, itu juga bisa menjadi blog Gatsby yang hebat. Ada yang tumpang tindih di ruang situs web statis yang lebih kecil, dan maksud saya bukan tidak relevan. Banyak dotcom yang super, super penting berjalan di web yang pada dasarnya statis, jadi itulah keindahan Jamstack menurut saya. Karena Next.js dapat mengoptimalkan halaman Anda secara statis dan kemudian Anda bisa mendapatkan skor Lighthouse yang bagus melalui itu, Anda dapat menggunakannya untuk kasus penggunaan yang tumpang tindih.

Guillermo: Saya pikir garis akan ditarik ketika Anda mulai masuk ke kebutuhan yang lebih dinamis dan Anda memiliki banyak halaman, Anda harus memperbaruinya pada satu waktu. Meskipun Gatsby sedang membuat solusi untuk itu, Next.js sudah memiliki solusi langsung siap produksi yang bekerja dengan basis data apa pun, semua jenis backend data untuk "menghasilkan" atau "mencetak" banyak dan banyak halaman pada dasarnya. Di situlah pelanggan hari ini pergi ke Next.js alih-alih Gatsby.

Drew: Salah satu masalah yang tampaknya dialami semua orang saat solusi berbasis JavaScript mereka semakin besar adalah kinerja dan bagaimana segala sesuatunya bisa mulai menjadi sangat lambat, Anda memiliki ukuran bundel yang besar. Secara tradisional, hal-hal seperti pemecahan kode bisa sangat rumit untuk dikonfigurasi dengan benar. Saya melihat itu salah satu fitur yang muncul pada saya dari Next.js, yang mengklaim bahwa pemecahan kode dilakukan secara otomatis. Apa yang dilakukan Next.js dalam hal pemecahan kode untuk membuatnya berfungsi?

Guillermo: Pengamatan Anda 100% benar. Salah satu hal terbesar dengan web dan salah satu bobot terbesar di web adalah JavaScript, dan sama seperti bahan yang berbeda memiliki kepadatan dan bobot yang berbeda terlepas dari volume fisik sebenarnya, JavaScript cenderung menjadi elemen yang sangat padat dan berat. Bahkan sejumlah kecil JavaScript dibandingkan dengan, seperti misalnya, gambar yang dapat diproses secara asinkron dan di luar utas utama, JavaScript cenderung sangat mengganggu.

Guillermo: Next.js telah menginvestasikan banyak upaya untuk mengoptimalkan bundel Anda secara otomatis. Yang pertama adalah intuisi pertama saya ketika saya pertama kali muncul dengan ide untuk Next.js adalah Anda akan mendefinisikan, misalnya, 10 rute. Di dunia Next.js Anda membuat direktori halaman dan Anda meletakkan file Anda di sana Index.js, About.js, Settings.js, Dashboard.js, Termsofservice.js, Signup.js, Login.js. Itu menjadi titik masuk ke aplikasi Anda yang dapat Anda bagikan melalui semua jenis media.

Guillermo: Ketika Anda memasukkannya, kami ingin memberi Anda JS yang relevan untuk halaman itu terlebih dahulu dan terutama, dan kemudian mungkin bundel umum sehingga navigasi selanjutnya dalam sistem sangat cepat. Next.js juga, yang sangat, sangat bagus, secara otomatis mengambil lebih dulu sisa halaman yang terhubung ke titik masuk itu, sehingga terasa seperti aplikasi satu halaman. Banyak orang berkata seperti, “Mengapa tidak menggunakan aplikasi Create React saja jika saya tahu bahwa saya mungkin memiliki beberapa rute?” Saya selalu memberi tahu mereka, “Lihat, Anda dapat menemukannya sebagai halaman, dan karena Next.js akan secara otomatis mengambil halaman yang terhubung, Anda akhirnya mendapatkan aplikasi satu halaman, tetapi lebih baik dioptimalkan sehubungan dengan cat awal itu. , titik masuk awal itu.”

Guillermo: Itu adalah pendekatan pemecahan kode awal, tetapi kemudian menjadi jauh lebih canggih dari waktu ke waktu. Google menyumbangkan pengoptimalan yang sangat bagus yang disebut Modul dan Tanpa Modul, yang akan memberikan JS diferensial ke browser modern, dan JS lama yang sarat dengan polyfield ke browser lain, dan pengoptimalan ini 100% otomatis dan menghasilkan penghematan besar. Kami memberikannya kepada salah satu pelanggan kami yang kami host di Vercel bernama Parnaby's, saya yakin jika saya tidak salah, itu adalah sesuatu yang sangat, sangat signifikan. Itu mungkin seperti penghematan 30% dalam ukuran kode, dan itu hanya karena mereka memutakhirkan Next.js ke versi yang mengoptimalkan bundel JS dengan lebih baik.

Guillermo: Itu adalah poin yang telah kita bahas sebelumnya, yaitu Anda memilih Next.js dan hanya akan menjadi lebih baik dan lebih optimal dari waktu ke waktu, itu akan terus mengoptimalkan hal-hal atas nama Anda. Itu, sekali lagi, adalah pra-konfigurasi yang tidak akan pernah Anda hadapi atau ganggu, dan penelitian yang bahkan tidak ingin Anda lakukan, jujur ​​saja. Sepertinya saya tidak terlalu terlibat dengan ini, tetapi saya melihat beberapa diskusi internal dan mereka mendiskusikan semua bidang yang hanya penting bagi Internet Explorer X dan Soho, saya seperti, “Saya bahkan tidak ingin tahu , mari kita tingkatkan Next.js dan dapatkan semua manfaat ini.”

Drew: Terkadang ada manfaat besar di sana dengan tetap menggunakan default dan tetap menggunakan konfigurasi yang paling umum, yang tampaknya benar-benar merupakan pendekatan Next.js. Saya ingat ketika saya mulai menulis PHP di awal tahun 2000-an, dan semua orang menggunakan PHP dan MySQL, dan pada saat itu saya baru saja datang dari Windows jadi saya ingin menggunakan PHP dan Microsoft Sequel Server. Anda bisa melakukannya, tetapi Anda berenang melawan arus sepanjang jalan. Kemudian segera setelah saya beralih ke MySQL, seluruh ekosistem mulai bekerja untuk saya dan saya tidak perlu memikirkannya.

Guillermo: Ya, semuanya hanya klik, itu adalah pengamatan yang bagus. Kami melihat bahwa sepanjang waktu, seperti ekosistem Babel begitu kuat sekarang sehingga Anda bisa menjadi, misalnya, sedikit lebih cepat dengan menukar Babel dengan sesuatu yang lain, tetapi kemudian Anda menukar kompatibilitas ekosistem yang luar biasa itu. Ini adalah sesuatu yang Anda sentuh pada kinerja sebelumnya, dan seperti bagi banyak orang, membangun kinerja dan kinerja generasi statis adalah hambatan besar, dan ini adalah sesuatu yang kami sangat rajin untuk meningkatkan kinerja alat kami secara bertahap.

Guillermo: Misalnya, salah satu hal yang Next.js lakukan sekarang adalah mengupgrade default-nya dari Webpack 4 ke Webpack 5, yang memiliki beberapa hal yang merusak, dan itulah sebabnya kami pertama-tama menawarkannya kepada orang-orang sebagai pilihan di flag, tetapi nanti akan menjadi default. Webpack 5 membuat peningkatan kinerja yang luar biasa, tetapi kami tidak mengorbankan ekosistem Webpack, kami meningkat secara bertahap. Tentu, ada beberapa hal yang sangat kecil yang perlu dikorbankan, tetapi itulah manfaat luar biasa dari ekosistem JS saat ini yang banyak orang mengabaikannya, saya pikir, karena mungkin mereka melihat, “Oh, kita bisa melakukan X di Soho, mungkin sedikit lebih cepat, atau mungkin MPM di Soho akan memakan waktu lebih sedikit.” Mereka mengambil beberapa detail dan mereka kehilangan gambaran yang lebih besar, yaitu nilai ekosistem yang sangat besar.

Drew: Nilai memiliki semua konfigurasi dan pemeliharaan dan sisi itu dilakukan oleh proyek seperti Next.js daripada mengambilnya sendiri dengan menukar menggunakan sesuatu yang lain adalah luar biasa, karena segera setelah Anda menjauh dari default tersebut , Anda menanggung beban untuk menjalankan semua kompatibilitas dan melakukannya sendiri. Salah satu hal yang saya sangat tertarik dengan Next.js adalah ada opsi yang tersedia untuk melakukan pembuatan situs statis atau rendering sisi server, atau mungkin gabungan dari keduanya. Saya pikir ada beberapa perubahan baru-baru ini dalam pembaruan terbaru, dapatkah Anda memberi tahu kami sedikit tentang itu dan kapan Anda dapat memilih satu atau yang lain?

Guillermo: Ya, tentu saja. Salah satu komponen kunci dari pendekatan hibrid ini dikombinasikan dengan sistem halaman yang saya jelaskan sebelumnya adalah Anda dapat memiliki halaman yang sepenuhnya statis atau halaman yang dirender oleh server. Halaman yang sepenuhnya statis memiliki manfaat luar biasa dari apa yang saya sebut pengangkatan statis, yaitu Anda dapat mengambil aset itu dan secara otomatis meletakkannya di tepi. Dengan meletakkannya di tepi, maksud saya Anda dapat men-cache-nya, Anda dapat melakukan cache terlebih dahulu, Anda dapat mereplikasinya, Anda dapat membuatnya sehingga ketika permintaan masuk, itu tidak pernah menyentuh server karena kami tahu sebelumnya, “ Hei, Slash Index statis.”

Guillermo: Itu adalah manfaat yang sangat, sangat menarik dalam hal melayani khalayak global. Pada dasarnya Anda mendapatkan CDN otomatis di luar kotak, terutama saat Anda menerapkan jaringan edge modern seperti Vercel atau AWS Amplify atau Netlify dan sebagainya. Next.js memiliki premis ini jika dapat dibuat statis, itu harus statis. Saat Anda pertama kali memulai sebuah proyek dan Anda sedang mengerjakan halaman pertama Anda atau Anda menendang ban kerangka kerja, mungkin juga membuat semuanya statis.

Guillermo: Bahkan untuk kebutuhan kelas atas, jadi misalnya, vercel.com, penggunaan Next.js kami sepenuhnya statis. Ini adalah kombinasi dari pembuatan situs yang sepenuhnya statis dan statis, jadi semua halaman pemasaran kami statis, blog kami dihasilkan secara statis dari sumber data dinamis, dan kemudian dasbor kami yang memiliki banyak data dinamis, tetapi kami dapat mengirimkannya sebagai cangkang atau kerangka. , semua halaman yang terkait dengan melihat penerapan Anda, melihat proyek Anda, melihat log Anda, dan lain-lain, pada dasarnya adalah halaman statis dengan JavaScript sisi klien.

Guillermo: Itu sangat membantu kami karena semua yang kami butuhkan dengan kinerja panel pertama yang sangat cepat sudah dipra-render, semua yang membutuhkan SEO, sudah dipra-render, dan semua yang sangat dinamis, kami hanya perlu khawatir tentang keamanan, karena misalnya, dari sudut pandang sisi klien yang menggunakan panggilan API yang sama, misalnya, CLI kami digunakan atau integrasi kami digunakan, dan lain-lain. Situs web yang sepenuhnya statis, sangat murah untuk dioperasikan, sangat skalabel, dan seterusnya.

Guillermo: Sekarang, satu hal khusus yang kami butuhkan dengan blog kami adalah kami ingin memperbarui data dengan sangat cepat. Kami ingin memperbaiki kesalahan ketik dengan sangat cepat dan tidak menunggu seluruh pembangunan terjadi, dan ini adalah manfaat yang sangat signifikan dari Next.js, bahwa saat Anda mengangkang dari statis ke dinamis, ini memberi Anda solusi di antara juga . Untuk blog kami, kami menggunakan generasi statis tambahan, jadi pada dasarnya kami dapat membangun kembali satu halaman pada satu waktu ketika konten yang mendasarinya berubah.

Guillermo: Bayangkan bahwa kami tidak hanya memiliki beberapa ratus posting blog dan kami memiliki banyak posting blog yang dihasilkan sepanjang waktu dan diperbarui setiap saat, seperti yang saya sebutkan salah satu pelanggan kami, Washington Post, dalam hal ini Anda harus pergi lebih ke arah SSR penuh, terutama saat Anda mulai menyesuaikan konten untuk setiap pengguna. Perjalanan kompleksitas yang baru saja saya jelaskan dimulai dari saya memiliki satu halaman pemasaran, hingga saya memiliki blog yang memiliki beberapa ribu halaman, hingga saya memiliki puluhan ribu atau jutaan halaman. Itulah perjalanan Next.js yang bisa Anda lalui dengan bisnis Anda sendiri.

Guillermo: Kemudian Anda mulai sebagai pengembang untuk memilih antara tanggung jawab yang mungkin lebih kecil atau tanggung jawab yang lebih besar, karena ketika Anda memilih untuk menggunakan SSR, Anda sekarang menjalankan kode di server, Anda menjalankan kode di cloud, ada lebih banyak tanggung jawab dengan lebih banyak kekuatan. Fakta bahwa Anda dapat memutuskan di mana Anda menggunakan setiap jenis alat menurut saya merupakan manfaat yang sangat, sangat menarik dari Next.

Drew: Hanya dalam kepraktisan menggabungkan pembuatan situs statis dan rendering sisi server, bagaimana cara kerjanya dalam hal elemen server? Apakah Anda memerlukan platform khusus seperti Vercel untuk dapat mencapainya, atau apakah itu sesuatu yang dapat dilakukan dengan lebih lugas dan lebih sederhana?

Guillermo: Next.js memberi Anda server dev, jadi Anda mengunduh Next dan menjalankan Next Dev Anda, dan itulah server dev. Server dev jelas sangat dioptimalkan untuk pengembangan, seperti memiliki teknologi penyegaran cepat terbaru yang dirilis Facebook, di mana ... Sebenarnya, Facebook tidak merilisnya, Facebook menggunakannya secara internal untuk mendapatkan penggantian modul panas terbaik dan paling berkinerja dan paling andal , sehingga pada dasarnya Anda mengetik dan perubahannya tercermin di layar, jadi itulah server dev.

Guillermo: Kemudian Next memberi Anda server produksi yang disebut Next Start, dan Next Start memiliki semua kemampuan kerangka kerja untuk hosting sendiri. Hal yang menarik tentang Vercel adalah ketika Anda menerapkan Di sebelahnya, itu akan dioptimalkan secara otomatis dan 100% tanpa server, artinya tidak ada tanggung jawab apa pun dari administrasi, penskalaan, pencairan dan validasi pencairan, pembersihan, replikasi, kegagalan global dan seterusnya dan seterusnya yang harus Anda hadapi saat menjalankan Next Start sendiri.

Guillermo: Itu juga keuntungan besar dari Next.js, jadi misalnya, apple.com memiliki beberapa properti, subdomain, dan halaman yang berbeda di dotcom di Next.js yang mereka hosting sendiri, karena kebutuhan keamanan dan privasi yang sangat, sangat canggih dan ketat . Di sisi lain, washingtonpost.com menggunakan Vercel, jadi kami memiliki berbagai macam pengguna, dan kami sangat senang untuk mendukung semuanya. Hal yang menyenangkan tentang ke mana arah tanpa server menurut pendapat saya adalah ini dapat memberi Anda yang terbaik dari kedua dunia dalam hal kinerja paling optimal yang hanya menjadi lebih baik dari waktu ke waktu, dengan pengalaman pengembang terbaik seperti, “Hei, saya tidak punya khawatir tentang segala jenis infrastruktur.”

Drew: The Next.js adalah proyek open source yang sedang dikembangkan oleh tim di Vercel. Apakah ada kontributor lain di luar Vercel?

Guillermo: Ya, jadi Google Chrome menjadi yang utama yang secara aktif mengirimkan PR server, membantu kami dengan pengoptimalan dan mengujinya dengan mitra, seperti pengguna Next.js yang sangat besar yang sudah menjadi bagian dari ekosistem Google, misalnya, karena menggunakan banyak dan banyak aplikasi, sehingga mereka harus terlibat erat sebagai mitra. Facebook, kami menjaga hubungan baik dengan tim Facebook. Misalnya, penyegaran cepat, kami adalah kerangka kerja React pertama yang mendapatkannya, dan mereka membantu memandu kami melalui semua hal yang mereka pelajari tentang penggunaan Bereaksi dan penyegaran cepat di Facebook.

Guillermo: Kami bekerja dengan banyak mitra yang memiliki penerapan aplikasi Next.js yang sangat besar di alam liar dari semua jenis kasus penggunaan yang berbeda, seperti e-commerce dan konten bayangkan. Kemudian ada banyak sekali kontributor independen, orang-orang yang menggunakan Next.js secara pribadi, tetapi juga pendidik dan anggota tim infrastruktur depan di perusahaan besar. Ini adalah upaya komunitas yang sangat, sangat luas.

Drew: Kedengarannya seperti kekhawatiran yang mungkin dimiliki seseorang, bahwa ini sedang dikembangkan secara signifikan oleh Vercel, bahwa mereka mungkin memiliki kekhawatiran bahwa mereka akan terkunci dalam penerapan pada platform tertentu, tetapi kedengarannya sangat mirip itu tidak terjadi sama sekali, dan mereka dapat mengembangkan situs dan menyebarkannya di Firebase atau Netlify atau…

Guillermo: Ya, tentu saja. Saya suka membandingkannya seperti Kubernetes dari Front End, karena pada akhirnya saya sangat percaya bahwa ... Kubernetes adalah sesuatu yang hampir semua orang butuhkan ketika mereka perlu menjalankan proses Linux , seperti Anda berbicara tentang opini dan Anda mengatakan itu adalah teknologi yang bagus, itu sangat tidak berpendirian, tetapi ada beberapa opini yang agak kita lupakan. Ini seperti di penghujung hari, ia tumbuh dari menjalankan program-program Linux tertentu yang dikemas sebagai wadah.

Guillermo: Berikutnya berada di posisi yang sama, karena apa yang kami anggap primitif universal dunia sebagai komponen React, jelas itu adalah opini, tetapi kami berpikir bahwa untuk banyak perusahaan, sama seperti mereka semua condong ke Linux, kami melihat hal yang sama terhadap React dan Vue, tetapi Vue untungnya memiliki Nuxt juga, yang merupakan solusi yang sangat mengagumkan, ini setara dalam ide dan prinsip sebagai Next. Kami tertarik pada platform ini seperti Next.js, seperti Nuxt, seperti Sapper untuk ekosistem Svelte.

Guillermo: Saya pikir ini harus menjadi platform terbuka, karena sekali lagi, jika semua orang membutuhkan ini, mungkin juga tidak menemukan kembali roda di seluruh industri, bukan? Kami sangat menyambut posisi itu, kami menyambut orang-orang untuk menyebarkannya dan mengkonfigurasi ulang dan membangunnya kembali dan mendistribusikannya kembali dan seterusnya.

Drew: Baru-baru ini versi baru Next.js dirilis, menurut saya versi 9.5. Perubahan signifikan apa yang ada dalam rilis itu?

Guillermo: Yang paling mengagumkan adalah, seperti yang saya katakan sebelumnya, banyak hal mulai statis dan kemudian menjadi lebih dinamis seiring berkembangnya berbagai hal. Omong-omong, ini adalah usaha untuk WordPress. WordPress pada awalnya didasarkan pada pendekatan basis data file statis, dan kemudian berkembang menjadi membutuhkan basis data, seperti yang Anda gambarkan dengan bagaimana PHP berevolusi menjadi semakin banyak MySQL. Yang menarik dari Next.js 9.5 adalah ia menjadikan generasi statis tambahan sebagai fitur siap produksi, jadi kami mengeluarkannya dari tanda tidak stabil.

Guillermo: Fitur ini memungkinkan Anda melakukan perjalanan dari statis ke dinamis tanpa menyerah pada semua manfaat statis, dan tanpa harus bekerja penuh untuk dinamis yang dirender server, sehingga memperpanjang masa pakai jenis statis Anda. Cara kami menggunakannya di Vercel, misalnya, seperti yang saya sebutkan, ini seperti blog kami sepenuhnya dipra-render pada waktu pembuatan, tetapi kemudian misalnya, kami sebenarnya dalam beberapa menit akan membuat pengumuman besar, dan kapan kami membuat blog tentang itu, kami ingin dapat mengubahnya, memperbaikinya, mempratinjaunya, dan sebagainya tanpa harus mengeluarkan build lima hingga 10 menit setiap kali kami mengubah satu huruf dari satu posting blog.

Guillermo: Dengan generasi statis tambahan, Anda dapat membangun kembali satu halaman dalam satu waktu. Apa yang bisa memakan waktu beberapa menit atau bahkan detik, tergantung pada seberapa besar situs Anda, sekarang membutuhkan milidetik. Sekali lagi, Anda tidak perlu menyerah pada salah satu manfaat statis. Itu mungkin hal yang paling saya sukai yang menjadi stabil di Next.js 9.5, dan khususnya karena komunitas JS dan komunitas React dan komunitas kerangka kerja dan komunitas yang dihasilkan situs statis telah berbicara tentang unicorn ini untuk membuat inkremental statis untuk 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.

Drew: Itu menarik. 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. Apakah Anda memiliki kata-kata perpisahan?

Guillermo: No, thank you for having me.