← Cloudflare Cache / cache / advanced-configuration

Poskytování přizpůsobeného obsahu s Cloudflare

Vyjednávání obsahu je postup, kdy se z jedné URL adresy doručují různé verze prostředku a zážitek se přizpůsobuje konkrétnímu koncovému uživateli. Mezi běžné příklady patří doručení obsahu v konkrétním jazyce (Accept-Language), optimalizaci pro zařízení (User-Agent), nebo doručování moderních formátů obrázků (Accept).

Globální síť Cloudflare je navržená tak, aby toto zvládala ve velkém měřítku. U běžných scénářů, jako je doručování obrázků nové generace, tuto negociaci zjednodušuje vyhrazená funkce. Pro individuálnější logiku nabízí Cloudflare sadu nástrojů zahrnující Transform Rules, Snippets, Custom Cache Keys a Workers, díky nimž máte podrobnou kontrolu nad tím, aby se každému uživateli vždy zobrazil ten správný obsah.

Transform Rule metoda je ideální, pokud dokážete vytvořit odlišnou URL adresu, například při zobrazování obsahu podle polohy návštěvníka.

V tomto příkladu provozujete e-shop a chcete zobrazovat ceny v místní měně podle země návštěvníka.

1. V Cloudflare dashboardu přejděte do sekce Rules Přehled stránce.

   Přejděte na Přehled ↗

2. Vyberte Vytvořit pravidlo a vyberte možnost URL Rewrite Rule.

3. Zadejte popisný název, například Vary by Country - Canada.

4. V Pokud příchozí požadavky odpovídají..., vyberte Custom filter expression.

5. V části Když příchozí požadavky odpovídají..., vytvořte následující výraz:

   • Pole: Country
   • Operátor: equals
   • Hodnota: Canada

6. V části Poté...

   • pro Cesta, vyberte Zachovat.
   • pro Dotaz, vyberte Přepsat na: Dynamický loc=ca

7. Vyberte Save.

Nyní požadavky z Kanady na /products/item bude převedena na /products/item?loc=ca ještě předtím, než dosáhne vašeho originu nebo mezipaměti, čímž vznikne samostatná položka v mezipaměti.

Vary pro obrázky říká Cloudflare, které varianty váš origin podporuje. Cloudflare pak každou verzi ukládá zvlášť do mezipaměti a prohlížečům servíruje správnou verzi bez nutnosti pokaždé kontaktovat váš origin. Tuto funkci spravujete přes Cloudflare API.

Chcete-li tuto funkci zapnout, vytvořte pravidlo pro varianty pomocí API. Toto pravidlo mapuje přípony souborů na formáty obrázků, které váš origin umí obsluhovat.

Následující volání API například Cloudflare sděluje, že pro .jpeg a .jpg souborů může váš origin poskytovat image/webp a image/avif varianty:

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/cache/variants" \
	--request PATCH \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"value": {
				"jpeg": [
						"image/webp",
						"image/avif"
				],
				"jpg": [
						"image/webp",
						"image/avif"
				]
		}
	}'

Po vytvoření pravidla Cloudflare vytvoří samostatnou položku v mezipaměti pro každou variantu obrázku, což zlepší výkon pro uživatele s moderními prohlížeči.

Snippets jsou samostatné JavaScriptové fetch handlery, které běží na edge serverech Cloudflare nad vašimi požadavky. Umožňují programově pracovat s mezipamětí a poskytují plnou kontrolu nad klíčem mezipaměti i chováním odpovědi, aniž by se změnila URL adresa viditelná pro uživatele.

V tomto příkladu provozujete A/B test řízený cookie s názvem ab-test (s hodnotami group-a nebo group-b). Pro každou skupinu chcete v cache uchovávat jinou verzi stránky.

1. V dashboardu Cloudflare přejděte na Snippets stránce.

   Přejděte na Snippets ↗

2. Vyberte Create new Snippet a pojmenujte ho ab-test-caching.

3. Vložte následující kód. Upravuje cache key na základě ab-test cookie a odpověď uloží do mezipaměti na 30 dní.

const CACHE_DURATION = 30 * 24 * 60 * 60; // 30 days

export default {
  async fetch(request) {
    // Construct a new URL for the cache key based on the A/B cookie
    const abCookie = request.headers.get('Cookie')?.match(/ab-test=([^;]+)/)?.[1] || 'control';
    const url = new URL(request.url);
    url.pathname = `/ab-test/${abCookie}${url.pathname}`;

    const cacheKey = new Request(url, request);
    const cache = caches.default;

    let response = await cache.match(cacheKey);
    if (!response) {
      // If not in cache, fetch from origin
      response = await fetch(request);
      response = new Response(response.body, response);
      response.headers.set("Cache-Control", `s-maxage=${CACHE_DURATION}`);
      // Put the response into cache with the custom key
      await cache.put(cacheKey, response.clone());
    }
    return response;
  },
};

4. Uložte a nasaďte Snippet.
5. V dashboardu Snippets vyberte Připojit k trasám přiřadit Snippet.

Pokud má váš účet plán Enterprise, Custom Cache Keys funkce nabízí rozhraní bez psaní kódu, ve kterém určíte, které vlastnosti požadavku se zahrnou do cache key.

Možnosti Custom Cache Key:

• Cache podle typu zařízení
• Možnost query string No query string parameters except
• Zahrnout hlavičky a hodnoty
• Zahrnout názvy a hodnoty cookies
• Uživatel: typ zařízení, země, jazyk

Pokud váš origin server poskytuje různé typy obsahu (například application/json oproti text/html) na stejné adrese URL na základě Accept hlavičky použijte vlastní cache key, abyste je ukládali do mezipaměti odděleně.

1. V dashboardu Cloudflare přejděte na Cache Rules stránce.

   Přejděte na Cache Rules ↗

2. Vyberte Vytvořit pravidlo.

3. Zadejte název pravidla, například Vary by Accept Header.

4. Nastavte podmínku pro použití pravidla (například konkrétní hostitel nebo cesta).

5. V části Cache key, vyberte Použití vlastního klíče.

6. Vyberte Přidat nové.

   • Typ: Header
   • Název: Accept
   • Hodnota: Přidejte jednotlivé value, nebo ponechte prázdné pro všechny.

7. Vyberte Nasadit.

Tato konfigurace vytváří samostatné záznamy v cache na základě Accept hodnotu hlavičky s ohledem na vyjednávání obsahu (content negotiation) vašeho API.

Pro složitější scénáře ukládání do mezipaměti, Cloudflare Workers poskytují plnohodnotné serverless prostředí ideální pro vlastní logiku ve velkém měřítku.

Tento Worker rozpozná, zda návštěvník používá mobilní, nebo desktopové zařízení, a pro každé z nich vytvoří samostatný záznam v cache, čímž zajistí obsloužení a cachování správné verze webu.

export default {
  async fetch(request, env, ctx) {
    const userAgent = request.headers.get('User-Agent') || '';
    const deviceType = userAgent.includes('Mobile') ? 'mobile' : 'desktop';

    // Create a new URL for the cache key that includes the device type
    const url = new URL(request.url);
    url.pathname = `/${deviceType}${url.pathname}`;

    const cacheKey = new Request(url, request);
    const cache = caches.default;

    let response = await cache.match(cacheKey);

    if (!response) {
      console.log(`Cache miss for ${deviceType} device. Fetching from origin.`);
      response = await fetch(request);
      let responseToCache = response.clone();
      ctx.waitUntil(cache.put(cacheKey, responseToCache));
    }

    return response;
  },
};

Tento Worker rozpozná, zda návštěvník používá mobilní zařízení, nebo desktop, a pro každý typ vytvoří samostatný záznam v cache, čímž zajistí obsloužení a cachování správné verze webu. Využívá funkci Enterprise cf.customCacheKey funkce.

export default {
  async fetch(request) {
    // 1. Determine the device type from the User-Agent header
    const userAgent = request.headers.get('User-Agent') || '';
    const deviceType = userAgent.includes('Mobile') ? 'mobile' : 'desktop';

    // 2. Create a custom cache key by appending the device type to the URL
    const customCacheKey = `${request.url}-${deviceType}`;

    // 3. Fetch the response. Cloudflare's cache automatically uses the
    //    customCacheKey for cache operations (match, put).
    const response = await fetch(request, {
      cf: {
        cacheKey: customCacheKey,
      },
    });

    // Optionally, you can modify the response before returning it
    // For example, add a header to indicate which cache key was used
    const newResponse = new Response(response.body, response);
    newResponse.headers.set("X-Cache-Key", customCacheKey);
    return newResponse;
  },
};

Běžným problémem je ukládání do mezipaměti obsahu z frameworků, jako je Next.js, které používají RSC (React Server Components) hlavičku požadavku, která rozlišuje mezi načtením HTML stránky a datovým obsahem RSC pro stejnou URL adresu. Zde jsou nejlepší způsoby, jak to řešit.

Nejjednodušším řešením je vytvořit Transform Rule která kontroluje RSC hlavičku a přidá k požadavku jedinečný query parametr, čímž vzniknou dvě odlišné URL, které lze uložit do mezipaměti: /page (pro HTML) a /page?_rsc=1 (pro datový obsah RSC).

1. V Cloudflare dashboardu přejděte do sekce Rules Přehled stránce.

   Přejděte na Přehled ↗

2. Vyberte Vytvořit pravidlo a vyberte možnost URL Rewrite Rule.

3. Zadejte název, například Vary by RSC Header.

4. V Pokud příchozí požadavky odpovídají, vyberte Custom filter expression.

5. V části Když příchozí požadavky odpovídají, ručně upravte výraz tak, aby kontroloval přítomnost RSC hlavičku:

   • has_key(http.request.headers, "rsc")

6. V části Poté:

   • Pro Cesta, vyberte Zachovat.
   • Pro Dotaz, vyberte Přepsat na, vyberte Statický: _rsc=1.

7. Vyberte Save.

Případně použijte Snippets nebo Custom Cache Keys přidat RSC hlavičku přímo do cache key, aniž by se změnila viditelná URL. Výsledkem je přehlednější URL, ale je potřeba pokročilejší konfigurace.