高度なキャッシュ戦略
HTTPキャッシュヘッダーやCDN連携など、高速化のための高度なキャッシュ戦略を実装します。
「高度なキャッシュ戦略」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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>: Overridesmax-agefor 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-Controlheaders (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 — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 22
- レッスン
- 88
よくある質問
「高度なキャッシュ戦略」レッスンは無料ですか？
はい。「高度なキャッシュ戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応の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)を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。