Belki de en önemli ve temel kararlardan biri, yeni bir web uygulaması tasarlamaya başladığımızda web uygulamamızı nasıl oluşturacağımızdır. Bu yüzden bugün iki render yönteminden bahsetmek istiyorum, client-side rendering ve server-side rendering. Tabii ki, bu iki kalıp tek değildir ve yakın bir gelecekte aşamalı işleme ve diğer kalıpları tartışacağız.

Kullanacağım terminoloji

oluşturma

• SSR: Sunucu Tarafında Oluşturma — bir istemci tarafı veya evrensel uygulamayı sunucuda HTML'ye dönüştürme.
• CSR: İstemci Tarafında Oluşturma — genellikle DOM kullanılarak bir tarayıcıda uygulama oluşturma.
• Rehidrasyon: İstemcide JavaScript görünümlerini, sunucu tarafından oluşturulan HTML'nin DOM ağacını ve verilerini yeniden kullanacak şekilde "önyükleme".

• FP: First Paint — herhangi bir pikselin kullanıcıya ilk kez göründüğü zaman.
• FCP: First Contentful Paint — istenen içeriğin (makale gövdesi vb.) görünür hale geldiği zaman.
• TTI: Etkileşim Süresi — bir sayfanın etkileşimli hale geldiği zaman (kablolu etkinlikler vb.).
• TTFB: İlk Bayt Süresi — bir bağlantının girilmesi ile içeriğin ilk bitinin gelmesi arasındaki süre

KSS — Yapı.

Sunucuda boş div etiketli html ve paketlenmiş js olduğunu düşünün. CSR oluşturma şuna benzer:

Html, yalnızca tek bir kök div etiketinden oluşur ve DOM'un görüntülenmesi ve güncellenmesi gibi diğer tüm şeyler JS tarafından gerçekleştirilir.

Paketler ve Performans

Performans olarak düşünürsek ilk olarak sayfanın karmaşıklığı arttıkça JS'nin karmaşıklığının ve boyutunun da artacağını ve sunucudan alma süresinin artacağını görüyoruz. Bu, sayfanın FCP ve TTI'sinde gecikmeye neden olur.

Lehte ve aleyhte olanlar

Artıları

• CSR, sayfaları yenilemeden gezinmeyi destekleyen SPA'ya sahip olmanın yolunu sunar. Bu, uzun süredir büyük bir sorundu ve artık web sitelerinin dinamik bir uygulama gibi davranmaya başlaması mümkün.

Yine de birkaç tuzak var:

• Verim. Sayfanın karmaşıklığı arttıkça JS'nin FCP'yi görmesi için daha fazla beklememiz gerekiyor .
• Seo. Tıpkı kullanıcı ziyaretçileri gibi, botlar da sayfayı görüntülemek için istekte bulunur. Bu, emekleme olarak bilinen bir süreçtir. İlk aşamada, Googlebots sayfanızın kaynak kodunu tarar ve tüm görünür (javascript olmayan) içeriği dizine ekler. Ancak dom'u inşa etmek için JS yürütülene kadar görünür hiçbir şeyimiz yok. Bu oluşturma aşamasında tekrar gelecek (bazen bu süre ayları buluyor) ve şimdi sayfanızın gerçek içeriğini taramaya hazır hale getirecek ve sonunda dizine ekleyecektir.

• Yavaş yüklenme. Tembel yükleme ile kritik olmayan kaynakları yüklemekten kaçınabiliriz. Bu yaklaşım, ilk sayfa yükleme süresini azaltacaktır.
• Agresif Kod bölme. Çalışma zamanı sırasında dinamik olarak yüklenebilen birden çok paket oluşturmamıza yardımcı olur. Ayrıca JS kaynaklarını tembel bir şekilde yüklememizi sağlar. Kod bölme, Turbopack veya Webpack gibi paketleyiciler tarafından desteklenir .
• Hizmet çalışanları ile önbelleğe alma . Uygulama kabuğunu çevrimdışı olarak önbelleğe almak ve performans süresini artırmak için kullanılabilir.

SSR'nin ne olduğuna bir göz atalım . Kullanıcı istekte bulunurken işlenecek sayfa içeriği için tam HTML'yi oluşturmanın en eski yöntemidir. Bu uygulama için, sunucu tarafında html'yi oluşturmamız ve tarayıcının kolayca bir FCP oluşturabilmesi için tarayıcıya göndermemiz gerekiyor .

Tarayıcı, sunucuda bir istekte bulunur ve html'yi yalnızca boş kök değil, aynı zamanda içindeki içerikle de oluşturur. Böylece tarayıcı içeriği mümkün olan en kısa sürede gösterir. Artık tarayıcı paketinizi indirmeye başlar, kullanıcı içeriği ekranda görmeye devam eder ancak henüz etkileşimli değildir. Yalnızca paketiniz indirildikten sonra html'nize olay dinleyicileri ekler ve etkileşimli hale gelir. Bu sürece hidrasyon veya Rehidrasyon diyoruz .

SSR - Artıları ve Eksileri

Artıları

Daha az Javascript, tarayıcının daha hızlı FCP ve TTI yapmasını sağlar.

İstemci FCP'sine çok fazla Javascript göndermekten kaçındığımız için ve kullanıcılar sadece TTI'yi bekliyor. Sayfada çok sayıda UI öğemiz olduğunda, SSR'de CSR'den çok daha az JS vardır, bu nedenle komut dosyalarını alma süresi bazen FP=FCP=TTI olsa bile daha kısadır.

SEO

Arama motoru botları, içeriği ilk aşamada kolayca alıyor, böylece artık sayfayı dizine ekleyebiliyorlar. Artık sayfada oldukça iyi bir SEO elde ettiğimize göre.

Eksileri

Bazen yavaş bir TTFB'miz olabilir . Bu, kullanıcının Yavaş bir ağa sahip olduğu veya Sunucu kodunun optimize edilmediği bir senaryodur.

Kodumuzun tamamı müşteri tarafında bulunmadığından, sunucuya yapılan sık çağrılar tam sayfanın yeniden yüklenmesine neden olur ve bu bazen etkileşimler arasındaki süreyi uzatır. Dolayısıyla SSR ile SPA mümkün değildir .

Express ile basit React SSR uygulaması oluşturalım .

npx create-react-app ssr-react

Artırma ve azaltma yöntemleriyle component : counter yazalım.

import React, { useState } from "react";

const App = ({ initialValue }) => {
  const [count, setCount] = useState(initialValue);
  return (
    <>
      <div className="App">
        <button onClick={() => setCount(count + 1)}>Increase</button>
        <div style={{ margin: "20px" }}>{count}</div>
        <button onClick={() => setCount(count - 1)}>Decrease</button>
      </div>
    </>
  );
};


export default App;

npm i express --save

import express from "express";
const app = express();
app.listen(3000, function () {
  console.log("server running on 3000");
});

import express from "express";
import fs from "fs";
import path from "path";
import App from "../src/App";
import React from "react";
import ReactDOMServer from "react-dom/server";
const app = express();

app.get("/page", async (req, res) => {
  fs.readFile(path.resolve("./build/index.html"), "utf-8", (err, data) => {
    if (err) {
      return res.status(500).send("Error happened");
    }
    const html = `<div id="root">${ReactDOMServer.renderToString(
      <App />
    )}</div>`;
    return res.send(data.replace('<div id="root"></div>', html));
  });
});

app.use(express.static(path.resolve(__dirname, "..", "build")));

app.listen(3000, function () {
  console.log("server running on 3000");
});

Bu yüzden sunucu tarafında JSX kullanıyoruz ve bunun için desteğe ihtiyacımız var, bu yüzden onun için babel eklemeyi düşünüyoruz.

npm i @babel/preset-env @babel/preset-react @babel/register ignore-styles --save-dev

require("ignore-styles");

require("@babel/register")({
  ignore: [/(node_module)/],
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

import React, { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import App from "./App";

hydrateRoot(document.getElementById("root"), <App initialValue={10} />);

"ssr": "node server/index.js",

Bu kadar.

Github Kaynak Kodu burada .