Neden Remix.js ?

Herkese Merhabalar, ilk Medium yazım ile karşınızdayım. Bu makalemde anlatacağım konu, son zamanlarda çok fazla kullanılan Remix.js detaylarına bakalım, nedir ve nasıl kullanılır konularına değinmeye çalışacağım. Umarım sizin içinde faydalı olur.

Remix Nedir?

İlk olarak Remix nedir, bunu anlatmaya çalışacağım. Kendi ifadeleri ile açıklamak gerekirse remix “Web temellerine ve modern UI ve UX’e odaklanarak, daha hızlı ve esnek siteleri oluşturmak için kullanılan bir React Framework’üdür.”

Remix Nasıl Kurulur?

İlk olarak aşağıdaki komutu kopyalayın ve ilgili klasörünüzde açtığınız terminal ekranına yapıştırın.

npx create-remix@latest

Bu işlemin ardından, projemize vereceğimiz ismi ayarlıyoruz. Daha sonra deploy edeceğimiz yeri seçiyoruz(Kişisel tavsiyem Vercel).

Deploy Edebileceğimiz Servisler

Ardından gelen seçenekte, “Typescript” mi, “Javascript” mi seçiyoruz. Ardından npm install komutunu çalıştırmak için “Yes” diyoruz ve kurulumun tamamlanmasını bekliyoruz. Ardından projemizin başarıyla kurulup kurulmadığını anlamak ve projemizi çalıştırmak için aşağıdaki komut ile projemizi başlatabiliriz.

cd projeIsmi && npm run dev

Bu komut sonrası http://localhost:3000 adresine gidip sayfamızı kontrol edebiliriz.

Remix Neden Kullanılır?

Remix’in Avantajlarını anlatacak olursak;
-Server Side Rendering yöntemini esas almıştır. Bu yöntemden basitçe bahsetmem gerekirse(detay için tıklayabilirsiniz) web projemizde belirli bir endpoint’e istek attığımız sayfalarımıza, ilgili sayfayı ziyaret etmeden önce bizim yerimize istek atarak, ilgili sayfaların render edilmesi ve bu sayede istek yaptığımız sayfalarda, tıpkı statik bir sayfaymış gibi bir hızla açılmasını sağlamakta.
-Oluşturduğumuz projemizi, kolay bir şekilde vercel, netlify, vb. gibi ortamlara deploy edebiliriz.
-Bir başka avantajımız ise: Dinamik rotalar. Dinamik rotalar için klasör yapımızı oluşturup, $ulasacağımızUriDegeri isimli bir dosya oluşturarak uri değerimize erişebiliriz.

app
├── routes
│   └── index.tsx
└── posts
    └── $postSlug.tsx
public

Dinamik Rotamıza Erişeceğimiz “$postSlug” dosyamız.

Bonus: Bir sonraki yazımda Remix.js ile yeni başlayanlar için bir proje oluşturup anlatmayı deneyeceğim. İlk makalemde ilgi gösterdiğiniz için teşekkür ederim.