Tepki tutturma özellikli rotaları önceden oluşturma

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.

Houssein Djirdeh

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:

Yan yana yüklenen karşılaştırma. Önceden oluşturma kullanan sürüm 4,2 saniye daha hızlı yüklenir.

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.

Öncesi-sonrası karşılaştırması. Sonraki çekimde içeriğin oluşturulduğu gösterilmektedir.

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.

Öncesi-sonrası karşılaştırması. Sonraki çekimde içerik oluşturulduğu ve satır içine eklenen önemli CSS nedeniyle stil belirlendi.

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.

  1. Bunu bir geliştirme bağımlılığı olarak yükleyin ve yalnızca varsayılan ayarlarla başlayın.
  2. Sitenizde çalışıyorsa kritik CSS'yi satır içine almak ü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. react-snap BENİOKU, bu konuyu daha ayrıntılı bir şekilde ele alır.