ساخت اپلیکیشن تک‌صفحه‌ای (SPA) با Next.js – رندر کلاینتی، ناوبری سریع، و واکشی داده پویا

SPA چیست؟

اپلیکیشن تک‌صفحه‌ای (SPA) به اپی گفته می‌شود که تمام رندر، ناوبری، و واکشی داده‌ها در مرورگر انجام می‌شود. هیچ بارگذاری مجدد صفحه وجود ندارد و همه چیز با جاوااسکریپت مدیریت می‌شود.

چرا از Next.js برای SPA استفاده کنیم؟

• تقسیم خودکار کد و کاهش حجم باندل
• ناوبری سریع با next/link و prefetch
• امکان شروع با SPA و افزودن تدریجی قابلیت‌های سرور

الگوی واکشی داده با context و use()

در layout ریشه، واکشی داده را آغاز کنید و Promise را به context منتقل کنید:

// app/layout.tsx
let userPromise = getUser()

<UserProvider userPromise={userPromise}>
  {children}
</UserProvider>

در کامپوننت کلاینتی:

// app/profile.tsx
const { userPromise } = useUser()
const user = use(userPromise)

این الگو باعث تعلیق کامپوننت و فعال‌سازی hydration جزئی می‌شود.

استفاده از SWR در SPA

با SWR می‌توانید داده را هم در کلاینت و هم در سرور واکشی کنید:

// app/layout.tsx
<SWRConfig value={{ fallback: { '/api/user': getUser() } }}>
  {children}
</SWRConfig>

// app/profile.tsx
const { data, error } = useSWR('/api/user', fetcher)

داده اولیه در HTML prerender می‌شود و سپس توسط SWR خوانده می‌شود.

استفاده از React Query

React Query نیز مانند SWR قابل استفاده در Next.js است و امکان واکشی داده در کلاینت و سرور را فراهم می‌کند.

رندر فقط در مرورگر

برای غیرفعال‌سازی prerender در کامپوننت کلاینتی:

const ClientOnlyComponent = dynamic(() => import('./component'), {
  ssr: false,
})

shallow routing در کلاینت

برای تغییر URL بدون بارگذاری مجدد:

window.history.pushState(null, '', `?sort=asc`)

سپس با useSearchParams مقدار را بخوانید.

استفاده از Server Actions در کلاینت

بدون نیاز به API route، می‌توانید از Server Action استفاده کنید:

// app/button.tsx
import { create } from './actions'

<button onClick={() => create()}>Create</button>

خروجی استاتیک (اختیاری)

Next.js امکان تولید سایت کاملاً استاتیک را نیز فراهم می‌کند که در برخی موارد عملکرد بهتری نسبت به SPA دارد.

جمع‌بندی

Next.js ابزاری قدرتمند برای ساخت SPA است — با رندر کلاینتی، ناوبری سریع، و امکان افزودن تدریجی قابلیت‌های سرور. با استفاده از context، SWR، React Query، و Server Actions می‌توانید اپلیکیشنی پویا، سریع و قابل توسعه بسازید.