Next.js 15 Fullstack (App Router + Server Actions) · 강의

RSC 및 RCC 이해하기

Next.js 15에서 React Server Components(RSC)와 React Client Components(RCC)의 핵심적인 차이점과 이점을 파악합니다.

RSC 및 RCC 이해하기은(는) CoddyKit의 무료 Next.js 15 Fullstack (App Router + Server Actions) 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack (App Router + Server Actions) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack (App Router + Server Actions) 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Welcome to Next.js Components!

In Next.js 15, building user interfaces relies heavily on React components. But there's a new twist!

Traditionally, all React components run in the user's browser.
Next.js 15 introduces two main types: Server Components (RSC) and Client Components (RCC).
Understanding their differences is crucial for building fast, efficient, and interactive Next.js applications. Let's dive in!

What are Server Components (RSC)?

React Server Components (RSC) are components that run exclusively on the server, before any JavaScript is sent to the browser.

They generate HTML directly on the server.
This HTML is then sent to the client, along with any necessary client-side JavaScript for interactive parts.
RSCs are the default component type in the Next.js App Router.

RSC in Action: A Simple Header

Here's a basic component. Since there's no 'use client' directive and no interactive features (like state or event handlers), Next.js treats this as a Server Component by default.

It runs on the server, renders its HTML, and that's what the browser receives.

import React from 'react';

interface HeaderProps {
  title: string;
}

export default function Header({ title }: HeaderProps) {
  return (
    <header>
      <h1>{title}</h1>
      <p>Welcome to our page!</p>
    </header>
  );
}

Benefits of Server Components

RSCs offer significant advantages for performance and efficiency:

Zero Client JS: They don't add to the client-side JavaScript bundle, leading to faster page loads.
Direct Server Access: Can directly access server resources (like databases or file systems) without needing client-side API calls.
Improved SEO: Content is rendered on the server, making it easily crawlable by search engines.
Enhanced Security: Sensitive logic and data fetching stay on the server.

What are Client Components (RCC)?

React Client Components (RCC) are what you're likely familiar with – they run entirely in the user's browser, just like traditional React components.

They enable interactivity, client-side state management, and access to browser-specific APIs (like localStorage or navigator).
RCCs require JavaScript to be downloaded and executed in the browser.

RCC in Action: An Interactive Button

This component uses useState to manage a counter and an event handler to update it. Because it needs client-side interactivity, we mark it with 'use client'.

This directive tells Next.js to send this component's JavaScript to the browser for execution.

'use client';

import React, { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

The 'use client' Directive

The 'use client' directive is a critical marker in Next.js:

It must be placed at the very top of a file, before any imports.
It signals to Next.js that this file, and any modules it imports, should be treated as part of the client bundle.
This directive acts as a 'boundary' – everything below it, including imported child components (unless explicitly marked as RSCs), will render on the client.

Key Differences at a Glance

Here's a quick comparison of RSCs and RCCs:

Execution: RSC (Server), RCC (Browser)
Interactivity: RSC (No), RCC (Yes, with hooks/events)
State/Effects: RSC (No), RCC (Yes, useState, useEffect)
Bundle Size: RSC (Adds zero client JS), RCC (Adds to client JS bundle)
Data Access: RSC (Direct server resources), RCC (Needs client-side fetching or props)
Directive: RSC (Default, no directive), RCC (Requires 'use client')

When to Use Which Component Type?

Choosing between RSC and RCC depends on your component's needs:

Use RSC for: Static content, initial data fetching (e.g., from a database), SEO-critical parts, components that don't need client-side interactivity.
Use RCC for: Interactive UI elements (buttons, forms), client-side state management, components requiring browser APIs (e.g., geolocation, local storage), animations.

Often, you'll compose RSCs and RCCs together for a powerful user experience!

Quick Check

Which of the following statements about React Server Components (RSC) and React Client Components (RCC) in Next.js 15 are TRUE?

Recap: RSC & RCC Fundamentals

You've learned the core differences between Server and Client Components in Next.js 15!

Server Components (RSC): Run on the server, generate HTML, reduce client JS, are the default.
Client Components (RCC): Run in the browser, enable interactivity and state, require the 'use client' directive.
Combining them allows you to build highly performant and dynamic web applications.

Next, we'll explore how to fetch data specifically within Server Components efficiently!

자주 묻는 질문

“RSC 및 RCC 이해하기” 강의는 무료인가요?

네 — “RSC 및 RCC 이해하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack (App Router + Server Actions) 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack (App Router + Server Actions) 강의에는 총 4개의 강의가 포함되어 있습니다.

“RSC 및 RCC 이해하기”에서 뭘 배우나요?

Next.js 15에서 React Server Components(RSC)와 React Client Components(RCC)의 핵심적인 차이점과 이점을 파악합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack (App Router + Server Actions)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack (App Router + Server Actions)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack (App Router + Server Actions)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“RSC 및 RCC 이해하기” 강의는 얼마나 걸리나요?

대부분의 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)(으)로 돌아가기