Sunucu tarafında oluşturma işlemi yapmıyor ancak yine de React sitenizin performansını hızlandırmak mı istiyorsunuz? Önceden oluşturmayı deneyin.
react-snap
, sitenizdeki sayfaları statik HTML dosyalarına önceden işleyen üçüncü taraf bir kitaplıktır. Bu, uygulamanızdaki İlk Boyama sürelerini iyileştirebilir.
Aşağıda, aynı uygulamanın simüle edilmiş bir 3G bağlantısı ve mobil cihaza önceden yüklenerek ve önceden oluşturulmadan yapılan karşılaştırması verilmiştir:
![Yan yana yükleme karşılaştırması. Önceden oluşturma kullanan sürüm 4,2 saniye daha hızlı yüklenir.](https://web.developers.google.cn/static/articles/prerender-with-react-snap/image/a-side-side-loading-comp-38a189328548.gif?authuser=5&hl=tr)
Neden yararlı?
Tek sayfalık büyük uygulamalarla ilgili temel 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 sürer.
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/yönlendirme geçişinde, HTML'nin tamamı sunucuda oluşturulur ve tarayıcıya gönderilir. Bu da İlk Boyama sürelerini kısaltır ancak İlk Bayt'a ulaşma süresinden daha yavaş bir maliyet getirir.
Önceden işleme, sunucu oluşturmadan daha az karmaşık olan ayrı bir tekniktir. Bununla birlikte, uygulamanızdaki İlk Boyama sürelerini iyileştirecek bir yöntem de sunar. Gözetimsiz 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. Daha sonra bu dosyalar, uygulama için gerekli olan JavaScript paketleriyle birlikte gönderilebilir.
tepki ekleme
react-snap
, uygulamanızda farklı rotalara ait önceden oluşturulmuş HTML dosyaları oluşturmak için Puppeteer'ı kullanır. Başlamak için uygulamayı bir geliştirme bağımlılığı olarak yükleyin:
npm install --save-dev react-snap
Ardından, package.json
dosyanıza bir postbuild
komut dosyası ekleyin:
"scripts": {
//...
"postbuild": "react-snap"
}
Bu işlem, uygulamaların yeni bir derlemesi oluşturulan (npm build
) her seferinde react-snap
komutunu otomatik olarak çalıştırır.
Yapmanız gereken son şey, uygulamanın başlatılma biçimini değiştirmektir.
src/index.js
dosyasını şu ş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'de 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üğümlerin mevcut olup olmadığını kontrol eder. Bu durumda, önceden oluşturulmuş HTML'yi yeniden oluşturmak yerine etkinlik işleyicileri eklemek için ReactDOM.hydrate
kullanılır.
Uygulamayı derlemek, 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ı içindeki Önizlemeler sekmesini tıklayarak HTML yükünün nasıl olduğuna bakabilirsiniz.
Stilsiz içerik Flash
Statik HTML, artık neredeyse anında oluşturulsa da varsayılan olarak biçimlendirilmemiş halde kalır. Bu durum, "stilsiz içerik flash" (FOUC) gösterilmesine neden olabilir. Bu durum, özellikle seçiciler oluşturmak için bir CSS-in-JS kitaplığı kullanıyorsanız herhangi bir stil uygulanmadan önce JavaScript paketinin yürütme işlemini tamamlaması gerekeceğinden, oldukça fark edilebilir.
Bunun önlenmesine yardımcı olmak için kritik CSS veya ilk sayfanın oluşturulması için gereken minimum CSS miktarı doğrudan HTML dokümanının <head>
öğesine satır içi yapılabilir. react-snap
, farklı rotalar için kritik CSS'leri ayıklamak amacıyla minimalcss
altında başka bir üçüncü taraf kitaplığı kullanır. Bu özelliği, 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, kritik CSS'nin satır içinde yer aldığı stil sayfasını görürsünüz.
Sonuç
Uygulamanızda sunucu tarafı oluşturma rotaları kullanmıyorsanız kullanıcılarınıza önceden statik HTML 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.
- Siteniz için uygunsa kritik CSS'leri satır içi yapmak için 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 önceden yükleme durumu oluşturmamaya dikkat edin.
react-snap
BENİOKU bu konuyu daha ayrıntılı olarak ele alır.