رمزگشایی رندر سمت سرور در Next JS: راهنمای مبتدی

رندر سمت سرور (SSR) نقشی حیاتی در توسعه وب مدرن ایفا می‌کند، عملکرد بهبود یافته، بهینه‌سازی موتور جستجو (SEO) و بهبود تجربه کاربر را ارائه می‌کند. Next.js، یک چارچوب محبوب React، اجرای SSR را ساده می کند.

قبل از رندر سمت سرور، توسعه frontend اساساً بر تکنیک های رندر سمت مشتری (CSR) متکی بود. این شامل بارگیری HTML اولیه از سرور و استفاده از جاوا اسکریپت در سمت مشتری (مرورگر) برای تعاملات بعدی و به روز رسانی محتوا بود. برنامه‌های تک صفحه‌ای (SPA) مانند React، Angular و Vue.js محبوب شدند و تجربه‌های پویا برای کاربر را بدون بارگیری مجدد کامل صفحه فراهم کردند. ارتقای پیشرونده و پیش رندر نیز استفاده شد. با این حال، SSR به عنوان راه حلی برای بهبود عملکرد، سئو و تجربه کاربر با پیش رندر کردن محتوا در سرور و ارائه بارهای اولیه صفحه بهینه شده ظاهر شد. SSR مزایای رندر سمت سرور و سمت سرویس گیرنده را برای توسعه پیشروی پیشرفته ترکیب می کند.

رندر Sever-Side با ارائه بارگذاری سریع‌تر صفحه، بهبود سئو و افزایش امنیت، توسعه‌دهندگان را به هیجان می‌آورد.

این مقاله رندر سمت سرور در Next.js را برای مبتدیان با درک مفهوم و نحوه اجرای رندر سمت سرور در برنامه Next.js توضیح می‌دهد.

معرفی Next.js

Next.js یک چارچوب React است که به شما بلوک‌هایی برای ایجاد برنامه‌های وب می‌دهد.

در چارچوب، به این معنی است که Next.js ابزار و پیکربندی مورد نیاز برای React را مدیریت می‌کند و معماری، ویژگی‌ها و بهینه‌سازی اضافی را ارائه می‌کند.

Next.js تمام ویژگی‌های React را برای ایجاد رابط کاربری در اختیار شما قرار می‌دهد و ویژگی‌هایی مانند مسیریابی، واکشی داده‌ها، سمت مشتری (CSR) و رندر سمت سرور (SSR) را برای تجربه بهتر توسعه‌دهنده و کاربر نهایی ارائه می‌دهد.

Next.js یک ساختار پروژه ساده را ارائه می دهد که فایل ها و دایرکتوری های کلیدی عبارتند از:

• pages: شامل صفحات برنامه شما می باشد. هر فایل جاوا اسکریپت داخل این دایرکتوری نشان دهنده یک مسیر منحصر به فرد است.
• public: دارایی های ثابت مانند تصاویر، شیوه نامه ها و فونت ها را ذخیره می کند.
• اجزاء: اجزای React قابل استفاده مجدد را نگه می دارد.

GitHub

مخزن GitHub پروژه را می توانید در اینجا بیابید.

پیش نیازها

قبل از شروع، شما باید پیش نیازهای زیر را داشته باشید:

• دانش اولیه HTML، CSS و جاوا اسکریپت.
• آشنایی با React
• درک مفاهیم توسعه frontend.
• آشنایی با Node.js و npm.
• IDE یا ویرایشگر متن برای کدنویسی.

راه اندازی یک پروژه Next.js

برای شروع با Next.js، مراحل زیر را دنبال کنید:

1. Node.js و npm (Node Package Manager) را اگر قبلا نصب نکرده اید نصب کنید.
2. ترمینال خود را باز کنید و دستور زیر را اجرا کنید تا Next.js CLI به صورت سراسری نصب شود: npm install create-next-app.
3. با اجرا یک پروژه Next.js جدید ایجاد کنید npx create-next-app my-next-app در دایرکتوری پروژه مورد نظر شما
4. پس از ایجاد پروژه، با استفاده از آن به دایرکتوری پروژه بروید cd my-next-app یا نامی که برای دادن فهرست پروژه خود انتخاب می کنید.
5. سرور توسعه را با دستور شروع کنید npm run dev.
6. مرورگر خود را باز کنید و بازدید کنید http://localhost:3000 برای مشاهده اجرای برنامه Next.js خود.

آشنایی با رندر سمت سرور (SSR)

رندر سمت سرور شامل تولید HTML بر روی سرور و ارسال آن به مشتری (مرورگر) است. بر خلاف رندر سمت مشتری (CSR)، که در آن HTML در مرورگر تولید می‌شود، SSR مزایای متعددی را ارائه می‌کند، مانند بهبود زمان بارگذاری صفحه، سازگاری با SEO، و رندر اولیه بهتر که به همان اندازه تجربه کاربری بهتری را ارائه می‌دهد.

ایجاد صفحات با رندر سمت سرور

بیایید یک صفحه اصلی ایجاد کنیم که از رندر سمت سرور در Next.js استفاده کند. این مراحل را دنبال کنید:

1. در داخل فهرست صفحات، یک فایل جاوا اسکریپت جدید به نام users.js ایجاد کنید.
2. در users.js یک کامپوننت کاربردی React که نمایانگر صفحه کاربران است را تعریف کنید.

import React from 'react';

    const Users = ({ users }) => {
      return (
        <div>
          <h1>Users</h1>
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.name}</li>
            ))}
          </ul>
        </div>
      );
    };

    export async function getServerSideProps() {
      // Fetch data from jsonplaceholder API 
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const users = await response.json();

      return {
        props: {
          users,
        },
      };
    }    
    export default Users;

در کد بالا، مؤلفه Users را تعریف می‌کنید که فهرستی از کاربران واکشی شده از API jsonplaceholder را ارائه می‌کند.

را getServerSideProps تابع به شما این امکان را می دهد که داده ها را در سمت سرور بیاورید و آنها را به عنوان ابزار به جزء صفحه خود منتقل کنید. بر روی هر درخواستی که به صفحه داده می شود اجرا می شود و آن را برای داده های پویا که باید در زمان اجرا واکشی شوند مناسب می کند. را getServerSideProps تابع یک شی را با ویژگی های زیر به عنوان آرگومان می گیرد:

context: شی context حاوی اطلاعاتی در مورد درخواست فعلی، مانند پارامترهای درخواست است context.params، پارامترهای پرس و جو context.queryو درخواست HTTP context.req و پاسخ context.res اشیاء.

• پارامترها: params دارایی در داخل context شی شامل پارامترهای مسیر پویا است که در نام فایل صفحه مشخص شده است. به عنوان مثال، اگر یک صفحه پویا با نام فایل دارید [userId]js، مقدار مربوط به params شامل واقعی خواهد شد userId مقدار از URL
• پرس و جو: query دارایی در داخل context شی شامل پارامترهای پرس و جو ارسال شده در URL است. به عنوان مثال، اگر URL است /user?id=1، context.query خواهد بود { id: '1' }.

را getServerSideProps تابع باید به عنوان یک تعریف شود async تابعی که یک شی را با ویژگی های زیر برمی گرداند:

• لوازم جانبی: props ویژگی شیء است که حاوی داده هایی است که می خواهید به مؤلفه صفحه خود منتقل کنید. داده ها را می توان از یک API، یک پایگاه داده یا هر منبع داده دیگری دریافت کرد. را props شی به صورت سریال و برای مشتری ارسال می شود.
• اعتبار مجدد: revalidate ویژگی اختیاری است و تعیین می‌کند که Next.js چقدر باید صفحه را در سرور دوباره تولید کند. این تعداد ثانیه هایی را مشخص می کند که پس از آن یک درخواست جدید باعث رندر مجدد صفحه می شود. این برای صفحاتی که داده هایی دارند که مرتباً تغییر می کنند مفید است. مثلا، revalidate: 10 صفحه را هر 10 ثانیه بازسازی می کند تا مطمئن شود صفحه به روز است.
• را getServerSideProps عملکرد ناهمزمان مدیریت کارآمد عملیات واکشی داده ها را در حین رندر سمت سرور در Next.js امکان پذیر می کند و اطمینان می دهد که سرور پاسخگو باقی می ماند و می تواند چندین درخواست را به طور همزمان انجام دهد.

سرور توسعه Next.js را با آن اجرا کنید npm run dev و بازدید کنید http://localhost:3000/users. شما باید ببینید Users صفحه با لیست کاربران ارائه شده در سرور.

مدیریت مسیرهای پویا

Next.js روشی بصری برای مدیریت مسیرهای پویا ارائه می دهد. در اینجا مثالی از ایجاد مسیرهای پویا و واکشی داده برای آن مسیرها آورده شده است:

1. یک فایل جدید به نام ایجاد کنید **[userId].js** داخل دایرکتوری صفحه
2. که در [userId].js، یک مؤلفه React عملکردی که نشان دهنده مسیر پویا است را تعریف کنید.

import React from 'react';

const Post = ({ user }) => {
  return (
    <div>
      <h1>{user.title}</h1>
      <p>{user.body}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${params.userId}`);
  const user= await response.json();

  return {
    props: {
      user,
    },
  };
}

export default Post;

در این مثال، شما یک مسیر پویا ایجاد می کنید که یک کاربر خاص را بر اساس آن واکشی می کند userId پارامتر ارسال شده در URL سپس کاربر واکشی شده در سمت سرور ارائه می شود.

نتیجه

رندر سمت سرور یک تکنیک قدرتمند است که کارایی و سئو اپلیکیشن های وب را افزایش می دهد. Next.js اجرای رندر سمت سرور را با ارائه یک تجربه توسعه یکپارچه ساده می کند. در این راهنمای مبتدی، شما اصول اولیه رندر سمت سرور در Next.js، از جمله راه اندازی یک پروژه، ایجاد صفحات با رندر سمت سرور، اجرای پیش رندر و ذخیره سازی، و مدیریت مسیرهای پویا را بررسی کردید.

امیدوارم از این مقاله چیزهای زیادی یاد گرفته باشید. لطفا نظراتتون رو بنویسید 😊
من دوست دارم با شما در ارتباط باشم توییتر | لینکدین | GitHub

منابع

اسناد رسمی JS بعدی
اسناد API Jsonplaceholder