React Akışı: Optimize Edilmiş Kullanıcı Deneyimi için Aşamalı Sunucu Tarafı Renderlama

Web geliştirme dünyasında, hızlı ve duyarlı bir kullanıcı deneyimi sunmak çok önemlidir. Kullanıcılar, web sitelerinin hızlı bir şekilde yüklenmesini ve gecikme olmadan etkileşimli olmasını bekler. Kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesi olan React, bu zorluğun üstesinden gelmek için Akışlı Sunucu Tarafı Renderlama (SSR) adı verilen güçlü bir teknik sunar. Bu makale, React Akışlı SSR kavramını derinlemesine inceleyerek, faydalarını, uygulamasını ve web sitesi performansı ve kullanıcı deneyimi üzerindeki etkisini araştırıyor.

Sunucu Tarafı Renderlama (SSR) Nedir?

Geleneksel istemci tarafı renderlama (CSR), tarayıcının HTML, JavaScript ve CSS dosyalarını indirmesini ve ardından içeriği istemci tarafında işlemesini içerir. Esnek olmasına rağmen, bu yaklaşım, kullanıcının herhangi bir içerik görmeden önce tüm kaynakların indirilmesini ve JavaScript'in yürütülmesini beklemesi gerektiğinden, gecikmeli bir ilk renderlamaya yol açabilir. SSR ise, React bileşenlerini sunucuda işler ve tamamen işlenmiş HTML'yi istemciye gönderir. Bu, tarayıcı hemen görüntülenebilen tamamen oluşturulmuş HTML aldığı için daha hızlı bir ilk yükleme süresiyle sonuçlanır.

Geleneksel SSR'ın Sınırlamaları

Geleneksel SSR, CSR'ye göre önemli bir gelişme sunsa da, kendi sınırlamaları vardır. Geleneksel SSR'da, herhangi bir HTML istemciye gönderilmeden önce tüm uygulamanın sunucuda işlenmesi gerekir. Bu, özellikle birden çok bileşen ve veri bağımlılığı olan karmaşık uygulamalar için bir darboğaz olabilir. İlk Bayta Kadar Süre (TTFB) yüksek olabilir ve bu da kullanıcı için algılanan bir yavaşlığa yol açar.

React Akışlı SSR'a Giriş: Aşamalı Bir Yaklaşım

React Akışlı SSR, aşamalı bir yaklaşım benimseyerek geleneksel SSR'ın sınırlamalarının üstesinden gelir. Akışlı SSR, tüm uygulamanın sunucuda işlenmesini beklemek yerine, renderlama işlemini daha küçük parçalara ayırır ve bu parçaları kullanılabilir hale geldikçe istemciye aktarır. Bu, tarayıcının içeriği çok daha erken görüntülemeye başlamasını sağlayarak algılanan performansı artırır ve TTFB'yi azaltır. Bunu, bir restoranın yemeğinizi aşamalar halinde hazırlaması gibi düşünün: tüm yemek aynı anda hazır olmadan önce önce meze, sonra ana yemek ve son olarak tatlı servis edilir.

React Akışlı SSR'ın Faydaları

React Akışlı SSR, web sitesi performansı ve kullanıcı deneyimi için çok sayıda fayda sunar:

• Daha Hızlı İlk Yükleme Süresi: HTML parçalarını istemciye aktararak, tarayıcı içeriği çok daha erken görüntülemeye başlayabilir, bu da daha hızlı algılanan yükleme süresi ve gelişmiş kullanıcı etkileşimi ile sonuçlanır.
• Gelişmiş İlk Bayta Kadar Süre (TTFB): Akışlı SSR, tüm uygulamanın işlenmesini beklemeden ilk HTML parçasını hazır olur olmaz göndererek TTFB'yi azaltır.
• Gelişmiş Kullanıcı Deneyimi: Daha hızlı bir ilk yükleme süresi, kullanıcıların içeriğin görünmesini beklemek zorunda kalmaması nedeniyle daha iyi bir kullanıcı deneyimine yol açar.
• Daha İyi SEO: Arama motorları, HTML sunucuda kolayca kullanılabilir olduğundan içeriği daha etkili bir şekilde tarayabilir ve indeksleyebilir.
• Aşamalı Hidrasyon: Akışlı SSR, istemci tarafı React kodunun yavaş yavaş olay dinleyicileri eklediği ve HTML parçaları aktarılırken uygulamayı etkileşimli hale getirdiği aşamalı hidrasyonu sağlar.
• Gelişmiş Kaynak Kullanımı: Akışlı SSR, renderlama işlemini daha küçük parçalara ayırarak sunucudaki kaynak kullanımını iyileştirebilir.

React Akışlı SSR Nasıl Çalışır?

React Akışlı SSR, HTML parçalarını istemciye aktarmak için ReactDOMServer.renderToPipeableStream() API'sini kullanır. Bu API, sunucunun yanıt nesnesine aktarılabilen okunabilir bir akış döndürür. İşte nasıl çalıştığının basitleştirilmiş bir örneği:

1. Sunucu bir sayfa için istek alır.
2. Sunucu, React uygulamasını bir akışa işlemek için ReactDOMServer.renderToPipeableStream() işlevini çağırır.
3. Akış, React bileşenleri işlenirken HTML parçaları yaymaya başlar.
4. Sunucu, akışı yanıt nesnesine aktararak HTML parçalarını istemciye gönderir.
5. Tarayıcı HTML parçalarını alır ve bunları aşamalı olarak görüntülemeye başlar.
6. Tüm HTML parçaları alındıktan sonra, tarayıcı React uygulamasını hidrate ederek etkileşimli hale getirir.

React Akışlı SSR Uygulama

React Akışlı SSR uygulamak için bir Node.js sunucusuna ve bir React uygulamasına ihtiyacınız olacaktır. İşte adım adım bir kılavuz:

1. Bir Node.js sunucusu kurun: Express veya Koa gibi bir çerçeve kullanarak bir Node.js sunucusu oluşturun.
2. React ve ReactDOMServer'ı yükleyin: react ve react-dom paketlerini yükleyin.
3. Bir React uygulaması oluşturun: Sunucuda işlemek istediğiniz bileşenlerle bir React uygulaması oluşturun.
4. ReactDOMServer.renderToPipeableStream() kullanın: Sunucu kodunuzda, React uygulamanızı bir akışa işlemek için ReactDOMServer.renderToPipeableStream() API'sini kullanın.
5. Akışı yanıt nesnesine aktarın: HTML parçalarını istemciye göndermek için akışı sunucunun yanıt nesnesine aktarın.
6. Hataları işleyin: Renderlama işlemi sırasında oluşabilecek hataları yakalamak için hata işlemeyi uygulayın.
7. Hidrasyon için bir script etiketi ekleyin: İstemci tarafında React uygulamasını hidrate etmek için HTML'ye bir script etiketi ekleyin.

Örnek Kod Parçacığı (Sunucu Tarafı):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // React bileşeniniz

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // İstemci tarafı giriş noktası
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Üzgünüz, bir şeyler ters gitti
');
    }
  });

  setTimeout(abort, 10000); // İsteğe bağlı: Belirsiz asılı kalmayı önlemek için zaman aşımı
});

app.use(express.static('public')); // Statik varlıkları sunun

app.listen(port, () => {
  console.log(`Sunucu http://localhost:${port} adresinde dinleniyor`);
});

Örnek Kod Parçacığı (İstemci Tarafı - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Örnek React Uygulama Bileşeni (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Veri başarıyla yüklendi!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Bir yükleme gecikmesini simüle et
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Akışlı SSR'a Hoş Geldiniz!
      
Bu, React Akışlı SSR'ın bir gösterimidir.
      Yükleniyor...
}>