Photo by Pablo Heimplatz on Unsplash

Remix artık karşımız React Router olarak çıkacak.

Remix → React Router 7

Geçen React Conf 2024 Ryan Florance’ın Vanilla React sunumunda Remix’in önümüzdeki günlerde React Router kütüphanesi içerisinden devam edeceğini açıkladı.

Frontend Development With JS
4 min readJun 23, 2024

--

React yakın zamanda Create React App sonlandırmış baştan react projesi oluşturmak yerine , framework kullanımına yönlendirmişti. (Next, Remix, Expo, Gatsby vb.) eğer bunları kullanmıyorsanız bunun yerine bu başlangıç projesini Vite ve Parcel ile oluşturabileceğinizi söylüyor.

Bu süre içerisinde React Router ekibinin yeni bir framework çıkarması (Remix) bunun daha sonradan Shopify tarafından satın alınmasını gördük.

React Conf 2024

Sonunda bahsedeceğim konuya başta konuşayım. Remix piyasada Next.JS indirilme ve kullanılma sayılarına erişemedi.

https://2023.stateofjs.com/en-US/libraries/meta-frameworks/

Burada Next.JS, Remix ve diğer MetaFramework’ lere baskın bir şekilde hakimiyet kurduğunu görebilirsiniz. Next.js biliyorsunuz ki React Core team transferlerinden sonra oturup Next Router baştan yazdılar.

Bunun yanında Next.js ne kadar popülerliğini sürdürse’de SPA(Single Page App) alanında CRA(Create React App) yerini Vite.JS almış durumda.

https://2023.stateofjs.com/en-US/libraries/build_tools/

Burada zaten güçlü olan 2 kısmı birleştirip bunun ile Remix oluşturmayı düşünüyorlar

fakat burada Remix’in istenilen seviyede canlıdaki projelerde kullanılmaması ve bunun aksine React Router çok popüler ve canlı projelerde kullanılıyor olması yönlerini → React Router çevirdi. Ve artık karşımızda Remix olmayacak, Remix’in özellikleri React Routr 7 versiyonu içerisinde gelecek.

Konunun detaylarını bu blog yazısında Merging Remix and React Router bulabilirsiniz.

Burada React Router7 ile birlikte gelmesi planlanan özellikler.

  • Automatic code splitting
  • Simplified data loading
  • Form Actions, Server actions
  • Simplified pending states
  • Optimistic UI
  • Server rendering
  • Static pre-rendering
  • RSC (soon)

Bu anlamda Vite.js , React, React-Router, React-Query ve Zustand teknoloji stack kullanan birisi olarak React Router bu altyapıyla gelecek olması beni çok mutlu etti diyebilirim. Server özelliklerinide kendi stack yapımda deneyebileceğim.

Demo’da etkileyici olan, Zaten mevcut’ da çalışan React uygulamalarının Vite plugini ve ileride Remix’den React Router içerisine taşınacak özellikler ile birlikte Server Rendering, Static Pre-Rendering ve RSC destekleyebilecek olması.

Bunu nasıl yapacak öncelikle Routing işlemini Vite plugini içerisinden tanımlamanızı yapabilmenizi sağlayacak. Vite plugininde bulunan bir flag ile bu işlemin ssr mi yoksa client-side mi çalışacağını belirtebiliyorsunuz.

İkinci önemli konu veri katmanına erişim, Remix içerisinde gelen bir takım özellikler Loader, benzeri ClientLoader async fonksiyonu sağlıyor, bu fonksiyon Routing işlemlerinde component mount edilmeden transition sırasında çağrılıyor olacak.

3ncü olarak ClientLoader → Loader ve Vite Plugininde flag ssr yaparak Server Render yapabiliyoruz. Veya pre-render flag ekleyip bunun static bir html çıktısını oluşturabiliyoruz.

Veya Component içerisindeki JSX kısmını , Loader içerisine taşıyarak bu işlemin RSC ile gerçekleşeceğini belirtiyor.

Özetle farklı farklı rendering türlerini aynı kod içerisinde ufak oynamalar ile değiştirebiliyor.

Bu yaklaşım bana DX(Developer Experience) olarak oldukça hoşuma gitti. Fakat halen RSC (gibi) yapıların hayali Relay veya Apollo GraphQL gibi middleware veri katman yapısının yerine geçmek ama Tanner Linsley ‘den anladığım RSC olsa bile sunucu tarafında bu komplike veri katmanını yönetmek için araçlara ihtiyaç duyacağınız konusu, Evan You göre deployment aşamasında yaşanabilecek sorunlar var.

Her neyse Ryan demosu oldukça etkileyici, React Router 7 ile birlikte birçok yeni özellik bizi bekliyor olacak, sanırsam Remix’de sonrasında ortadan kalkacak.

Burada Remix import’larını React Router’dan alacak şekle getirerek Remix geliştiricilerinin çok az zarar görerek yeni yapıya geçmelerini sağlayacaklar.

Yani React Router ve Remix → V7 ile birleşiyor.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--