Netlify Dynamic Site Challenge : Building News Article Cache Management playground
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-08 17:31:02

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): 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.

```typescript
    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

{% embed https://img-playground.netlify.app/news-playground %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q09e6icjgdys2zu5apwj.png)

-----

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`.

```typescript
    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`
    }
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkca2spbk3zckltyvjn5.png)

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.

```typescript
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.

{% embed https://dev.to/chintanonweb/netlify-dynamic-site-challenge-building-a-dynamic-image-gallery-with-netlify-image-cdn-3n53 %}
{% embed https://dev.to/chintanonweb/netlify-dynamic-site-challenge-building-blob-playground-with-netlify-blob-1im4 %}