Guillermo Rauch ile Çarpıcı Podcast 23. Bölüm: Next.js Nedir?

Bugün Next.js hakkında konuşuyoruz. Nedir ve web geliştirme iş akışımıza nereye sığabilir? Bunu öğrenmek için ortak yaratıcı Guillermo Rauch ile konuştum.

Notları göster

• Twitter'da Guillermo Rauch
• Sonraki.js

Haftalık güncelleme

• "React'te Props ve PropTypes'ta Ustalaşmak"
  David Adeneye tarafından
• “Bradbury Thompson ile İlham Veren Tasarım Kararları: Grafik Tasarım Sanatı”
  Andy Clarke tarafından
• “Google'ın Cloud SQL ve App Engine'i Flask Kullanarak API Ayarlama”
  tarafından Wole Oyekanmi
• “İyonik Tepkimede Formlar ve Doğrulama”
  Jerry Navi tarafından
• “Müşterilerinizin Tasarım Yoluyla Daha Fazla Geri Bağlantı Almasına Nasıl Yardımcı Olabilirsiniz”
  Suzanne Scacca tarafından

Transcript

Drew McLellan: Jamstack iş akışına uyan statik siteler için bir bulut platformu olan Vercel'in kurucusu ve CEO'su. Aynı zamanda Next.js'nin ortak yaratıcısıdır. Daha önce LearnBoost ve CloudUp'ı kurdu ve Socket.io, Mongoose ve SlackIn gibi birçok popüler düğüm açık kaynak kitaplığının yaratıcısı olarak biliniyor. Bundan önce, MooTools'ta çekirdek geliştiriciydi, bu nedenle JavaScript'i avucunun içi gibi bildiğini biliyoruz. Bir keresinde buzdağı marulundan bir buz heykeli yapmak için İspanya Kralı'ndan bir kraliyet komisyonu aldığını biliyor muydunuz? Ezici dostlarım, lütfen Guillermo Rauch'a hoş geldiniz. Merhaba Guillermo, nasılsın?

Guillermo Rauch: İnanılmaz iyiyim, bana sahip olduğunuz için teşekkürler.

Drew: Bugün seninle Next.js'nin tüm dünyası hakkında konuşmak istedim, çünkü bu, en başından beri ortak yaratıcı olarak dahil olduğun için kişisel olarak çok bilgili olduğun bir şey. Next.js, Jamstack alanında çalışırken radarımda olan proje adlarından biridir, ancak daha önce şahsen baktığım veya çok yakından çalıştığım bir şey değil. Benim gibi, belki de Next.js'nin ne olduğunun farkında olmayan insanlar için, belki bize onun ne olduğu ve hangi sorunları çözmeye çalıştığı hakkında biraz bilgi verebilirsiniz.

Guillermo: Next.js, Jamstack evreninin çok ilginç bir üyesi çünkü Next.js aslında tamamen SSR odaklı bir çerçeve olmaya başladı. İnsanların özellikle kullanıcı tarafından oluşturulan içeriğe veya dinamik içeriğe veya sosyal ağlara veya e-ticarete sahip olmak istediklerinde çok büyük şeyler inşa ettikleri Jamstack alanı dışında çok fazla benimsenmeye başladı ve SSR istediklerini biliyorlardı çünkü veri kümeleri çok büyük veya çok dinamik. Jamstack dünyasındaki birçok insan için radarın altına düştü, ancak daha sonra Next.js statik optimizasyon için yetenekler kazandı.

Guillermo: Bir yandan, örneğin Next.js ile sayfanızın en üst seviyesinde veri getirme yapmazsanız, React sayfanız… Bu arada, tam olarak bilmeyenler için, Next.js, üretim için basitçe React çerçevesidir, ancak bu, bir miktar işleme yapma yeteneğine sahiptir. Ardından, statik optimizasyon yeteneklerine girdiğinizde, sayfanızın en üst düzeyinde veri getirmeyi tanımlamazsanız, sunucu oluşturma ile herhangi bir şey yapmaya çalışmak yerine otomatik olarak HTML olarak dışa aktarılır.

Guillermo: Daha sonra, statik site oluşturma yeteneği de kazandı, yani özel bir veri kancası tanımlayabilirsiniz, ancak bu veri kancası derleme zamanında veri alır. Next.js, hibrit, çok güçlü dinamik ve statik bir çerçeve haline geldi ve şimdi Jamstack alanında da çok büyüyor.

Drew: İnsanlar React'in zaten bir çerçeve olduğunu söyleyebilir, kesinlikle böyle tanımlandığını duyarsınız. React için bir çerçeve olmak aslında ne anlama geliyor?

Guillermo: Bu harika bir gözlem, çünkü insanlara her zaman React at Facebook ve React'in Facebook dışında tamamen farklı canavarlar olduğuna dikkat çekiyorum. React at Facebook aslında sunucu oluşturma ile birlikte kullanılır, ancak örneğin sunucu oluşturma bile Node.js kullanmaz, kendi tür üretim hack ve PHP yığını ve yanıtlarıyla iletişim kuran Hermes adlı oldukça özel bir sanal makine kullanır. tüm bu gelişmiş ve egzotik Facebook ihtiyaçları.

Guillermo: React kaynağı açtıklarında, bu neredeyse bir bileşeni açık kaynak kullanmak gibi. Ben buna her zaman motoru açık kaynaktan almak gibi ama arabayı sana vermemek gibi derim. Olan şey, insanlar gerçekten onunla gitmek ve onunla sürmek istediler, React ile yerlere ulaşmak istediler. Toplulukta, insanlar araba yaratmaya başladılar ve React'i motor olarak yerleştireceklerdi, ki bu, sürücünün, geliştiricinin ilk etapta peşinde olduğu şeydi, React'i arabanın temel parçası haline getiriyordu. Next.js ve Gatsby ve React Static gibi şeyler ve “Aslında tam yüklü sayfalar ve uygulamalar oluşturmak istiyorum” gibi ihtiyacı çözen diğer birçok çerçeve ortaya çıkmaya başladı.

Guillermo: React daha çok sayfa içindeki belirli widget'ların bileşeni ve motoru gibiyken, bu kesinlikle Facebook için geçerliydi. Bunu, bildirim grubu, sohbet aracı, haber akışı bileşeni gibi şeyler için icat ettiklerini ve bu bileşenlerin çok sayıda kod satırıyla mevcut üretim uygulamasının içeriğine gömülü React yolları olduğunu genel olarak ve herkese açık bir şekilde kabul edeceklerdir. ve hatta diğer JS kitaplıkları ve çerçeveleri.

Guillermo: React için bir çerçeve oluşturmak ne demektir, bu, React'i hikayenin temel parçası yaptığınız anlamına gelir, umarım ve bu Next.js ile yapmaya çalışacağımız bir şeydir, öğrenme eğrisi öncelikle bazı eklerle React ile ilgilidir. Next.js için yüzey, özellikle veri alma ve yönlendirme konusunda. Ayrıca bir çok üretim optimizasyonu yapıyoruz, bu yüzden React'i aldığınızda, Create React uygulamasını aldığınızda, ki bu bir nevi Facebook'un size verdiği önyüklenmiş bir araba demek hoşuma gidiyor, belki üretim ihtiyaçları tam olarak karşılanmıyor. . Veya Webpack'i yapılandırarak ve Babel'i yapılandırarak ve sunucu oluşturma ve statik oluşturmayı yapılandırarak bunu kendiniz yapmaya çalışırsanız, sıfırdan bir araba oluşturmak da zordur. Next.js size bu sıfır yapılandırmayı ve ayrıca React ile tüm büyük şeyleri oluşturma konusunda üretim için optimize edilmiş varsayılanlar kümesini verecektir.

Drew: Yani, önceden yapılandırılmış araçlardan oluşan bir koleksiyonla React uygulamanızın çevresine neredeyse bir tür ekosistem yerleştiriyor.

Guillermo: Doğru.

Drew: Çalışmaya başlayın ve statik site oluşturma veya sunucu oluşturma veya yönlendirme yapın.

Guillermo: Doğru ve orada tüm bunlar için çok çok önemli olan ve önceden yapılandırılmış bir kelime kullandınız. Next.js'ye katkıda bulunan biri olarak Google Chrome'un dikkatini çekecek kadar şanslıyız. Bu projenin liderlerinden biri, Google'da dahili olarak çerçeveler üzerinde çalışırken, topluluğun ve açık kaynağın bugün karşılaştığı sorunların birçoğuyla karşılaştılar. Google'da, kullanıma hazır web uygulamalarının nasıl ölçeklendirileceği ve gerçekten performanslı hale getirileceği konusunda birbiriyle rekabet halinde olan birçok girişim vardı.

Guillermo: Bir Google çalışanı olarak katılacaksınız ve size gerçekten büyük üretime hazır, çok yüksek performanslı uygulamalar oluşturabileceğiniz bir çerçeve verilecek. Shubie bu girişimlerin birçoğunun parçasıydı ve bulduğu şey, bir çerçeveyi ölçekte başarılı kılmak için iki temel bileşen olduğuydu. Biri ön yapılandırmadır, yani işe gelirsiniz, yepyeni bir uygulama başlatacaksınız, size zaten kullanıma hazır olan ve o anda bilinen birçok üretim talebini karşılayan bir şey verilmelidir. zamanında.

Guillermo: Öte yandan, üzerinde çalıştığımız diğer gerçekten önemli adım, uygunluktur. Size en yüksek düzeyde optimize edilmiş üretime hazır önceden yapılandırılmış çerçeve verilebilir, ancak devam ederseniz ve örneğin, çok sayıda ağır bağımlılık veya üçüncü taraf komut dosyası sunmaya başlarsanız veya boyaması uzun zaman alan çok verimsiz düzenler kullanırsanız vb. ve saire, o zaman bu ön konfigürasyonu boşa harcamış olacaksınız. Ön yapılandırmayı zaman içinde uyumlulukla karıştırarak, geliştirici yalnızca harika bir başlangıç ​​noktasına sahip olmakla kalmaz, aynı zamanda zaman içinde başarıya yönlendirilir.

Drew: Görünüşe göre Next.js'nin bir özelliği, oldukça kanaatkar, UI katmanı React, type script kullanıyor, Webpack kullanıyor ve bunların hepsi projenin yaptığı seçimler ve elde ettiğiniz de bu. Yanılıyorsam düzeltin, ancak örneğin Next.js içinde React'i Vue ile değiştiremezsiniz.

Guillermo: Bu, teknik karar vermenin bir tür sanatla buluştuğu iyi bir nokta. Bir yandan, Next'in çok fikirsiz olduğunu gerçekten iddia etmek isterim ve bunun nedeni, özellikle github.com/vercel/nextjs ve örnekler dizinine giderseniz, neredeyse bir şey olduğunu göreceksiniz. Next.js ile birlikte kullanabileceğiniz teknolojilerin kombinatorik patlaması. Ateş tabanlı göreceksiniz, Graphic UL göreceksiniz, Apollo göreceksiniz, Redux göreceksiniz, MobX göreceksiniz, CSS alanında daha da fazla seçenek var.

Guillermo: Gömülü bir varsayılan CSS bağlantı noktasına sahibiz, ancak daha sonra, biri içe aktarma ile, biri Stil JSX dediğimiz stil etiketleriyle, Gölge CSS'ye web platformu yaklaşımına çok benzeyen iki farklı çeşidini kullanabilirsiniz. Düşüncesiz demek istememin nedeni, Next.js'nin web'in “çıplak metaline” çok yakın kalmasını ve bugünden 10 yıl sonra web'in uyumsuz olacağı çok sayıda ilkel sunmamasını istememizdir. Sonra örneklere bakarsanız, ekleyebileceğiniz tüm bu diğer teknolojilerin olduğunu göreceksiniz.

Guillermo: Temel görüş seviyesi, React'in olduğu ve en azından yakın zamanda onu değiştiremeyecek olmanızdır. Sonra, sayfalar oluşturabilmeniz gerektiği fikri var ve bu, onu ilk başlattığımızda, herkesin tek sayfalık uygulamalar oluşturmaya çalıştığı yeni bir şey gibiydi. İnternetin, arama motorları, Twitter, Facebook, sosyal ağlar, e-posta yoldaşları aracılığıyla farklı giriş noktaları oluşturan birçok sayfası olan web sitelerinden oluştuğunu fark ettik, tıpkı sizin gibi kişiyi her zaman bir giriş noktasına yönlendirdiğiniz gibi, ve o giriş noktasından gelen kişi, uygulamanın tamamının yükünü indirmek zorunda kalmamalıdır.

Guillermo: O zaman bu yol bizi sunucu işlemeyi uygulamaya, ardından birden çok sayfa için statik oluşturmaya ve saireye götürdü. Diğer temel görüş düzeyinin Next olduğu, web'e karşı değil, web için çalışan bir çerçeve olmalıdır. Üstüne üstlük, React'te veri alma ve yönlendirme ilkelleri eksikti ve biz bunları ekledik. Herkesin bir yönlendiriciye ihtiyacı varmış gibi ele alınması gereken bir fikir düzeyi vardır, bu nedenle varsayılan olarak yerleşik bir yönlendirici de olabilir.

Drew: Bu varsayılanlara sahip olmanın en büyük avantajı, seçim karmaşıklığının çoğunu ortadan kaldırması, sadece orada olması, yapılandırılmış olması ve çok fazla düşünmenize gerek kalmadan kullanmaya başlayabilmenizdir, çünkü bence hepimiz -

Guillermo: Aynen.

Drew: Hangi bileşenlerin kullanılacağına dair çok fazla seçeneğin olduğu ve bunaltıcı olabileceği ve üretken olmanın önüne geçebileceği durumlarda bulundum.

Guillermo: Aynen.

Drew: İnsanların Next.js'yi ne tür projeler için kullandığını görüyorsunuz? Temel olarak, bir üretim React uygulaması oluşturabileceğiniz herhangi bir durum için mi, yoksa belirli türdeki içerik açısından yoğun siteler için daha mı uygun? Bu anlamda önemli mi?

Guillermo: Evet, yani bu web için çok eski bir tartışmaydı, uygulamalar için web mi, siteler için web mi, melez mi? JavaScript, et cetera, et cetera'nın rolü nedir? Kesin bir cevap vermek biraz zor, ama benim bu konudaki yaklaşımım, web'in her zaman daha dinamik ve kullanıcı için daha kişisel olacak şekilde gelişen bir içerik melezi olacak şekilde evrimleştiğidir. Bir içerik web sitesi gibi dediğinizde bile, dünyanın üst düzey içerik web sitelerinin, uygulamalara çok benzeyen kod tabanları vardır.

Guillermo: Burada harika bir örnek New York Times gibi, size veri analiz araçları ve etkileşimli animasyon içeren gömülü widget'lar verecekler ve daha sonra hangi hikayeyi okuyacağınızı önerecekler ve bazen size veren yerleşik bir abonelik modeline sahipler. içeriğin bir parçasıdır ve bazen kaç makale okuduğunuzu sayar. Bunu size web icat edildiğinde söyleseydim, Tim Berners-Lee "Hayır, bu çılgınca, bu internette mümkün değil" derdi ama bugün sahip olduğumuz web bu.

Guillermo: Next.js, bu karmaşık modern ihtiyaçların çoğuna cevap veriyor, bu da çok sayıda e-ticaret kullanımı göreceğiniz, bununla birlikte çok sayıda içerik göreceğiniz anlamına geliyor. Bu arada e-ticaret, sadece ürün satın almak gibi değil, aynı zamanda web'deki en büyük emlak web siteleri, realtor.com, zillow.com, trulio.com gibi deneyimler anlamına gelir, bu kategorinin tamamı Next.js, ardından içerik Siteler. Washtonpost.com'u Vercel ve Next.js'nin bir müşterisi olarak yeni kattık, daha sonra ortaya çıkan ama çok ilginç olan, tam uygulamalar ve tiktok.com gibi kullanıcı tarafından oluşturulan içerik ve sizin gibi bir tür üçüncü kategorimiz var. Orijinal tek sayfalık uygulama kullanım durumunun orada oldukça temsil edildiğini düşünürdüm.

Guillermo: Next.js, çok, çok hızlı bir şekilde sunulması gereken, SEO için optimize edilmesi gereken ve günün sonunda, dinamik ve statik bir karışımı olan çok sayıda içeriğe ihtiyacınız olduğunda parlar.

Drew: Daha önce Marcy Sutton ile benzer bir uzayda gibi görünen Gatsby hakkında konuşmuştum. Bir soruna birden fazla çözüm görmek ve bir projeden diğerine seçim yapmak her zaman harikadır. Next.js ve Gatsby'nin aynı tür problem alanında çalıştığını ve ne kadar benzer veya farklı olduklarını söyleyebilir misiniz?

Guillermo: Bazı kullanım durumları için bir örtüşme olduğunu düşünüyorum. Örneğin, kişisel blogum rauchg.com Next.js üzerinde çalışıyor, harika bir Gatsby blogu da olabilirdi. Daha küçük statik web sitesi türünde bir örtüşme var ve küçük ile alakalı değil demek istemiyorum. Süper, süper önemli olan birçok dotcom, temelde statik web üzerinde çalışır, bu yüzden bence Jamstack'in güzelliği bu. Next.js, sayfalarınızı statik olarak optimize edebildiğinden ve bu sayede harika Lighthouse puanları alabileceğinizden, örtüşen kullanım durumları için kullanabilirsiniz.

Guillermo: Daha dinamik ihtiyaçlara girmeye başladığınızda ve çok sayıda sayfanız olduğunda, onları bir kerede güncellemeniz gerektiğinde çizginin çekildiğini düşünüyorum. Gatsby bunlara yönelik çözümler üretiyor olsa da, Next.js, temelde çok sayıda sayfayı “oluşturmak” veya “yazdırmak” için her tür veritabanıyla, her tür veri arka ucuyla çalışan üretime hazır canlı çözümlere zaten sahiptir. Bugün müşterilerin Gatsby yerine Next.js'ye gittiği yer burasıdır.

Drew: JavaScript tabanlı çözümleri büyüdükçe herkesin karşılaştığı sorunlardan biri performans ve işlerin nasıl oldukça yavaşlamaya başladığı, büyük paket boyutlarınız var. Geleneksel olarak, kod bölme gibi şeyler, doğru şekilde yapılandırılmak için oldukça karmaşık olabilir. Next.js'nin bana sıçrayan özelliklerinden birinin kod bölmenin otomatik olduğunu iddia ettiğini görüyorum. Next.js, bunun işe yaraması için kod bölme açısından ne yapar?

Guillermo: Gözlemin %100 doğru. Web'deki en büyük şeylerden biri ve web'deki en büyük ağırlıklardan biri JavaScript'tir ve farklı materyallerin gerçek fiziksel hacminden bağımsız olarak farklı yoğunlukları ve ağırlıkları olması gibi, JavaScript de çok yoğun ve ağır bir öğe olma eğilimindedir. Örneğin, asenkron olarak ve ana iş parçacığı dışında işlenebilen görüntüler gibi küçük miktarlarda JavaScript ile karşılaştırıldığında, JavaScript özellikle rahatsız edici olma eğilimindedir.

Guillermo: Next.js, paketlerinizi otomatik olarak optimize etmek için muazzam miktarda çaba harcadı. Next.js fikrini ilk bulduğumda ilk sezgim, örneğin 10 rota tanımlayacağınızdı. Next.js dünyasında bir sayfa dizini oluşturursunuz ve dosyalarınızı oraya Index.js, About.js, Settings.js, Dashboard.js, Termsofservice.js, Signup.js, Login.js bırakırsınız. Bunlar, uygulamanızın her türlü medya aracılığıyla paylaşabileceğiniz giriş noktaları haline gelir.

Guillermo: Bunları girdiğinizde, size her şeyden önce o sayfayla ilgili JS'yi ve ardından sistem içinde sonraki gezinmelerin çok hızlı olması için belki de ortak bir paket vermek istiyoruz. Ayrıca, çok, çok güzel olan Next.js, bu giriş noktasına bağlı diğer sayfaları otomatik olarak önceden getirir, böylece tek sayfalık bir uygulama gibi hissettirir. Pek çok insan, "Belki birkaç rotam olduğunu biliyorsam neden sadece Create React uygulamasını kullanmıyorsunuz?" der. Onlara her zaman şunu söylerim, "Bakın, bunları sayfa olarak bulabilirsiniz ve Next.js bağlı olanları otomatik olarak önceden getireceğinden, tek sayfalık uygulamanızı alırsınız, ancak bu ilk boyamaya göre daha iyi optimize edilmiştir. , o ilk giriş noktası."

Guillermo: İlk kod bölme yaklaşımı buydu, ancak zamanla çok daha karmaşık hale geldi. Google, modern tarayıcılara diferansiyel JS ve diğer tarayıcılara çoklu alanlarla dolu eski JS verecek olan Module ve No Module adlı çok güzel bir optimizasyona katkıda bulundu ve bu optimizasyon %100 otomatiktir ve büyük tasarruflar sağlar. Vercel'de misafir ettiğimiz Parnaby's adlı bir müşterimize vermiştik, yanılmıyorsam çok ama çok önemli bir şeydi. Belki kod boyutlarında %30 tasarruf gibi bir şeydi ve bunun nedeni Next.js'yi JS paketlerini daha iyi optimize eden bir sürüme yükseltmeleriydi.

Guillermo: Bu, daha önce üzerinde durduğumuz bir noktaydı, yani Next.js'yi seçersiniz ve zamanla daha iyi ve daha optimal hale gelir, sizin adınıza işleri optimize etmeye devam eder. Bunlar, yine, asla uğraşmak zorunda kalmayacağınız, hiç uğraşmayacağınız ve dürüst olmak gerekirse, araştırmayı hiç yapmak bile istemediğiniz ön konfigürasyonlardır. Ben açıkçası bununla pek ilgili değildim ama bazı iç tartışmalara baktım ve sadece Internet Explorer X ve Soho için önemli olan tüm bu çoklu alanları tartışıyorlardı, "Bunu bilmek bile istemiyorum" dedim. , sadece Next.js'yi yükseltelim ve tüm bu avantajlardan yararlanalım.”

Drew: Varsayılanlara bağlı kalmanın ve şeylerin en yaygın yapılandırmasına bağlı kalmanın bazen büyük faydaları vardır, bu gerçekten Next.js yaklaşımı gibi görünüyor. 2000'lerin başında PHP yazmaya başladığımı hatırlıyorum ve herkes PHP ve MySQL kullanıyordu ve o zamanlar Windows'tan yeni geldiğim için PHP ve Microsoft Sequel Server'ı kullanmak istedim. Yapabilirsin, ama tüm yol boyunca akıntıya karşı yüzüyorsun. Sonra MySQL'e geçer geçmez, tüm ekosistem benim için çalışmaya başladı ve bunu düşünmeme gerek kalmadı.

Guillermo: Evet, her şey tıkır tıkır tıkır tıkır işliyor, bu harika bir gözlem. Babil ekosisteminin şimdi o kadar güçlü olduğunu her zaman görüyoruz, örneğin Babil'i başka bir şeyle değiştirerek biraz daha hızlı olabilirsiniz, ancak sonra bu inanılmaz ekosistem uyumluluğunu takas ediyorsunuz. Bu, performansa daha önce değindiğiniz bir şeydir ve birçok insan için olduğu gibi, yapı performansı ve statik oluşturma performansı büyük bir darboğazdır ve bu, araçlarımızın performansını adım adım iyileştirme konusunda çok gayretli olduğumuz bir şeydir.

Guillermo: Örneğin, Next.js'nin şu anda yaptığı şeylerden biri, varsayılanını Webpack 4'ten Webpack 5'e yükseltmesidir, bu da bazı kırılma noktalarına sahiptir ve bu yüzden ilk olarak insanlara bir seçenek olarak sunuyoruz. bayrakta, ancak daha sonra varsayılan olacak. Webpack 5, inanılmaz performans iyileştirmeleri yapıyor, ancak Webpack ekosisteminden ödün vermiyoruz, aşamalı olarak geliştirdik. Elbette, feda edilmesi gereken çok küçük şeyler vardı, ancak bu, bugün birçok insanın görmezden geldiği JS ekosisteminin inanılmaz bir faydası, sanırım, çünkü belki şunu görebilirler, “Oh, biz X yapabilirdik. Soho'da belki biraz daha hızlıydı ya da belki Soho'da MPM daha az zaman alırdı." Bazı ayrıntıları yakalarlar ve büyük resmi kaçırırlar, bu da ekosistem değerinin muazzam olduğu anlamına gelir.

Drew: Tüm konfigürasyonun, bakımın ve o tarafının Next.js gibi bir proje tarafından yapılmasının değeri, bunu başka bir şey kullanarak değiştirmek yerine kendiniz üstlenmektense inanılmaz, çünkü bu varsayılanlardan uzaklaşır uzaklaşmaz , tüm uyumlulukları devam ettirmenin ve bunu kendiniz yapmanın yükünü üzerinize alıyorsunuz. Next.js ile gerçekten ilgilendiğim şeylerden biri, statik site oluşturma veya sunucu tarafı oluşturma veya belki de ikisinin bir karışımı için kullanılabilecek seçenekler olmasıdır. Sanırım yakın zamanda yapılan bir güncellemede bu konuda bazı değişiklikler oldu, bize biraz bundan bahsedebilir misiniz ve ne zaman birini veya diğerini seçebileceğinizi söyleyebilir misiniz?

Guillermo: Evet, kesinlikle. Bu hibrit yaklaşımın daha önce bahsettiğim sayfa sistemiyle birleştirilmesinin temel bileşenlerinden biri, tamamen statik sayfalara veya sunucunun oluşturduğu sayfalara sahip olabilmenizdir. Tamamen statik olan bir sayfa, benim statik kaldırma dediğim şeyin inanılmaz avantajına sahiptir, yani bu varlığı alıp otomatik olarak kenara koyabilirsiniz. Kenara koyarak yani önbelleğe alabilirsin, önceden önbelleğe alabilirsin, çoğaltabilirsin, bir istek geldiğinde sunucuya asla dokunmamasını sağlayabilirsin çünkü önceden biliyoruz, “ Hey, Slash Index statiktir.

Guillermo: Konu küresel kitlelere hizmet etmek olduğunda bu çok, çok ilginç bir avantaj. Özellikle Vercel veya AWS Amplify veya Netlify gibi modern uç ağları dağıttığınızda, temelde kutudan otomatik bir CDN alırsınız. Next.js, statik hale getirilebiliyorsa statik olması gerektiğine dair bu öncüllere sahiptir. Bir projeye ilk başladığınızda ve ilk sayfanız üzerinde çalışıyorsanız veya çerçevenin lastiklerini tekmeliyorsanız, her şeyi statik hale getirebilir.

Guillermo: Üst düzey ihtiyaçlar için bile, örneğin vercel.com, Next.js'yi kendi kullanımımız tamamen statiktir. Bu, tamamen statik ve statik site oluşturmanın bir birleşimidir, bu nedenle tüm pazarlama sayfalarımız statiktir, blogumuz dinamik bir veri kaynağından statik olarak oluşturulur ve ardından çok sayıda dinamik veri içeren panomuz, ancak bunları kabuk veya iskelet olarak sunabiliriz. , dağıtımlarınızı görüntüleme, projelerinizi görüntüleme, günlüklerinizi görüntüleme vb. ile ilgili tüm sayfaların tümü temelde istemci tarafı JavaScript içeren statik sayfalardır.

Guillermo: Bu bize inanılmaz derecede iyi hizmet ediyor çünkü çok hızlı bir ilk bölme performansına ihtiyacımız olan her şey önceden oluşturulmuş, SEO gerektiren her şey önceden oluşturulmuş ve son derece dinamik olan her şey, yalnızca güvenlik konusunda endişelenmemiz gerekiyor, çünkü örneğin, CLI'mizin kullandığı veya entegrasyonlarımızın kullandığı API çağrılarının aynısını kullanan istemci tarafı açısından, vb. Tamamen statik bir web sitesi, kullanımı çok ucuz, inanılmaz derecede ölçeklenebilir vb.

Guillermo: Şimdi, blogumuzda ihtiyacımız olan belirli bir şey, verileri çok hızlı bir şekilde güncellemek istedik. Bir yazım hatasını çok hızlı bir şekilde düzeltmek istedik ve tüm bir yapının gerçekleşmesini beklemedik ve bu, Next.js'nin çok önemli bir avantajıdır, yani statikten dinamiğe geçerken size bunları da çözümler arasında verir. . Blogumuz için artımlı statik oluşturma kullandık, bu nedenle temelde temel içerik değiştiğinde her seferinde bir sayfayı yeniden oluşturabiliriz.

Guillermo: Sadece birkaç yüz blog yazımız olmadığını ve müşterilerimizden biri olan Washington Post'tan bahsettiğim gibi her zaman oluşturulan ve sürekli güncellenen çok sayıda blog yazımız olduğunu hayal edin, bu durumda gitmeniz gerekiyor. özellikle içeriği her kullanıcı için özelleştirmeye başladığınızda, tam SSR'ye doğru daha fazla ilerleyin. Az önce tarif ettiğim bu karmaşıklık yolculuğu, bir pazarlama sayfamdan birkaç bin sayfalık bir blogumdan on binlerce veya milyonlarca sayfaya kadar başladı. Bu, kendi işinizle geçebileceğiniz Next.js yolculuğudur.

Guillermo: Sonra bir geliştirici olarak, belki daha az sorumluluk ile daha fazla sorumluluk arasında seçim yapmaya başlarsınız, çünkü SSR kullanmayı seçtiğinizde, artık sunucuda kod yürütüyorsunuz, bulutta kod yürütüyorsunuz, daha fazla sorumluluk var daha fazla güç. Her tür aracı nerede kullanacağınıza karar verebilmeniz, Next'in çok, çok ilginç bir faydası olduğunu düşünüyorum.

Drew: Sadece statik site oluşturma ve sunucu tarafı oluşturmayı birleştirmenin pratiklerinde, sunucu öğesi açısından bu nasıl çalışır? Bunu başarmak için Vercel gibi özel bir platforma mı ihtiyacınız var, yoksa bu daha basit ve daha basit bir şekilde yapılabilecek bir şey mi?

Guillermo: Next.js size bir geliştirme sunucusu verir, böylece Next'i indirirsiniz ve Next Dev'inizi çalıştırırsınız ve işte bu dev sunucusudur. Geliştirme sunucusu, Facebook'un yayınladığı en son hızlı yenileme teknolojisine sahip olduğu için geliştirme için açıkça inanılmaz derecede optimize edilmiştir, burada… Aslında Facebook bunu yayınlamadı, Facebook en iyi ve en performanslı ve en güvenilir sıcak modül değişimini elde etmek için dahili olarak kullanıyor , öyle ki temelde yazıyorsunuz ve değişiklikler ekrana yansıyor, yani geliştirici sunucusu bu.

Guillermo: Sonra Sonraki size Sonraki Başlangıç ​​adlı bir üretim sunucusu verir ve Sonraki Başlangıç, kendi kendine barındırma çerçevesinin tüm özelliklerine sahiptir. Vercel ile ilgili ilginç olan şey, yanına dağıttığınızda, otomatik olarak optimize edilmesi ve %100 sunucusuz olmasıdır, yani yönetim, ölçeklendirme, nakit ödeme ve nakit ödeme doğrulaması, temizleme, çoğaltma, genel yük devretme vb. ile ilgili hiçbir sorumluluk yoktur. Böylece Next Start'ı kendi başınıza çalıştırdığınızda üstlenmek zorunda kalacaksınız.

Guillermo: Bu aynı zamanda Next.js'nin en büyük avantajıdır, bu nedenle örneğin apple.com'un Next.js'de çok, çok gelişmiş ve katı güvenlik ve gizlilik ihtiyaçları nedeniyle kendi kendilerine barındırdıkları birkaç farklı özelliği, alt alanı ve dotcom sayfası vardır. . Öte yandan, washingtonpost.com Vercel'i kullanıyor, bu nedenle bu tür geniş bir kullanıcı yelpazesine sahibiz ve hepsini desteklemekten son derece mutluyuz. Bence sunucusuzun nereye gittiğiyle ilgili güzel olan şey, zaman içinde daha iyi hale gelen en optimum performans açısından size her iki dünyanın da en iyisini sunabilmesi ve "Hey, sahip değilim" gibi en iyi geliştirici deneyimiyle her türlü altyapı için endişelenmek."

Drew: Next.js, Vercel ekibi tarafından geliştirilen açık kaynaklı bir projedir. Vercel dışında başka katkıda bulunanlar var mı?

Guillermo: Evet, yani Google Chrome, sunucu PR'lerini aktif olarak gönderen ana cihazdır, optimizasyonlarda bize yardımcı olur ve bunu ortaklarla test eder, örneğin çok fazla kullanım nedeniyle halihazırda Google ekosisteminin bir parçası olan çok büyük Next.js kullanıcıları gibi ve birçok uygulama, bu nedenle iş ortakları olarak yakından ilgilenmeleri gerekir. Facebook, Facebook ekibiyle harika bir ilişki sürdürüyoruz. Örneğin, hızlı yenileme, bunu başaran ilk React çerçevesiydik ve Facebook'ta React ve hızlı yenilemeyi kullanmayı öğrendikleri her şeyde bize rehberlik ettiler.

Guillermo: Hayal e-ticaret ve içerik gibi her türden farklı kullanım senaryolarından çok geniş Next.js uygulamaları dağıtımına sahip birçok ortakla çalışıyoruz. Ardından, Next.js'yi kişisel olarak kullanan çok sayıda bağımsız katılımcı var, aynı zamanda eğitimciler ve büyük şirketlerdeki ön altyapı ekiplerinin üyeleri. Bu çok, çok geniş bir topluluk çabası.

Drew: Kulağa birinin sahip olabileceği, bunun önemli bir bölümünün Vercel tarafından geliştirildiği, belirli bir platformda konuşlandırmaya kilitlenecekleri endişesine sahip olabileceği endişesi gibi geliyor, ama kulağa hoş geliyor. durum hiç de öyle değil ve bir site geliştirip onu Firebase veya Netlify'a ya da…

Guillermo: Evet, kesinlikle. Bir bakıma Ön Uç çağının Kubernet'leri gibi karşılaştırmayı çok seviyorum, çünkü günün sonunda şuna kesin olarak inanıyorum ki… Kubernetes, Linux işlemlerini çalıştırmaları gerektiğinde hemen hemen herkesin ihtiyaç duyduğu bir şeydir. , fikir hakkında konuştuğunuz ve bunun iyi bir teknoloji olduğunu söylediğiniz gibi, çok fazla fikir sahibi değil, ama biraz unuttuğumuz bazı fikirler var. Günün sonunda, konteynerler olarak paketlenmiş belirli bir Linux programı iblisini çalıştırmaktan büyüdü.

Guillermo: Next de benzer bir konumda, çünkü bir React bileşeni olarak dünyanın evrensel ilkel öğesi olarak kabul ettiğimiz şey, açıkçası inatçı, ancak pek çok kuruluş için, tıpkı hepsinin Linux'a yöneldiği gibi, biz de öyle düşünüyoruz. Aynı şeyi React ve Vue için de görüyorlar, ama neyse ki Vue'da Nuxt da var ki bu çok harika bir çözüm, fikir ve prensip olarak Next ile eşdeğer. Next.js, Nuxt gibi, Svelte ekosistemi için Sapper gibi bu platformlara yöneliyoruz.

Guillermo: Bence bunlar açık platformlar olmalı, çünkü yine, herkesin buna ihtiyacı olacaksa, tüm endüstride tekerleği yeniden icat etmeyebilir, değil mi? Bu konumu çok memnuniyetle karşılıyoruz, insanları onu konuşlandırmaya ve yeniden yapılandırmaya ve yeniden inşa etmeye ve yeniden dağıtmaya davet ediyoruz.

Drew: Yakın zamanda Next.js'nin yeni bir sürümü yayınlandı, sanırım sürüm 9.5. Bu sürümde ne gibi önemli değişiklikler oldu?

Guillermo: En harikası, daha önce de söylediğim gibi, birçok şey statik başlar ve işler büyüdükçe daha dinamik hale gelir. Bu arada, WordPress için girişim buydu. WordPress başlangıçta statik bir dosya veritabanı yaklaşımına dayanıyordu ve daha sonra bir veritabanına ihtiyaç duymaya başladı, tıpkı PHP'nin nasıl geliştiğini ve daha fazla MySQL'e nasıl dönüştüğünü anlattığınız gibi. Next.js 9.5'in güzel yanı, artımlı statik üretimi üretime hazır bir özellik haline getirmesi, bu yüzden onu kararsız bayraktan çıkardık.

Guillermo: Bu özellik, statikten dinamiğe tüm statik avantajlardan vazgeçmeden ve sunucu tarafından oluşturulan dinamik için sonuna kadar gitmek zorunda kalmadan bu yolculuğu yapmanızı sağlar, böylece statik türünüzün faydalı ömrünü uzatır. Örneğin, Vercel'de kullanma şeklimiz, bahsettiğim gibi, blogumuz oluşturma zamanında tamamen önceden oluşturulmuş gibi, ancak örneğin, aslında birkaç dakika içinde büyük bir duyuru yapmak üzereyiz ve ne zaman onun hakkında blog yazıyoruz, bir blog gönderisinin bir harfini her değiştirdiğimizde beş ila 10 dakikalık bir derleme yayınlamak zorunda kalmadan ince ayar yapabilmek, düzeltebilmek, önizleyebilmek vb.

Guillermo: Artımlı statik oluşturma ile her seferinde bir sayfayı yeniden oluşturabilirsiniz. Sitenizin büyüklüğüne bağlı olarak dakikalar hatta saniyeler sürebilen şeyler artık milisaniyeler alıyor. Yine, statikin hiçbir avantajından vazgeçmek zorunda kalmadınız. Belki de Next.js 9.5'te istikrarlı hale gelmesi konusunda en çok heyecanlandığım şey budur ve özellikle JS topluluğu ve React topluluğu ve çerçeve topluluğu ve statik site tarafından oluşturulan topluluk, bu tek boynuzlu at için statik bir artımlı yapma hakkında konuşuyorlar. 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: Bu büyüleyici. 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. Ayrılık sözleriniz var mı?

Guillermo: No, thank you for having me.