Tepki tutturma özellikli rotaları önceden oluşturma

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.

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.

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.

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.

Öncesi ve sonrası karşılaştırması. Sonraki çekim, içeriğin oluşturulduğunu gösterir.

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.

Öncesi ve sonrası karşılaştırması. Sonraki çekim, içeriğin oluşturulduğunu ve satır içi kritik CSS&#39;ler nedeniyle biçimlendirildiğini gösterir.

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. Bunu bir geliştirme bağımlılığı olarak yükleyin ve yalnızca varsayılan ayarlarla başlayın.
  2. Siteniz için uygunsa kritik CSS'leri satır içi yapmak için 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 önceden yükleme durumu oluşturmamaya dikkat edin. react-snap BENİOKU bu konuyu daha ayrıntılı olarak ele alır.