Next.jsにおけるデータ取得戦略 - SSR、SSG、ISR、および RSC

"パフォーマンスは機能ではありません。それは基盤です。Next.js はそれを適切に構築するためのツールを提供します。"

“Performance is not a feature - it’s the foundation. Next.js gives you the tools to build it right.” Next.js provides multiple data fetching strategies depending on performance and freshness needs. SSR fetches data on every request and is best for dynamic content. SSG generates pages at build time, making it extremely fast. ISR updates static pages after deployment without full rebuilds. RSC (React Server Components) is the modern default in App Router. Caching in Next.js is controlled using fetch options like cache and revalidate. Real-world apps use a combination of SSR, SSG, ISR, and RSC - not just one. Why data fetching strategy matters Quick comparison table Server-Side Rendering (SSR) Static Site Generation (SSG) 4b Incremental Static Regeneration (ISR) React Server Components (RSC) App Router vs Pages Router Caching in App Router Real-world app architecture Common mistakes Stats Interesting Facts FAQs Summary Conclusion Why does data fetching strategy actually matter? In a classic React app, data fetching is simple: useEffect fires after the component mounts, you hit an API, and update state. Easy to reason about - but there’s a problem: For small apps, this is fine. How Next.js Solves This “Modern web development is not about fetching data - it’s about fetching it intelligently.” Next.js lets you decide: Each strategy is a tradeoff between: Freshness Performance Server cost Complexity Mental Model Fully Dynamic → SSR Fully Static → SSG In Between → ISR + RSC Important Note Server-Side Rendering (SSR) When a request comes in: Pages Router Example export async function getServerSideProps(context) { const { req } = context oop- const session = await getSession(req) if (!session) { return { redirect: { destination: '/login', permanent: false } } } const res = await fetch(`https://api.example.com/users/${session.userId}`) const user = await res.json() return { props: { user } } } Key Behavior Runs on every request Full HTML is returned No loading state on client When to Use SSR User-specific content Authentication logic Real-time data Accessing cookies/headers When NOT to Use SSR Same data for all users Rarely changing content Performance-sensitive pages Important Static Site Generation (SSG) SSG generates pages at build time and serves static HTML. Example export async function getStaticProps() { const res = await fetch('https://api.example.com/posts') const data = await res.json() return { props: { data } } } Dynamic Routes Example export async function getStaticPaths() { const res = await fetch('https://api.example.com/posts') const posts = await res.json() return { paths: posts.map(post => ({ params: { slug: post.slug } })), fallback: false } } When to Use SSG Blogs Docs Landing pages Tradeoff Very fast Not real-time Incremental Static Regeneration (ISR) ISR = SSG + automatic updates How It Works Serve static page After interval → regenerate in background Next request gets fresh page Example export async function getStaticProps() { const res = await fetch('https://api.example.com/products') const products = await res.json() return { props: { products }, revalidate: 60 } } Key Insight Revalidation only happens when a request comes On-Demand ISR (Better Approach) export default async function handler(req, res) { if (req.headers['x-webhook-secret'] !== process.env.WEBHOOK_SECRET) { return res.status(401).json({ message: 'Unauthorized' }) } const { slug } = req.body await res.revalidate(`/products/${slug}`) return res.json({ revalidated: true }) } When to Use ISR Product pages News CMS-driven content React Server Components (RSC) “RSC changes the game: less JavaScript, better performance, cleaner architecture.” In App Router: Example async function getProducts() { const res = await fetch('https://api.example.com/products', { next: { revalidate: 60 } }) return res.json() } export default async function Page() { const products = await getProducts() return ( {products.map(p => ( {p.name} ))} ) } Controlling Behavior fetch(url, { cache: 'force-cache' }) // SSG Key Benefits No useEffect No client-side fetching Smaller JS bundle Important Rule App Router vs Pages Router Pages Router getServerSideProps / getStaticProps Page-level fetching Older system App Router Async components Component-level fetching Server-first approach Supports streaming App Router is the future Caching in App Router There are 4 cache layers: Common Issue “Why is my data not updating?” Fix router.refresh() Revalidation Example import { revalidateTag } from 'next/cache' Real-World Architecture E-commerce Homepage → SSG Product Page → ISR Cart → SSR Layout → RSC SaaS Landing → SSG Dashboard → SSR Docs → ISR Real apps use combination of strategies “The best data fetching strategy is not SSR or SSG - it’s choosing the right one at the right time.” Common Mistakes 1. Using SSR everywhere 2. Ignoring server/client boundary 3. No error handling 4. Fetching in client unnecessarily 5. Misunderstanding ISR timing According to Vercel, static generation can significantly improve performance by serving pre-rendered pages from a CDN, reducing server computation.Source: https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation Next.js has millions of weekly downloads and is one of the most widely used React frameworks.Source: https://www.npmjs.com/package/next Next.js is used by companies like Netflix, TikTok, and Hulu for high-performance applications.Source: https://nextjs.org/showcase Interesting Facts Next.js was created and is maintained by Vercel.Source: https://nextjs.org Incremental Static Regeneration (ISR) was introduced in Next.js 9.5.Source: https://nextjs.org/blog/next-9-5 React Server Components (RSC) became stable with the App Router in Next.js 13.Source: https://nextjs.org/blog/next-13 Next.js enables full-stack development by combining frontend and backend capabilities in a single framework.Source: https://nextjs.org/docs FAQ 1. Is SSR outdated? 2. Is RSC replacing SSR/SSG? 3. Can we mix all strategies? 4. Which is best for SEO? 5. Can ISR work with dynamic routes? 6. Where to store API keys? 7. App Router or Pages Router? 8. How to avoid waterfall fetches? The Decision Tree Ask: Yes → SSR / RSC (no-store) Does data rarely change? Yes → SSG Does it update periodically? Yes → ISR Using App Router? Use RSC + fetch control Use Server Components for data Use Client Components for interactivity Use ISR for scalability Data fetching in Next.js is not about memorizing functions… Use SSR for dynamic data Use SSG for static content Use ISR for balance Use RSC for modern optimization Once you understand this: Your apps become faster Your architecture becomes scalable Your performance improves significantly About the Author:Vatsal is a web developer at AddWebSolution. Building web magic with Laravel, PHP, MySQL, Vue.js & more.