Netlify Dynamic Site Challenge : Building News Article Cache Management playground

This is a submission for the Netlify Dynamic Site Challenge: Clever Caching

Why Netlify Cache-Control is required:

1. Prevents Stale Pages and Broken Assets: Netlify's caching infrastructure ensures that visitors receive fresh content and assets, preventing stale pages and broken assets.
2. Optimizes Cache Hit Rate: By default, Netlify caches static asset responses and ignores cache control headers with a shorter max-age. This optimizes the cache hit rate for most use cases.
3. Customizable Caching for Dynamic Content: For dynamic content from Netlify Functions, Edge Functions, and proxies, cache control headers can be added to customize caching. This ensures that dynamic content is cached correctly and efficiently.
4. Fine-Grained Control over Cache Keys: Netlify's Netlify-Vary header allows for fine-grained control over cache keys, enabling developers to customize caching based on specific request parameters, such as query parameters, headers, language, country, or cookies.

What I Built

I've built a high-performance news application using Angular and the NewsAPI. I've implemented Netlify's cache control mechanisms, specifically Stale-While-Revalidate (SWR), to ensure a seamless user experience with a balance between fresh content and lightning-fast loading times.

    headers: {
      "Content-Type": "application/json",
      "Cache-Control": "public, max-age=0, must-revalidate", // Tell browsers to always revalidate
      "Netlify-CDN-Cache-Control": "public, max-age=0, stale-while-revalidate=31536000", // Tell Edge to cache asset for up to a year
    }

Demo

Here’s an example of a header that will be cached on Netlify Edge for up to one year. The content is tagged using Cache-Tag with the request query parameter selected-category, news, and proxy-api-response.

    headers: {
      "Content-Type": "application/json",
      "Cache-Control": "public, max-age=0, must-revalidate",
      "Netlify-CDN-Cache-Control": "public, max-age=31536000, must-revalidate",
      "Cache-Tag": `${category},news,proxy-api-response`,
      "Netlify-Cache-Tag": `${category},news,proxy-api-response`
    }

Cache-tags provide a way to label your cached content across Netlify Edge so it can be purged more granularly, almost immediately, and globally. For example, you might have an e-commerce site where you want to remove the promotions for sold-out products without having to purge any of the pages from your core platform. Cache-tags allow you to do this and more without affecting the performance of the rest of the site, giving a new level of control while making the purge process simpler, faster, and more efficient.

Content tagged with these headers can be purged by using a Netlify Function to call Netlify’s Purge API. The following function uses the capabilities of Netlify’s Improved Compute and invokes the Purge API to purge all the site’s content tagged with news, while leaving the remaining site’s content cached on the CDN.

import { Config, purgeCache } from "@netlify/functions";

export default async () => {
  const cacheTags = ["promotions"];
  await purgeCache({ cacheTags });

  return new Response("Purged successfully!", { status: 202 });
};

export const config: Config = {
  path: "/purge"
};

Platform Primitives

News Article Cache Management with Angular, NewsAPI, and Netlify Cache Control

1. Angular and News API: Integrate Angular with a News API to fetch and display news articles, and use Netlify's cache control to manage the content lifecycle, ensuring that updates are delivered smoothly and efficiently.
2. Cache Tags: Use cache tags to invalidate specific cache entries based on categories or other tags, ensuring that only relevant content is updated.
3. Stale-While-Revalidate (SWR): Implement SWR to serve stale content while revalidating in the background, providing a seamless user experience during updates.
4. Netlify Cache Control: Leverage Netlify's cache control to fine-tune caching behavior, setting max-age, s-maxage, and other headers to optimize cache performance.
5. Dynamic Cache Invalidation: Use platform primitives to dynamically invalidate cache entries based on real-time events, such as new article publication or category updates, ensuring that users always see the latest content.

Netlify Dynamic Site Challenge : Building a Dynamic Image Gallery with Netlify Image CDN

chintanonweb ・ May 2

#netlifychallenge #devchallenge #webdev #javascript

Netlify Dynamic Site Challenge : Building blob playground with Netlify Blob

chintanonweb ・ May 7

#netlifychallenge #devchallenge #webdev #javascript