یکی از کلیدیترین مفاهیم در معماری مدرن Next.js، تفکیک محیط اجرای کدهاست. سرور و کلاینت (مرورگر) قابلیتها و محدودیتهای کاملاً متفاوتی دارند. Next.js به شما اجازه میدهد تا با توجه به نیاز هر بخش از صفحه، تعیین کنید که کدها کجا پردازش و اجرا شوند.
'use client')به طور خلاصه، هر زمان که کامپوننت شما نیاز به تعامل مستقیم با کاربر یا دسترسی به قابلیتهای مرورگر داشته باشد، باید به سراغ کلاینت کامپوننت بروید.
مدیریت وضعیت (State) و مدیریتکنندههای رویداد (Event Handlers): هر جا که نیاز به هوکهایی مثل useState ،useReducer یا رویدادهایی مثل onClick و onChange دارید.
منطقهای وابسته به چرخه حیات (Lifecycle): برای استفاده از هوکهایی مثل useEffect و useLayoutEffect.
APIهای اختصاصی مرورگر: دسترسی به اشیاء و متدهای بومی مرورگر مثل window ،document ،localStorage یا navigator.geolocation.
هوکهای سفارشی (Custom Hooks): هوکهایی که خودشان به وضعیتها یا قابلیتهای کلاینت وابستهاند.
هر جا که کامپوننت شما صرفاً وظیفه نمایش ساختار، دریافت دیتا یا تعامل با سرور را دارد، باید سرور کامپوننت باقی بماند.
دریافت اطلاعات (Data Fetching): ارتباط مستقیم با دیتابیس یا فراخوانی APIها درست در نزدیکترین نقطه به منبع داده.
امنیت و حفظ اطلاعات حساس: استفاده از API Keyها، توکنها و کدهای محرمانه بدون تررس از لو رفتن آنها در مرورگر کاربر.
کاهش حجم جاوااسکریپت نهایی (Bundle Size): کدهای سنگین و پکیجهای وابسته، روی سرور پردازش شده و فقط خروجی متنی یا HTML آنها به مرورگر ارسال میشود؛ در نتیجه جاوااسکریپت کمتری برای کاربر فرستاده میشود.
بهبود سئو و سرعت لود اولیه (FCP): تولید سریعتر ساختار اولیه صفحه روی سرور و امکان استریم (Streaming) قطرهچکانی محتوا برای کاربر.
یک الگوی معماری استاندارد این است که صفحه والد دیتای سنگین را روی سرور بگیرد و آن را به عنوان پروپ به یک فرزند تعاملی در کلاینت پاس بدهد.
در مثال زیر، کامپوننت <Page> یک کامپوننت سروری است که دیتای پست را دانلود میکند و تعداد لایکها را به کامپوننت کلاینتی <LikeButton> میسپارد:
// app/[id]/page.tsx
import LikeButton from '@/app/ui/like-button'
import { getPost } from '@/lib/data'
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
// دیتای پست مستقیماً و با امنیت بالا روی سرور گرفته میشود
const post = await getPost(id)
return (
<div>
<main>
<h1>{post.title}</h1>
{/* پاس دادن دیتای آماده به کامپوننت کلاینت */}
<LikeButton likes={post.likes} />
</main>
</div>
)
}
// app/ui/like-button.tsx
'use client' // تعریف مرز کلاینت
import { useState } from 'react'
export default function LikeButton({ likes }: { likes: number }) {
const [currentLikes, setCurrentLikes] = useState(likes)
return (
<button onClick={() => setCurrentLikes(currentLikes + 1)}>
👍 لایک ({currentLikes})
</button>
)
}
| نیازمندی شما در کامپوننت | Server Component | Client Component |
| دریافت مستقیم دیتا از دیتابیس / API سروری | ✅ | ❌ |
| مخفی نگه داشتن کلیدهای امنیتی (Secrets) | ✅ | ❌ |
| کاهش حجم نهایی فایلهای جاوااسکریپت سایت | ✅ | ❌ |
استفاده از تعاملاتی مثل کلیک (onClick) و تغییرات فرم | ❌ | ✅ |
استفاده از Stateها و افکتها (useState, useEffect) | ❌ | ✅ |
استفاده از ابزارهای مرورگر مثل localStorage یا window | ❌ | ✅ |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app