Tepki tutturma özellikli rotaları önceden oluşturma

Sunucu tarafı oluşturma kullanmıyorsanız ancak React sitenizin performansını hızlandırmak istiyorsanız ne yapmalısınız? Önceden oluşturmayı deneyin.

Houssein Djirdeh

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.

Burada, simüle edilmiş bir 3G bağlantısına ve mobil cihaza önceden oluşturulmuş içerik yüklenerek ve yüklenmeden aynı uygulamanın karşılaştırması gösterilmektedir:

Yan yana yükleme karşılaştırması. Önceden oluşturma işleminin kullanıldığı sürüm 4,2 saniye daha hızlı yüklenir.

Bu neden yararlı?

Tek sayfalık büyük uygulamalardaki temel performans sorunu, kullanıcının gerçek bir içerik görebilmesi için siteyi oluşturan JavaScript paketlerinin indirilmesinin tamamlanmasını beklemesi gerekmesidir. Paketler ne kadar büyük olursa kullanıcının beklemesi de o kadar uzun sürer.

Birçok geliştirici, bu sorunu çözmek için uygulamayı yalnızca tarayıcıda başlatmak yerine sunucuda oluşturma yaklaşımını benimser. Her sayfa/rota geçişinde HTML'nin tamamı sunucuda oluşturulur ve tarayıcıya gönderilir. Bu, ilk boyama sürelerini kısaltsa da ilk bayta geçiş süresini yavaşlatır.

Önceden oluşturma, sunucu oluşturmadan daha az karmaşık olan ancak uygulamanızda ilk boyama sürelerini iyileştirmenin bir yolunu da sunan ayrı bir tekniktir. Derleme sırasında her rotanın statik HTML dosyalarını oluşturmak için gözetimsiz tarayıcı veya kullanıcı arayüzü olmayan bir tarayıcı kullanılır. Daha sonra bu dosyalar, uygulama için gerekli olan JavaScript paketleriyle birlikte gönderilebilir.

react-snap

react-snap, uygulamanızdaki farklı rotaların önceden oluşturulmuş HTML dosyalarını oluşturmak için Puppeteer'ı kullanır. Başlamak için 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 şekilde, uygulamalar için her yeni derleme oluşturulduğunda (npm build) react-snap komutu otomatik olarak çalıştırılır.

Yapmanız gereken son şey, uygulamanın başlatılma biçimini değiştirmektir. 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 bu yöntem, HTML içeriklerinin önceden oluşturulup oluşturulmadığını (veya sunucuda oluşturulup oluşturulmadığını) belirlemek için herhangi bir alt düğümün mevcut olup olmadığını kontrol eder. Bu durumda, yeni bir HTML oluşturmak yerine, etkinlik dinleyicilerini zaten oluşturulmuş HTML'ye eklemek için ReactDOM.hydrate kullanılır.

Uygulamayı derlemeniz artık 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.

Öncesi ve sonrası karşılaştırması. Sonraki karede, içeriğin oluşturulduğu gösterilir.

Stillendirilmemiş içeriğin yanıp sönmesi

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 herhangi bir stil uygulanmadan önce JavaScript paketinin yürütülmesinin tamamlanması gerektiğinden, seçici oluşturmak için JS'de CSS kitaplığı kullanıyorsanız 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 belgesinin <head> öğesine satır içi yapılabilir. react-snap, farklı yollar için kritik CSS'leri ayıklamak amacıyla arka planda başka bir üçüncü taraf kitaplığı (minimalcss) 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 artık önemli CSS'nin satır içi olarak yerleştirildiği biçimlendirilmiş sayfayı görürsünüz.

Öncesi ve sonrası karşılaştırması. Sonraki karede, kritik CSS&#39;nin satır içi olarak yerleştirilmesi nedeniyle içeriğin oluşturulduğu ve biçimlendirildiği görülüyor.

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.

  1. Geliştirme bağımlılığı olarak yükleyin ve yalnızca varsayılan ayarlarla başlayın.
  2. Siteniz için uygunsa kritik CSS'yi satır içi yapmak üzere deneysel inlineCss seçeneğini kullanın.
  3. 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. Bu konu, react-snap README bölümünde daha ayrıntılı olarak ele alınmıştır.