Tepki tutturma özellikli rotaları önceden oluşturma

Sunucu tarafı oluşturma kullanmıyor ancak React sitenizin performansını hızlandırmak mı istiyorsunuz? Önceden oluşturmayı deneyin.

Houssein Djirdeh

react-snap, sitenizdeki sayfaları statik HTML dosyalarına önceden oluşturarak yayınlayan bir üçüncü taraf kitaplığıdır. Bu, uygulamanızdaki ilk 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:

Not: react-snap, React uygulamanız için statik HTML içeriğini önceden oluşturabilen tek kitaplık değildir. react-snapshot de bir alternatiftir.

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ükse 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/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ızdaki 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. Bu dosyalar daha sonra uygulama için gereken 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.

Not: npm, ana ve rastgele komut dosyaları için ön ve son komutlarını destekler. Bu komutlar her zaman sırasıyla orijinal komut dosyasından hemen önce veya sonra çalışır. npm belgelerini inceleyerek daha fazla bilgi edinebilirsiniz.

Son olarak, uygulamanın nasıl başlatıldığını 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 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ı'ndaki Önizlemeler sekmesini tıklayarak HTML yükü içeriğine göz atabilirsiniz.

Not: react-snap, React dışındaki diğer çerçeveler için de kullanılabilir. Buna Vue ve Preact dahildir. Bu konuda daha fazla talimatı react-snap README dosyasında bulabilirsiniz.

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

Statik HTML artık neredeyse anında oluşturulsa da varsayılan olarak stil uygulanmaz. Bu da "stil uygulanmamış içeriğin yanıp sönmesi" (FOUC) sorununa 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.

Bunu önlemek için kritik CSS veya ilk sayfanın oluşturulması için gereken minimum CSS miktarı doğrudan HTML belgesinin <head> içine yerleştirilebilir. react-snap, farklı yollar için kritik CSS'leri ayıklamak amacıyla arka planda başka bir üçüncü taraf kitaplığı (minimalcss) kullanır. package.json dosyanızda aşağıdakileri belirterek bunu 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.

Dikkat: inlineCSS seçeneği henüz deneme aşamasındadır. Stillerin rotalarınıza doğru şekilde uygulandığından emin olmak için tekrar kontrol etmenizi öneririz.

Sonuç

Uygulamanızda sunucu tarafı oluşturma rotaları kullanmıyorsanız kullanıcılarınıza statik HTML'yi önceden oluşturmak için react-snap öğesini 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.