ترکیب SSR و تعامل کلاینتی در Next.js

در توسعه برنامه‌های React محور، یکی از چالش‌های اصلی، ترکیب رندر سمت سرور برای سئو با تعاملات کلاینتی مثل onClick و useState است. خوشبختانه Next.js این مشکل را به‌سادگی حل کرده و به ما اجازه می‌دهد تا از بهترین‌های هر دو دنیا استفاده کنیم.

چرا SSR مهم است؟

با استفاده از SSR (Server-Side Rendering)، محتوای HTML از قبل در سرور تولید می‌شود و موتورهای جستجو مثل گوگل می‌توانند آن را بخوانند. این موضوع باعث بهبود رتبه SEO سایت می‌شود.

چرا تعامل کلاینتی نیاز داریم؟

کاربران امروزی انتظار دارند که صفحات وب تعاملی باشند. دکمه‌های like، فرم‌ها، آکاردئون‌ها و سایر اجزای پویا باید در مرورگر اجرا شوند، نه سرور.

آیا میدانید مدرسه پرنیان، دوره آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟کلیک کنید

راهکار در Next.js: جدا کردن کد SSR و Client

Next.js به ما اجازه می‌دهد که در صفحه اصلی (page.js) از SSR استفاده کنیم و تعاملات را به یک کامپوننت کلاینتی با use client بسپاریم.

فایل app/products/page.js – رندر سمت سرور:

import ProductItem from '../../components/ProductItem';

async function getProducts() {
  const res = await fetch('https://fakestoreapi.com/products', { cache: 'no-store' });
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div>
      <h1>Products (SEO-Friendly)</h1>
      {products.map((product) => (
        <ProductItem key={product.id} product={product} />
      ))}
    </div>
  );
}

فایل components/ProductItem.js – تعامل کلاینتی:

'use client';

import { useState } from 'react';

export default function ProductItem({ product }) {
  const [liked, setLiked] = useState(false);

  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h2>{product.title}</h2>
      <button onClick={() => setLiked(!liked)}>
        {liked ? '❤️ Liked' : '🤍 Like'}
      </button>
    </div>
  );
}

در page.js از fetch سمت سرور استفاده کنید و cache: 'no-store' بزنید.

فقط کامپوننت‌هایی که نیاز به تعامل دارند را client component کنید.

عنوان‌ها و تگ‌های مهم مثل <h1> را در SSR بنویسید.

امیدواریم از این مقاله ترکیب SSR و تعامل کلاینتی در Next.js نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.