آشنایی با سرور کامپوننت در React 18 و Next js 13 فرانت‌ کست

در ادامه، ویژگی ها و قابلیت های Next.Js 13 توسعه داده شد تا تیم های توسعه دهنده بتوانند به جای سایت یا اپلیکیشن تک صفحه ای، برای طراحی اپلیکیشن های پیچیده و کاملا متفاوت اقدام کنند. Next.js، یک فریمورک منبع باز است که از آن برای ساخت اپلیکیشن های تک صفحه ای یا SPA استفاده می شود. این فریمورک از بهترین روش های فریمورک React استفاده می کند و در نتیجه شما می توانید با تعداد کد کمتر و با سرعت بیشتر، اپلیکیشن تک صفحه ای بسازید. NEXT.Js بهترین و جدیدترین روش های توسعه و طراحی اپلیکیشن را در اختیار توسعه دهنده قرار داده است و به دلیل سهولت استفاده، مدت زمانی که صرف یادگیری می کنید را کاهش می دهد. Next.js بر اساس فریمورک Webpack Asset Pipeline و React ساخته شده است.

شما اگر بخواید از موارد زیر استفاده کنید، حتما باید اون بخش رو کلاینت کامپوننت بکنید واگرنه ارور میگیرید. در واقع سیستم، همون سیستم تفاوت getServerSideProps و useEffect هست که توی نکست 12 داشتیم. React می‌تواند روی کلاینت و سرور رندر بگیرد و ما می‌توانیم محیط رندر را در سطح کامپوننت انتخاب کنیم. Rendering، کدی که می‌نویسیم را به رابط کاربری که کاربر با آن تعامل دارد تبدیل می‌کند. با React 18 و Next.js 13 تغییر کاملی در نحوه رندر کردن کد React به وجود آمده است.

ببینید اگر شما با نکست جی اس کار بکنید و یه وب سایت واقعی بسازید و آنلاینش کنید و روی سئوش کار بکنید، میبینید که Next js فوق العادهست. نکته جالب در مورد این رویکرد جدید این است که می‌توانیم در برنامه خود کلاینت کامپوننت‌ها و سرور کامپوننت‌ها را به هم متصل کنیم. React در پشت صحنه، به طور یکپارچه کارکرد هر دو محیط را باهم ادغام می‌کند. یکی دیگر از ویژگی های اصلی Nextjs 13 Turbopack (alpha) است که یک باندلر جدید مبتنی بر Rust است که جایگزین Webpack به عنوان باندلر پیش فرض برای پروژه های Nextjs می شود. Webpack یک ابزار پرکاربرد برای بسته‌بندی ماژول‌های جاوا اسکریپت به بسته‌هایی است که می‌توانند به مرورگر ارائه شوند.

همچنین، ویژگی جدید next/image@ بارگذاری تصاویر و لیزی لودینگ (Lazy Loading) را آسان می کند. با این حال، پویا بودن همیشه با محدودیت های متعددی همراه است. ارتقاء یک برنامه استاتیک تنها راه برای طراحی اپلیکیشن پویا بود، مگر اینکه شما یکی از غول های وب مانند گوگل یا فیس بوک باشید. در واقع نیاز به پویایی اپلیکیشن باعث شد تا عیوب اپلیکیشن های استاتیک مشخص شود. برای مثال حجم بالایی از کدهای جاوا اسکریپت سمت کلاینت برای ایجاد یک اپلیکیشن استاتیک نیاز بود که البته درانتها نیز اپلیکیشن استاتیکی که ساخته اید با چیزی که کاربر خواسته است همخوانی نداشت. Next.js فریمورکی است که از مدت ها قبل در دسترس کاربران قرار گرفته و تعداد کاربران زیادی را جذب کرده است.

با کامپایل کد Rust در ماژول‌های Wasm، Turbopack می‌تواند سریع‌تر از Webpack در هر دستگاه یا محیطی اجرا شود. برای استفاده از یک Client Component در Next.js، یک فایل در داخل /appایجاد می‌کنیم و قبل از هر گونه importای، دایرکتیو “use Client” را در بالای فایل اضافه می‌نماییم. سرور به رایانه‌ای در مرکز داده اشاره دارد که کد برنامه ما را ذخیره می‌کند، درخواست مشتری را دریافت کرده، مقداری محاسبات روی آن انجام می‌دهد و در نهایت پاسخ مناسب را ارسال می‌کند. با استفاده از ماژول جدید next/font@ می توانید اندازه و نوع فونت های سایت، اپ و وب اپ را در طول زمان ساخت تغییر دهید. این ماژول انواع فونت را دانلود می کند و آنها را در پوشه public/ میزبانی می کند.

یعنی هر وقت خواستید برای یه دکمه، یه آن کلیک تعریف کنید، باید برای اون دکمه یه کلاینت کامپوننت تعریف کنید... طی چند ماه گذشته، تیم Next.js در تلاش بوده تا Next.js را با اجزای سرور React و ویژگی‌های React 18 ادغام کند. این ویژگی‌های جدید اکنون برای امتحان در فهرست برنامه جدید در دسترس هستند. از طرفی روتر فعال کردن واکشی داده در اپلیکیشن و اشتراک گذاری آنها در کامپوننت ها را ساده تر می کند. به عنوان مثال، اشتراک گذاری داده های پویا در بین صفحات می تواند مکان یابی کد اپلیکیشن را با روتر آسان تر کند.

تجربه توسعه دهندگان نشان می دهد که مولفه های بهینه سازی تصویر در Next.js 13 کاملا بهبود یافته اند. Next.js 13 Ecommerce App from Scratch دوره آموزشی نحوه ساخت یک برنامه تجارت الکترونیک کاملا کاربردی با استفاده از آخرین ویژگی های Next.js 13 می باشد که توسط آکادمی آنلاین یودمی منتشر شده است. این دوره افراد را از طریق تکنیک های توسعه وب مدرن، از جمله رندر سمت سرور ( SSR)، تولید سایت استاتیک (SSG)، ادغام API و مسیریابی پویا. افراد یاد خواهند گرفت که چگونه ویژگی‌هایی مانند کاتالوگ محصولات، سبد خرید، احراز هویت کاربر، دروازه‌های پرداخت و داشبورد مدیریت را پیاده‌سازی کنند. این دوره بر بهترین شیوه‌ها برای کد مقیاس‌پذیر و کارآمد در حین استفاده از ساختار دایرکتوری برنامه Next.js، اجزای سرور React و تکنیک‌های بهینه‌سازی پیشرفته تأکید می‌کند.

یکی از محبوب ترین قابلیت های Next.js، پیدا کردن مسیر درست انتقال داده یا مسیریابی (روتر) بصورت خودکار است. شما می توانید به طور خودکار و بدون انجام تنظیمات و تنها با قرار دادن یک فایل در داخل پوشه مخصوص، مسیریابی در اپلیکیشن را ایجاد کنید. به این طریق، توسعه دهندگان Next.js فرصت های عالی خواهند داشت که بهترین مسیریاب های موجود را ایجاد کنند. یعنی هر صفحه ی Next js ای رو که شما فراخوانی میکنید، یا به صورت کامل یا یه بخشیش توی سرور ساخته میشه و فرستاده میشه به کلاینت یا در واقع مرورگر کاربر. اگر این صفحه، کلاینت کامپوننت هم داشته باشه، بعد از اینکه صفحه توی مرورگر کاربر نمایش داده شد، کامپوننت های کلاینتی هم ساخته میشن و به کاربر نمایش داده میشن.

این موضوع یک پیروزی بزرگ برای React است و توسط Next.js 13 پذیرفته شده است.

اما تیم سازنده آن در جدیدترین نسخه با معرفی قابلیت های Next.Js 13 جدید و بهبود ویژگی های قبلی، حوزه توسعه سایت  و اپلیکیشن را وارد عصر جدیدی کرده است. در نسخه جدید این فریمورک، turbopack جایگزین webpack شده و قابلیت های رندر کردن، چیدمان و مسیریابی نیز بهبود یافته اند. با استفاده از این ویژگی ها و قابلیت های جدید فریمورک Next.Js توسعه و طراحی سایت، طراحی اپلیکیشن و وب اپلیکیشن را بسیار راحت تر کرده است. Next.js، به دلیل سهولت استفاده و تجربه خوب توسعه دهندگان، به یکی از محبوب ترین فریم ورک های طراحی وب اپلیکیشن تبدیل شده است. علاوه بر این، عملکرد آن به نحوی است که برای رسانه ها، SaaS و شرکت های خرده فروشی جذابیت بالایی دارد. نسخه اصلی Next.js مبتنی بر یک فریمورک React برای سرورهای پویای داخل سایت ها بود.

اندازه bundle جاوااسکریپت سمت کلاینت زمانی کاهش می‌یابد که وابستگی‌های بزرگ در سرور حفظ شوند. زمانی که تعامل کاربر جدیدی وجود داشته باشد، همچنان می‌توانیم از کلاینت کامپوننت‌ها استفاده کنیم. اما به غیر از آن، اندازه bundle جاوااسکریپت زمان اجرای سمت کلاینت حداقل می‌باشد. React Server Componentها این امکان را برای توسعه‌دهندگان فراهم می‌کنند تا از زیرساخت سرور استفاده کنند. قبل از معرفی سرور کامپوننت‌ها، React فقط قادر به رندر سمت کلاینت بود. اما با معرفی سرور کامپوننت‌ها، وابستگی‌های بزرگ می‌توانند به طور کامل روی سرور باقی بمانند و در نتیجه کارایی آن‌ها افزایش یابد.

کلاینت کامپوننت به کامپوننتی میگیم که رندرش سمت کلاینت انجام میشه و وقتی صفحه از سرور رسید، ساخته میشه. سرور کامپوننت به کامپوننتی میگیم که سمت سرور ساخته میشه و فرستاده میشه به فرانت. اما توی نکست جی اس سیزده، تیم نکست تلاش کردن تا این مشکل رو حلش کنن. سرور کامپوننت‌ها به ما این امکان را می‌دهند که کامپوننت‌ها را روی سرور رندر کنیم و مقدار جاوااسکریپت ارسال شده به کلاینت را کاهش دهیم. کلاینت کامپوننت میشه کامپوننتی که سمت توی مروگر کاربر رندر میشه ولی سرور کامپوننت میشه کامپوننتی که توی سرور رندر میشه.

قبل از اینکه اینو بگم، لطفا دقت بکنید که صفحات همیش سرور ساید هستنا. توی مقاله، می خوایم به تفاوت های client components و server components در Next.js بپردازیم. یکی از مهم ترین موضوعاتی که هر Next js Developerای باید بدونه. ما فقط باید زمانی که کامپوننت‌ها از هوک‌های کلاینت مانند useState یا useEffect استفاده می‌کنند، آن ها را به عنوان “use Client” علامت‌گذاری کنیم. نکته‌ای که وجود دارد این است که قبل از React 18، اصلی‌ترین راه برای رندر برنامه با استفاده از React، کاملاً روی کلاینت انجام می‌شد. میتونید از طریق لینک هایی که انتهای مقاله میزارم، برید و ببینیدشون...

شما می توانید به راحتی با رندر سمت سرور یا رندر سمت کلاینت، یک اپلیکیشن بسازید و آن را در چندین پلتفرم از جمله وب، اندروید و آی او اس اجرا کنید. 70 درصد از شرکت کنندگان در انجمن Next.js گفته اند که وقتی از یک کامپوننت تصویر Next.js در تولید اپلیکیشن یا طراحی سایت استفاده کرده اند، کارآیی و سرعت سایت بهبود یافته است. Vercel کار بهینه سازی تصاویر را برای بارگذاری سریع تر انجام می دهد. به لطف همکاری بین فریمورک و زیرساخت ابری، اکنون میلیاردها تصویر در وب بدون تلاش توسعه دهندگان بهینه سازی شده اند. در پایان دوره، فراگیران یک برنامه تجارت الکترونیک آماده تولید خواهند داشت که به طور کامل از ابتدا ساخته شده است. ببینید ما توی نکست 12، باید توی پوشه Pages همه صفحاتمون رو بسازیم اما توی نکست سیزده، یه پوشه جدید معرفی شده با اسم پوشه App.

مشکل اینه که تعداد فایل هایی که از سرور میفرسته به فرانت اند زیاده. این موضوع باعث میشه که سرعت اولیه وب سایت یه مقدار بیاد پایین. سرور کامپوننت یک مفهوم جدید است که در React 18 معرفی شده و توسط نسخه Next.js 13 در پوشه /app پذیرفته شده است. همه کامپوننت‌های داخل دایرکتوری Next.js /app به طور پیش‌فرض سرور کامپوننت هستند. اما Turbopack قصد دارد با استفاده از Rust، یک زبان سطح پایین که عملکرد و همزمانی بالایی را ارائه می دهد، بر این محدودیت ها غلبه کند. Turbopack از پشتیبانی بومی Rust برای WebAssembly (Wasm) استفاده می کند، که یک فرمت باینری است که می تواند بر روی هر پلتفرمی که از جاوا اسکریپت پشتیبانی می کند اجرا شود.

در ادامه معرفی قابلیت های Next.Js 13 باید گفت که در حال حاضر، یک روش جدید برای رندر کردن سرور، واکشی داده ها (data fetching) و چیدمان صفحه ایجاد شده است. امروزه تقریبا کار با ویژگی ها و قابلیتی های جدید فریمورک Next.js و React راحت تر شده است. در واقع Nextjs یک فریمورک محبوب React برای ساخت برنامه های وب سریع و پویا است. ویژگی هایی مانند رندر سمت سرور، تولید سایت ایستا، بهینه سازی تصویر، تقسیم کد و موارد دیگر را ارائه می دهد. در اکتبر 2021، Nextjs آخرین نسخه خود، Nextjs 13 را منتشر کرد که برخی از ویژگی‌ها و پیشرفت‌های جدید هیجان‌انگیز را معرفی می‌کند.

با این حال، Webpack به دلیل پیاده سازی مبتنی بر جاوا اسکریپت، محدودیت هایی از نظر عملکرد و مقیاس پذیری دارد. Webpack، یک باندلر منبع باز است که توسعه front-end را تغییر داد و به عنوان پایه و اساس ساخت Next.js قرار گرفت. Turbopack اپلیکیشن های بزرگ را 700 برابر سریع تر از Webpack و 10 برابر سریعتر از Vite به روز رسانی می کند. این کار کمک می‌کند تا از کم‌ترین مقدار جاوااسکریپت در سمت کلاینت اطمینان حاصل کنیم. زیرا هدف ما این است که کم‌ترین مقدار جاوااسکریپت در سمت کلاینت ارسال شود.

در این مقاله، برخی از نکات برجسته Nextjs 13 و اینکه چگونه آنها می توانند برای توسعه وب شما مفید باشند را بررسی خواهیم کرد. تصاویر، فونت ها، اسکریپت ها و حتی پیش نمایش های محتوا در شبکه های اجتماعی از رایج ترین ابزارها و محتواهای وب هستند که باید با یک وب SDK واقعی پوشش داده شوند. بنابراین، توسعه وب به سرمایه گذاری کامل روی ابزار، زمان اجرا، زیرساخت ابری و اکوسیستم فریمورک Next.js نیاز دارد. Vercel تلاش کرده است تا به توسعه دهندگان این فرصت را بدهد که به شکلی بهتر کار کنند. به عنوان مثال، ویژگی جدید نکست جی اس 13 (next/font package@) اضافه کردن فونت ها به اپلیکیشن را بسیار راحت تر کرده است.

ما توی نکست 12، کلا یه نوع کامپوننت داشتیم ولی توی نکست 13، دو نوع، پس وقتی کامپوننت ها بشن دو دسته، قطعا از تعداد کامپوننت هایی که از سمت server میاد کم میشه. پس همون مشکلی که ابتدای مقاله گفتم( تعداد فایل های زیادی که از سرور میاد) کمتر میشه، در نتیجه، ما سئوی بهتری خواهیم داشت. با انتشار نسخه Next.js 13، یک دایرکتوری /appجدید به پروژه اضافه می‌شود که رویکردهای جدیدتری برای rendering و fetching داده‌ها دارد و همچنین از جدیدترین سرور کامپوننت های React استفاده می‌کند. بهتر است کامپوننت‌هایی که به هوک‌های کلاینت وابسته نیستند را بدون دستورالعمل رها کنیم تا زمانی که توسط کلاینت کامپوننت دیگری import نمی‌شوند، به طور خودکار به عنوان یک سرور کامپوننت رندر شوند. در Next.js، اجزای کلاینت نیز می‌توانند از قبل روی سرور رندر شوند و روی کلاینت hydrate گردند. طبق معیارهای تیم Nextjs، درواقع Turbopack می‌تواند تا ۷۰۰ برابر سریع‌تر از Webpack برای برخی کارها مانند کوچک‌سازی و تکان دادن درختان ارائه دهد.

این بدان معناست که Turbopack می تواند زمان ساخت را به میزان قابل توجهی کاهش دهد و تجربه توسعه دهنده را برای پروژه های بزرگ مقیاس Nextjs بهبود بخشد. شاید بسیاری تصور می کردند که نسخه جدیدی از فریمورک Next.js را نخواهند دید و با همان ویژگی ها و قابلیت ها به کار خود ادامه خواهد داد. در همین راستا در مطلب امروز می خواهیم ویژگی ها و قابلیت های Next.js 13، جدیدترین نسخه Next.js را بررسی کنیم. اگرچه می‌توانیم از هر دو کلاینت کامپوننت و سرور کامپوننت در یک برنامه استفاده کنیم، اما محدودیتی در React وجود دارد که در آن نمی‌توانیم یک سرور کامپوننت را در یک کلاینت کامپوننت import کنیم. کلاینت به مرورگر دستگاه کاربر اشاره دارد که درخواستی را برای کد برنامه ما به سرور ارسال می‌کند. سپس پاسخ سرور را به رابطی تبدیل می‌کند که کاربر بتواند با آن تعامل داشته باشد.