Next.js 15 Fullstack (App Router + Server Actions) · 课时

高级缓存策略

实施包括 HTTP 缓存标头和 CDN 集成在内的高级缓存策略，以实现最高速度。

第 3 / 4 课12 个步骤

高级缓存策略 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Beyond Basic Next.js Cache

You've learned about Next.js's built-in caching for data fetching. But web performance involves more! Advanced caching strategies leverage the entire web infrastructure, including browsers and proxies.

This lesson dives into HTTP caching headers and Content Delivery Networks (CDNs) to supercharge your application's speed and efficiency.

Control Browser & Proxy Cache

HTTP caching headers are instructions sent from your server to the client's browser or any intermediate proxy servers. These headers tell them how long and under what conditions they can store (cache) a response.

Reduced Latency: Content loads faster from local cache.
Lower Bandwidth: Less data transferred over the network.
Reduced Server Load: Server doesn't have to generate the same response repeatedly.

`max-age`, `public`, `private`

The Cache-Control header is the most powerful HTTP caching directive. It dictates how, where, and for how long a response can be cached.

max-age=<seconds>: How long a resource can be cached by the browser (shared cache also respects this).
s-maxage=<seconds>: Overrides max-age for shared caches (CDNs, proxies).
public: Any cache (browser, proxy) can store the response.
private: Only the client's browser can cache the response (not shared caches).

`no-cache`, `no-store` & More

Other crucial Cache-Control directives help manage specific caching behaviors:

no-cache: Forces revalidation with the origin server before serving a cached copy, even if not expired.
no-store: Prohibits any caching of the response; it must be fetched from the server every time.
must-revalidate: Requires revalidation for expired caches; cannot serve stale content.

Use these carefully to balance freshness and performance.

Implement Cache Headers

You can set HTTP headers in Next.js Server Components or API routes using the headers() function from next/headers or directly on the Response object.

This example sets a Cache-Control header for a Server Component page.

import { headers } from 'next/headers';

export default function ProductsPage() {
  // Set Cache-Control header for this page's response
  headers().set('Cache-Control', 'public, max-age=3600, s-maxage=86400');

  return (
    <main>
      <h1>Our Products</h1>
      <p>This content is highly cacheable!</p>
    </main>
  );
}

Efficient Revalidation with ETag

Even with caching, sometimes content might change. ETag (Entity Tag) and Last-Modified headers allow browsers to ask the server: "Has this content changed since I last fetched it?"

ETag: A unique identifier for a specific version of a resource.
Last-Modified: The date and time the resource was last modified.

If the content hasn't changed, the server responds with a 304 Not Modified status, saving bandwidth.

Content Delivery Networks (CDNs)

A Content Delivery Network (CDN) is a geographically distributed network of proxy servers and data centers. Its goal is to provide high availability and performance by distributing service spatially relative to end-users.

Think of it as having copies of your website's static assets (images, CSS, JS) and even dynamic content (if configured) stored closer to your users worldwide.

CDNs Boost Next.js Performance

Integrating a CDN with Next.js brings significant advantages:

Global Reach: Content is served from the nearest server, reducing latency for global users.
Reduced Origin Load: The CDN handles most requests, taking pressure off your main server.
Improved Reliability: Distributes traffic, making your app more resilient to spikes.
Enhanced Security: Many CDNs offer DDoS protection and other security features.

Next.js `assetPrefix`

For static assets (like images in the public directory), Next.js automatically optimizes them. To explicitly tell Next.js to serve these assets from a CDN, you can configure assetPrefix in next.config.js.

This prepends a URL to all static assets, ensuring they are requested from your CDN.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: 'https://cdn.example.com',
  // ... other Next.js configs
};

module.exports = nextConfig;

Vercel & Edge Caching

When deploying Next.js to Vercel, you automatically benefit from their global Edge Network, which acts like a built-in CDN.

Vercel intelligently caches your static assets and Server Component responses at edge locations, leveraging s-maxage for optimal performance without manual CDN setup.

This "edge caching" is a powerful form of CDN integration, baked right into the platform.

Cache-Control Challenge

You're building a Next.js application. You have a page displaying public product information that rarely changes, and you want browsers and CDNs to cache it for a day, but also ensure that shared caches (like CDNs) revalidate after 1 hour if possible, without forcing the browser to revalidate for a day.

在交互式课程中回答

Advanced Caching Recap

Great job! You've learned how to harness advanced caching strategies for your Next.js applications.

We explored HTTP Cache-Control headers (max-age, s-maxage, public, private, no-cache, no-store).
You saw how to implement these headers in Next.js Server Components.
We covered the role of CDNs and how they enhance global content delivery.
Finally, we discussed Vercel's Edge Network as a powerful, built-in CDN solution.

These techniques are crucial for building high-performance, scalable web applications!

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 22
课程: 88

免费开始学习查看完整课程

常见问题解答

「高级缓存策略」课时是免费的吗？

是的 — 「高级缓存策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

「高级缓存策略」这节课中我会学到什么？

实施包括 HTTP 缓存标头和 CDN 集成在内的高级缓存策略，以实现最高速度。你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「高级缓存策略」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack (App Router + Server Actions)