Oluşturma işlemi sunucu tarafında yapmıyor ancak React sitenizin performansını yine de hızlandırmak mı istiyorsunuz? Önceden oluşturmayı deneyin.
react-snap
, sitenizdeki sayfaları statik HTML dosyaları halinde önceden oluşturan bir üçüncü taraf kitaplığıdır. Bu, uygulamanızdaki İlk Boyama sürelerini iyileştirebilir.
Burada, aynı uygulamanın 3G simülasyonu ve mobil cihaza önceden oluşturma özelliği yüklenmiş olup olmadığıyla ilgili bir karşılaştırması verilmiştir:
Neden faydalı oldu?
Büyük boyutlu tek sayfalık uygulamalardaki ana performans sorunu, kullanıcının gerçek içeriği görebilmek için siteyi oluşturan JavaScript paketlerinin indirme işleminin tamamlanmasını beklemesinin gerekmesidir. Paketler ne kadar büyük olursa kullanıcının beklemesi de o kadar uzun olur.
Bu sorunu çözmek için birçok geliştirici, uygulamayı yalnızca tarayıcıda başlatmak yerine sunucuda oluşturma yaklaşımını benimser. Her sayfa/rota geçişinde, sunucuda tam HTML oluşturulur ve tarayıcıya gönderilir. Bu, İlk Boyama sürelerini kısaltır ancak İlk Bayt'a geçiş süresini yavaşlatır.
Önceden oluşturma, sunucu oluşturma işleminden daha az karmaşık olan ayrı bir tekniktir ancak uygulamanızda İlk Boyama sürelerini iyileştirme yöntemi sunar. Gözetimsiz tarayıcı veya kullanıcı arayüzü olmayan tarayıcı, derleme süresi sırasında her rotanın statik HTML dosyalarını oluşturmak için kullanılır. Bu dosyalar, daha sonra uygulama için gerekli olan JavaScript paketleri ile birlikte gönderilebilir.
tepki yakalama
react-snap
, uygulamanızdaki farklı rotaların önceden oluşturulmuş HTML dosyalarını oluşturmak için Puppeteer aracını kullanır. Başlamak için bunu bir geliştirme bağımlılığı olarak yükleyin:
npm install --save-dev react-snap
Daha sonra, package.json
dosyanıza postbuild
komut dosyası ekleyin:
"scripts": {
//...
"postbuild": "react-snap"
}
Bu komut, uygulamalarda yeni bir derleme yapıldığında (npm build
) react-snap
komutunu otomatik olarak çalıştırır.
Son olarak uygulamanın başlatılma şeklini değiştirmeniz gerekir.
src/index.js
dosyasını aşağıdaki şekilde değiştirin:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<App />, rootElement);
} else {
ReactDOM.render(<App />, rootElement);
}
Kök React öğesini doğrudan DOM'da oluşturmak için yalnızca ReactDOM.render
kullanmak yerine, HTML içeriklerinin önceden oluşturulup oluşturulmadığını (veya sunucuda oluşturulup oluşturulmadığını) belirlemek için alt düğüm olup olmadığını kontrol eder. Bu durumda, etkinlik işleyicileri yeni oluşturmak yerine önceden oluşturulmuş HTML'ye eklemek için ReactDOM.hydrate
kullanılır.
Uygulamanın oluşturulması, taranan her rota için yük olarak statik HTML dosyaları oluşturur. HTML isteğinin URL'sini ve ardından Chrome Geliştirici Araçları'nda Önizlemeler sekmesini tıklayarak HTML yükünün neye benzediğini inceleyebilirsiniz.
Stilsiz içerik Flash'ı
Statik HTML artık neredeyse anında oluşturulsa da varsayılan olarak stillendirilmemiş durumda kalır, bu da "biçimlendirilmemiş içeriğin yanıp sönmesi" (FOUC) sorununa neden olabilir. Bu, seçiciler oluşturmak için bir CSS-in-JS kitaplığı kullanıyorsanız özellikle fark edilebilirdir çünkü herhangi bir stilin uygulanabilmesi için JavaScript paketinin yürütme işlemini bitirmesi gerekir.
Bunun önlenmesine yardımcı olmak amacıyla kritik CSS veya ilk sayfanın oluşturulması için gereken minimum CSS miktarı, doğrudan HTML dokümanının <head>
satırına satır içi olarak getirilebilir. react-snap
, farklı rotalar için kritik CSS'leri ayıklamak amacıyla arka planda başka bir üçüncü taraf kitaplığı (minimalcss
) kullanır. Bunu package.json
dosyanızda aşağıdakileri belirterek etkinleştirebilirsiniz:
"reactSnap": {
"inlineCss": true
}
Chrome Geliştirici Araçları'ndaki yanıt önizlemesine baktığınızda artık önemli CSS'nin satır içine alındığı stil sayfası gösterilecek.
Sonuç
Uygulamanızda sunucu tarafı oluşturma rotaları değilseniz statik HTML'yi kullanıcılarınıza önceden oluşturmak için react-snap
kullanın.
- Bunu bir geliştirme bağımlılığı olarak yükleyin ve yalnızca varsayılan ayarlarla başlayın.
- Sitenizde çalışıyorsa kritik CSS'yi satır içine almak üzere deneysel
inlineCss
seçeneğini kullanın. - Herhangi bir rota içinde bileşen düzeyinde kod bölme kullanıyorsanız kullanıcılarınıza yükleme durumunu önceden oluşturmamaya dikkat edin.
react-snap
BENİOKU, bu konuyu daha ayrıntılı bir şekilde ele alır.