بارگیری کار از مشتریان به سرور شما با اقدامات سرور Next آسان است.
نسخه 13.4 Next.js با یک روتر App پایدار و توانایی انجام جهش داده با اقدامات سرور ارائه شد. این ویژگی یک تغییر مطلق بازی است زیرا به شما امکان می دهد جهش داده ها را به طور کامل از اجزای سرور انجام دهید. این امر مزایای زیادی را در زمینه هایی مانند سرعت، امنیت و عملکرد کلی برنامه به ارمغان می آورد.
بیاموزید که عملکردهای سرور چیست و چگونه از این ویژگی جدید در برنامه Next.js خود استفاده کنید.
اقدامات سرور چیست؟
اقدامات سرور به شما این امکان را می دهد که عملکردهای یکباره سمت سرور را در کنار اجزای سرور خود بنویسید. این بسیار بزرگ است زیرا دیگر نیازی به نوشتن مسیرهای API هنگام ارسال فرم ها یا انجام هر نوع جهش داده دیگر از جمله جهش داده های GraphQL ندارید.
شما می توانید توابعی داشته باشید که روی سرور شما اجرا شوند و سپس می توانید آنها را از اجزای کلاینت یا سرور فراخوانی کنید. این یک ویژگی آلفا در Next.js 13.4 است و بر روی React Actions ساخته شده است. استفاده از اقدامات سرور منجر به کاهش جاوا اسکریپت سمت سرویس گیرنده می شود و می تواند به شما در ایجاد فرم های پیشرفته کمک کند.
نمونه اقدامات سرور
با اقدامات سرور، می‌توانید جهش‌هایی را در Next.js روی سرور انجام دهید. نگاهی به این ویژگی جدید با مثال صفحه Next.js بیندازید که فرمی را ارائه می دهد که به شما امکان می دهد یک پست ایجاد کنید.
این هم واردات:
import Link from "next/link"
import FormGroup from "@/components/FormGroup"
import { revalidateTag } from "next/cache"
import { redirect } from "next/navigation"
حالا برای کد ایجاد پست. این تابع یک عمل سرور است. روی سرور اجرا می شود و عنوان و متن پست را به API (که پست را در پایگاه داده ایجاد می کند) ارسال می کند:
async function createPost(data) {
"use server"
const title = data.get("title")
const body = data.get("body")
await fetch("http://127.0.0.1/posts", {
header: {"Content-Type": "application/json"},
method: POST,
body: JSON.stringify({title, body})
})
revalidateTag("posts")
redirect("/")
}
این تابع عنوان و متن پست را دریافت می کند که سپس از طریق یک درخواست POST به نقطه پایانی /posts می فرستد. سپس حافظه پنهان را مجبور می‌کند تا محتوای مرتبط با برچسب “پست‌ها” را به‌روزرسانی کند و به صفحه اصلی بازگردانده شود.
در اینجا فرمی برای جمع آوری عنوان و متن پست جدید آمده است:
export default NewPostForm() {
return (
<form action={createPost}>
<div>
<FormGroup>
<label htmlFor="title">Title</label>
<input type="text" name="title" id="title" />
</FormGroup>
</div>
<div>
<FormGroup>
<label htmlFor="title">Body</label>
<textarea type="text" name="body" id="body"> <textarea/>
</FormGroup>
</div>
<div>
<button> Save </button>
</div>
</form>
)
}
می بینید که فرم هیچ منطقی در رابطه با ایجاد پست ندارد، فقط یک عمل فرم: تابع ()createPost. به یاد بیاورید که تابع createPost دارای دستورالعمل “استفاده از سرور” است که اعلام می کند همه چیز در آن تابع باید روی سرور اجرا شود.
همه کدها روی سرور اجرا می شوند و کلاینت شما چیزی در مورد آن نمی داند. این به این دلیل است که فرم یک مؤلفه سرور است و چیزی وجود ندارد که به صورت پویا روی کلاینت ارائه شود.
وقتی روی دکمه Save کلیک می کنید، Next.js تابع ()createPost را فراخوانی می کند. این عنوان و متن را به عنوان داده فرم ارسال می کند، که برای ذخیره اطلاعات به API محلی پست می شود.
اعتبار مجدد پست
در پایین تابع ()createPost خط کد زیر است:
revalidateTags("posts")
برای درک اینکه این تابع چه کاری انجام می دهد، تصور کنید که یک صفحه پست دارید. در داخل کامپوننت posts، تابعی به نام getPosts() را فراخوانی می‌کنید تا همه پست‌ها را از پایگاه داده خود دریافت کرده و آنها را برای کاربر نمایش دهد:
export default async function Posts(){
const posts = await getPosts()
return (
<div>
{posts.map(post => {
<PostCard key={post.id} {...post} />
})}
</div>
)
}
تابع getPosts () به شکل زیر است:
async function getPosts() {
const res = await fetch("https://127.0.0.1/posts?sort=title", {
next: {tags: ["posts"], revalidate: 3600 }
})
return res.json()
}
این تابع گزینه بعدی را برای واکشی ارسال می کند و به شما امکان می دهد یک دوره اعتبار سنجی مجدد را تنظیم کنید. به‌طور پیش‌فرض، هر درخواست واکشی که در داخل مؤلفه سرور می‌کنید برای همیشه در حافظه پنهان ذخیره می‌شود. ردیابی حافظه پنهان و تازه کردن آن در صورت لزوم بخش مهمی از واکشی داده ها در Next.js است.
کد بالا به Next.js می‌گوید که داده‌های پست‌ها را حداکثر تا یک ساعت (3600 ثانیه) کش کند. پس از یک ساعت، داده ها کهنه می شوند و Next.js آن را به روز می کند تا جدیدترین داده ها را از پایگاه داده دریافت کند.
به یاد داشته باشید که تابع createPost() پس از اتمام بقیه کار خود revalidateTag (“پست ها”) را فراخوانی می کند. این کار Next.js را مجبور می‌کند تا آن داده‌ها را که باید شامل پست جدیدی باشد که برنامه ایجاد کرده است را دوباره واکشی کند.
اثبات اینکه کد شما روی سرور اجرا می شود
برای اطمینان از اینکه همه کدها روی سرور اجرا می‌شوند، می‌توانید عبارت log کنسول زیر را در تابع createPost() اضافه کنید:
console.log("Running on the server")
سپس، سعی کنید با کلیک بر روی دکمه ارسال، یک پست جدید ایجاد کنید. اگر کد شما روی سرور اجرا می شود، آن پیغام گزارش در ترمینال شما نمایش داده می شود. اما اگر روی کلاینت اجرا می شود، لاگ در کنسول مرورگر نشان داده می شود.
این باعث می‌شود که اطلاعات حساس مانند متغیرهای محیطی، اتصالات پایگاه داده و رمزهای عبور بدون ترس از قرار گرفتن در معرض مشتری بر روی سرور بی‌خطر باشد. سپس می توانید رشته ها را از فایل .env خود در برنامه Next.js خود بخوانید.
ممکن است بخواهید استفاده از عملکردهای سرور را برای نسخه های بعدی Next.js از نسخه 13.4، مخصوصاً در مرحله تولید، رزرو کنید. اما هنوز هم بسیار هیجان انگیز است که ببینیم این ویژگی به کجا می رود، زیرا دائماً کاری را انجام می دهد که می توانید با انتقال بیشتر و بیشتر موارد به سرور انجام دهید. این باید نوشتن برنامه های مشتری شما را آسان تر کند و روند توسعه آنها را بسیار لذت بخش تر کند.
درباره مهاجرت به Next.js بیشتر بیاموزید
بسیاری از توسعه دهندگان فرانت اند از React برای توسعه UI استفاده می کنند. اما به لطف ویژگی هایی مانند رندر سمت سرور و تولید سایت استاتیک، بسیاری از این توسعه دهندگان برنامه های خود را برای استفاده از Next.js مهاجرت می کنند. این انتقال بسیار ساده است زیرا React از نظر نحوی بسیار شبیه Next.js است.
عملکرد اضافی و افزایش امنیت، مهاجرت را حتی بیشتر ضروری می کند. توانایی داشتن اجزای سمت سرور، همراه با اقدامات سرور جدیدی که به تازگی پوشش دادیم، Next.js را در مقایسه با React ساده، گزینه ای امن تر و کارآمدتر می کند. به عنوان یک توسعه دهنده React، باید یاد بگیرید که چگونه برنامه خود را به Next.js منتقل کنید.