Розуміння та впровадження ETags у REST API

e-tag-js-preview

Вступ

В сучасних веб-додатках оптимізація продуктивності та ефективності використання ресурсів є важливою частиною розробки. Одним із способів покращення продуктивності є використання ETags у REST API. ETag (Entity Tag) є механізмом для кешування, який дозволяє клієнтам уникнути повторного завантаження незмінних ресурсів. У цій статті ми розглянемо, що таке ETags, як вони працюють та як їх можна впровадити у ваші REST API за допомогою JavaScript, Fastify, React та сигналів.

Що таке ETag?

ETag — це унікальний ідентифікатор, який сервер призначає конкретній версії ресурсу. Коли ресурс змінюється, змінюється і його ETag. Це дозволяє клієнтам перевіряти, чи змінився ресурс з моменту останнього завантаження, та уникнути повторного завантаження, якщо ресурс не змінився.

Як працюють ETags?

e-tag-js

Коли клієнт запитує ресурс, сервер відповідає з цим ресурсом та додає ETag до заголовку відповіді. Під час наступного запиту до цього ресурсу клієнт відправляє ETag у заголовку запиту If-None-Match. Сервер перевіряє ETag і, якщо ресурс не змінився, відповідає статусом 304 (Not Modified), що вказує клієнту використовувати закешовану версію ресурсу. Якщо ресурс змінився, сервер надсилає новий ресурс разом з оновленим ETag.

Впровадження ETags на Fastify

Код можна знайти тут.

Fastify підтримує ETags. Для цього можна використовувати плагін @fastify/etag. Ось приклад:

import Fastify from "fastify";
import Etag from "@fastify/etag";
import cors from "@fastify/cors";

const fastify = Fastify({
  logger: true,
});

fastify.register(Etag, { algorithm: "sha1" });
fastify.register(cors, {
  credentials: true,
  origin: true,
  exposedHeaders: "*",
});

let count = 0;

setInterval(() => {
  count++;
}, 3000);

fastify.get("/count", () => {
  return count;
});

try {
  await fastify.listen({ port: 3000 });
} catch (err) {
  fastify.log.error(err);
  process.exit(1);
}

Підключення Fastify Server до React

В React можна використовувати ETags для зменшення кількості запитів до сервера та покращення продуктивності. Ось приклад використання ETags у компоненті React:


import { signal } from "@preact/signals";

export const count = signal(0);

export const subscribeCountContentDelivery = () => {
  let eTag = "";
  const interval = setInterval(() => {
    fetch("http://localhost:3000/count", {
      headers: {
        "If-None-Match": eTag,
      },
    })
      .then((response) => {
        if (response.status === 304) {
          return;
        }
        eTag = response.headers.get("ETag")!;
        return response.text();
      })
      .then((data) => {
        if (data !== undefined) {
          count.value = +data;
        }
      });
  }, 1000);

  return () => {
    clearInterval(interval);
  };
};


import { useEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { subscribeCountContentDelivery, count } from "./utils/contentDelivery";

function App() {
  const [value, setValue] = useState(count.value);

  useEffect(() => {
    const unsubscribe = subscribeCountContentDelivery();

    count.subscribe((value) => {
      setValue(value);
    });

    return () => {
      unsubscribe();
    };
  });

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Count: {value}</h1>
    </>
  );
}

export default App;

Висновок

Використання ETags є ефективним способом покращення продуктивності вашого REST API, зменшуючи обсяг переданих даних і навантаження на сервер. За допомогою ETags клієнти можуть повторно використовувати незмінні ресурси, що знижує час завантаження та покращує користувацький досвід. У даній статті ми розглянули основні концепції ETags та показали, як їх можна впровадити у ваші API на прикладах JavaScript, Fastify, React та сигналів.