Fatih Acet

Fatih Acet

Co-f & CTO at Superpeer

twittergitlabgithubenvelope-olinkedinyoutubeinstagramAbone Ol!

Cloudflare Workers Serverless Rendering

  • Tweet by @fatihacet on [[February 16th, 2021]]:

  • 🧵 Serverless ortamda SSR ve Prerendering’e bir cozum ararken, gorece yeni bir yaklasim olarak Serverless Rendering yaptik. Teknoloji olarak cok kafa acan ve bir cok ekstra olanak saglayan bu cozum hakkinda bir thread.

  • 🤙 @superpeer bildiginiz uzere VueJS ile gelistirdigimiz ve serverless bir mimariyle yonettigimiz ve SEO tarafi cok kritik olan bir urun. En baslarda Firebase Hosting kullaniyorduk fakat prerendering destegi vermedigi icin Netlify’a tasindik.

  • 🙄 Netlify varsayilan olarak prerendering yapiyor. Sanki kendi server’inizda Nginx’le prerendering yapiyormus gibi calisiyor. Bir noktaya kadar isimizi gordu ama prerendering ayarlarina ve cache’lerine mudahale etmenize izin vermiyor. Netlify’i da hic sevmem, nedenine deginiriz :)

  • 💁 Peki neden SSR yapmadik? Sirf bu sorunu cozmek icin Nuxt gibi bir yapiya gecmek ve onca refactor yapmak bana hic akil kari gelmiyordu, hala da gelmiyor. Ayrica bu paradigma degisimini ekipteki 20+ developer’a da anlatmamiz ve ogretmemiz gerekiyor.

  • 😍 Alternatiflere bakarken 3 ay oncesinde Cloudflare Workers denemistim ve alete direk asik oldum. POC’yi yapip kenara koymustum ama baska islerin yogunlugundan bitirememistim. Serverless Rendering with Cloudflare Workers

  • 😱 Cloudflare Workers’in yaptigi is tarayicidan gelen istege index.html’i donmeden once araya girip icerigi degistirmenize ya da baska bir icerik donmenize izin veren, Service Worker’lara benzeyen bir alet.

  • 🚀 Cloudflare Workers bu islemleri network edge’de daha request’e cevap donmeden yapip, KV isminde bir in-memory-cache’i kullanmamiza izin verdigi icin asiri hizli calisiyor. Ayrica Cloudflare kullaniyorsunuz, dunyanin her yerinde CDN’leri olan bir infra, mis gibi 🤩

  • 🥰 Bu cozum prerendering gibi eger gelen kisi search bot’sa bu icerigi don, degilse index.html’i don sekilde “hacky” de degil. Ayrica tek olayi da bu degil. A/B test, URL rewrite, redirect, header degistirme, country check gibi tonla seye izin veriyor. Examples · Cloudflare Workers docs

  • 💪 Dun gece @akngundogdu @moersoy ve @abdullahmara00’yla oturup oncesinde yaptigim POC’yi production ready hale getirdik ve sanirim 2 hafta icinde yayina aliriz. Netlify’dan ciktigimiz icin de ayrica sevincliyim 🙌

  • ⚡️ Teknik olarak, once oturup bizim Cloud Run uzerine bir tane endpoint yazdik. Yaptigi tek is, verdigimiz URL’e ait meta tag’leri rewrite etmek icin bir kac key/value data ve sayfanin icine koymak icin statik bir HTML donmek.

  • 🤘 Sonrasinda cok kolay ve hizli bir sekilde yeni bir Cloudflare Worker projesi ayaga kaldirdik ve Cloudflare Worker Sites ile deploy ettik. Bunu yaptigimizda bize ait bir domain’de Superpeer Staging ortamini preview edebilir olduk ama hala serverless rendering kismina gelmedik.

  • ✌️ Cloudflare Worker size worker.js isminde bir JS file ve bazi rewrite API’lari veriyor. Bu worker kodu icerisinde once bizim Cloud Run’a istek yapip JSON data aldiktan sonra bunu index.html ekleyip ve bir kac rewrite isleminden sonra client’a donduk. Her sey cok da guzel oldu.

  • 😒 Tabi ki bu kadar kolay ve hizli olmadi. Dun en az 6 saat bunun uzerinde calistik. Rewrite kismi gereginden fazla zorladi. SSL handshake’le baya ugrastik. Dokumantasyon iyi ama daha cok ornek super olurdu. Debug etmesi de o kadar kolay degildi ama gunun sonunda ❤️

  • 🙌 En cok hosuma giden seyse Netlify’dan cikip dogru duzgun cache ve invalidation yapacak Cloudflare’e gecis yapmis olmak ve bunu hic bir developer’in workflow’unu degistirmeden arka tarafta arastirma kismi haric 1 gunde yapabilmis olmak. Nuxt ile en az 2 hafta gerekirdi.

Comments

Bolum 4: Hollanda kamp yeri gezelim! (Camping de Ruimte)

Merhaba arkadaslar Hollanda'da kaldigimiz kamp yerini gezip gostermek istedim sizlere. Gorusmek uzere.

Bolum 3: Karavan turu (Adria Altea 552PK ic mekan)

Merhaba arkadaslar Bu videoda karavanimizin icini ve disina taktigimiz cadiri anlattim. Umarim begenirsiniz. Gorusmek uzere!

Bolum 2: Karavan yerine yerlesiyoruz

Merhaba arkadaslar, Hollanda kamp yeri acisindan cok secenege sahip olan bir ulke ama bu sene buradaki 4. kamp yerimiz olan Camping de Ruimte'ye geldik ...

Bolum 1: Yeni Karavanimizi Teslim Aliyoruz

Merhaba arkadaslar, Gecen sene sahip oldugumuz Caravelair Antares 400 karavani satip Adria Altea 552PK karavan aldik. Onceki karavanimiz 590cm'yken ...

My Afternoon Coffee Routine (with Rocket Appartamento & Eureka Specialita)

Merhabalar Is guc yogunlugundan kanala icerik gonderemiyorum, bildiginiz uzere Superpeer asiri yogun Bazi gunler gercekten YouTube'a video ...

Superpeer'in kuruluş hikayesi

Superpeer'i kuralı neredeyse 1 yıl oldu. Bu süreçte iki yatırım aldık ve büyük bir ekip haline geldik. Aşağıdaki sorular çeşitli mecralardan sürekli soruluyor ve ben ...

Superpeer'in Serverless Yapisi, Cloud Functions/Cloud Run ve GCP/AWS karsilastirmasi

Merhabalar Superpeer, 2020 yilininda basinda kurdugum ve Subat ayinda 2.8 milyon dolar yatirim alan yeni girisimim. Superpeer'i Google Cloud Platform ...

Superpeer Test LiveStream

JavaScript Egitimi #03: Statements

03:40 If statement 05:40 For statement 14:54 While statement 19:37 Do while statement 23:11 Object 26:55 Array 45:08 forEach 50:50 for in.

JavaScript Egitimi #02

Frontend Calisma Grubuyla beraber JavaScript egitim serisine basladik. Serinin devami gelmeye devam edecek. Bu videodaki sesle ilgili problem icin kusura ...

JavaScript Egitimi #01: JavaScript'e Giris

Frontend Calisma Grubuyla beraber JavaScript egitim serisine basladik. Bu ilk videoda JS'e giris yaptik ve yaptigimiz oturumu kayit altina aldik. Serinin devami ...

Acet Yollarda EP01: Gokay Gurcan

Selamlar Bu videoda Almere'den Amsterdam'a giderken Gokay Gurcan'la arabada yaptigimiz muhabbeti kaydettik. Spontane gerceklestirdimiz bu kayit bence ...

Hollanda'ya taşınmak, ev bulmak ve yaşam | Yurtdışında Yaşam Medium

Merhabalar arkadaslar Bu videoda Didem'le beraber Melissa Gurcan'in Yurtdisinda Yasam Medium'u icin Hollanda'da is bulmak, vize surecleri, ev kiralamak, ...

VLOG:🌷Keukenhof - Hollanda Lale Bahcesi

Merhaba arkadaslar Keukenhof Hollanda'nin Lisse sehrinde bulunan ve Mart ayinda acilip Mayis ayinda kapanan cok ozel bir lale bahcesi. Bu sene ilk defa ...

Vue Router: Alias ve Nested Route ornegi

Selam arkadaslar kodilan.com icin kodilan.com/ilan-ara?type=3 seklinde gozuken URL'leri kodilan.com/ilan-ara/stajyer seklinde de calismasi icin gereken ...

Google Tag Manager nasil kullanilir?

Bu videoda Google Tag Manager ile sayfada olan olaylarin nasil track edilecegini anlattim. Google Analytics uzerine eklenen Google Tag Manager sayesinde ...

Proje Kod İncelemesi: kodilan.com | Vue, Vuex, Vue Router

Selamlar arkadaslar Uzun bir aradan sonra yeni bir video ile tekrar YouTube'a donus yapmak istedim. Bu arada halimi hatrimi soran, neden sessiz kaldigimi ...

Tatil 2018 Drone Footage

Kas ve Kalkan'da yaptigimiz 2018 tatilimizin drone videosu. Drone: DJI Spark.

Hangi üniversite ve bölümü tercih etmeyeliyim?

Email bultenine abone olmak icin http://bit.ly/acet-subs Üniversite sınav sonuçları yakında açıklanıyor, tercih dönemi yaklaştı. Bilgem Çakır, Selman Kahya ve ...

Faydalı İpuçları #4: Mac OS Pencere Yönetimi | Better Touch Tool

Email bultenine abone olmak icin http://bit.ly/acet-subs Merhaba arkadaşlar Bu videoda Better Touch Tool kullanarak Mac OS pencere yönetimini ...

Sunum: GitLab ve GitLab Frontend'i

Email bultenine abone olmak icin http://bit.ly/acet-subs Herkese merhaba arkadaslar Software Craftsmanship Turkey'de yaptigim GitLab ve GitLab ...

Vue JS SPA'lari deploy etmek: GitLab CI DigitalOcean ve Surge.sh

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda daha onceden olusturdugumuz bir Vue SPA'i GitLab CI kullanarak DigitalOcean'daki bir ...

Faydalı İpuçları #3: VueJS .native event modifier nedir?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selam arkadaşlar Bu videoda, kullandığımız bir child component'in DOM element'ine ait bir event'i ...

Bolum 3: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Ilk iki bolumunu beraber gelistirdigimiz Chrome eklentisine bu bolumde de devam edecegiz.

Bolum 2: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Birinci bolumune asagidaki linkten ulasabileceginiz GitLab Chrome extension'i yapmaya ...

Bolum 1: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Aniden bir canli yayina basladim fakat aklimda olan bir fikri bos vaktim varken kodlamak ...

Biraz sohbet edip AmsterdamJS Tshirt Çekilişi yapalım

Email bultenine abone olmak icin http://bit.ly/acet-subs Oncelikle biraz sohbet edip, bir kac soru cevap yaptiktan sonra AmsterdamJS'den size ozel getirdigim ...

VLOG #06: AmsterdamJS'e gidiyorum

AmsterdamJS etkinliginde VueJS Best Practices konulu bir konusma yapacagim. AmsterdamJS Vlog serisinin ilk videosunda Istanbul'dan Amsterdam'da ...

Benden haberler ve Refactor vs Rewrite konusu

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda en cok merak edilen konulardan biri olan Refactor ve Rewrite konusunu ele aldim.

Yazilimcilar Tasarim Bilmeli mi?

Hakan Ertan Yazilimcilar Tasarim Bilmeli mi? video serisinin 2. videosunda benim de yer almami istedi ve ayni soruyu cevaplamam icin mikrofunu bana uzatti.

Gunluk Latte’mi beraber yapalim

Her gun kahvaltidan sonra yaptigim kahvemi ufak bir video yapmak istedim. iPhone'daki iMovie'yle editledim ve oldukca kullanisli bir app olmus :)

Vuex #03/03: Vuex olmadan nasil yapariz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Vuex mini serisinin son videosunda bir uygulamayi Vuex kullanmadan nasil gelistirebiliriz hakkinda bir ...

VLOG #05: Yerinde Inceleme: Amsterdam'a yaz gelmis mi?

Amsterdam'da havalarin duzeldigini ve yaz geldigini soyluyorlardi. Dun Amsterdam'a donduk ve bugun yerinde inceledik. Sonuc: daha tam gelmemis ama niyeti ...

Vuex #02/03: 15 Dakikada Vuex konseptleri

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda 15 dk icinde size Vuex konseptlerini kolay bir ornekle anlatmaya calistim. Bir onceki videoda ...

GitLab Workflow: VSCode extension for GitLab

This is a product demo of the VSCode extension I built for GitLab. Below you can find related links. Repository: ...

VUEX #01/03: Nedir? Neden kullaniyoruz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar arkadaslar Bu video ile kanaldaki teknik videolara donus yaptim. Kanalimda daha once Vuex ...

Drone nasil ucurulmaz? DJI Spark Crash

Bugun Rembrandt Park'da talihsiz bir drone kazasi yasadim. 19mt yukseklikte ve yaklasik 40mt ilerimdeydi drone ve bu yukseklikten agaci gecer diye ...

Bilgem Cakir ile Canli Yayindayiz

Bilgem Cakir'la yazilim ve oyun gelistirme uzerine guzel bir sohbet yapacagiz. Canli yayin suresince Bilgem Cakir'a sorularinizi sorabilirsiniz.

NYC'den Fatih Arslan ve SF'dan Cihangir Savas'la beraberiz

Bundan yaklasik 2 ay once Fatih Arslan ve Cihangir Savas'la beraber bir yayin yapma fikrini konusuyorduk. Ortak takvim ayarlamanin zorlugundan dolayi 2 ay ...

VLOG #02: Amsterdam'da ev aradigim ikinci gun

16 Kasim 2017'de Amsterdam'a tasiniyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim. Amsterdam'daki ilk gunumu VLOG haline ...