تفسیر کردن (رندر کردن)

رندرینگ کدهایی که شما می نویسید را به رابط کاربری تبدیل می کند. React و Next.js به شما امکان می دهند تا برنامه های وب ترکیبی (hybrid) ایجاد کنید که در آنها بخش هایی از کد شما می تواند در سرور یا کلاینت رندر شود. این بخش به شما کمک می کند تا تفاوت های بین این محیط های رندرینگ، استراتژی ها و زمان های اجرا را درک کنید.

اصول اولیه

برای شروع، آشنایی با سه مفهوم اساسی وب مفید است:

• محیط هایی که کد برنامه شما می تواند در آنها اجرا شود: سرور و کلاینت.
• چرخه عمر درخواست-پاسخ که با بازدید یا تعامل کاربر با برنامه شما آغاز می شود.
• مرز شبکه که کد سرور و کلاینت را از هم جدا می کند.

محیط های رندرینگ Rendering Environments

دو محیط وجود دارد که برنامه های وب می توانند در آنها رندر شوند: کلاینت و سرور.

• کلاینت به مرورگر روی دستگاه کاربر اشاره دارد که یک درخواست برای کد برنامه شما به سرور ارسال می کند. سپس پاسخ را از سرور به رابط کاربری تبدیل می کند.
• سرور به کامپیوتر در یک مرکز داده اشاره دارد که کد برنامه شما را ذخیره می کند، درخواست ها را از کلاینت دریافت می کند و یک پاسخ مناسب را ارسال می کند.

در گذشته، توسعه دهندگان مجبور بودند هنگام نوشتن کد برای سرور و کلاینت از زبان های مختلف (به عنوان مثال جاوا اسکریپت، PHP) و فریم ورک های مختلف استفاده کنند. با React، توسعه دهندگان می توانند از زبان (جاوا اسکریپت) و فریم ورک (مانند Next.js یا فریم ورک مورد نظر شما) یکسانی استفاده کنند. این انعطاف پذیری به شما امکان می دهد بدون نیاز به تغییر متن، به طور یکپارچه برای هر دو محیط کد بنویسید.

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

درک این تفاوت ها کلید استفاده موثر از React و Next.js است. ما در صفحات کامپوننت های سرور و کامپوننت های کلاینت به طور مفصل تر به تفاوت ها و موارد استفاده خواهیم پرداخت، فعلاً بیایید به ساختن پایه و اساس خود ادامه دهیم.

چرخه عمر درخواست-پاسخ Request-Response Lifecycle

به طور کلی، همه وب سایت ها از یک چرخه عمر درخواست-پاسخ یکسان پیروی می کنند:

1. اکشن کاربر: کاربر با یک برنامه وب تعامل می کند. این می تواند کلیک کردن روی یک لینک، ارسال یک فرم یا تایپ مستقیم یک URL در نوار آدرس مرورگر باشد.
2. درخواست HTTP: کلاینت یک درخواست HTTP (opens in a new tab) به سرور ارسال می کند که حاوی اطلاعات لازم در مورد اینکه چه منابعی در حال درخواست است، چه روشی در حال استفاده است (به عنوان مثال GET، POST) و در صورت نیاز داده های اضافی است.
3. سرور: سرور درخواست را پردازش می کند و با منابع مناسب پاسخ می دهد. این فرآیند ممکن است چند مرحله مانند مسیریابی، دریافت داده و غیره طول بکشد.
4. پاسخ HTTP: پس از پردازش درخواست، سرور یک پاسخ HTTP به کلاینت ارسال می کند. این پاسخ حاوی یک کد وضعیت (که به کلاینت اطلاع می دهد که آیا درخواست موفقیت آمیز بوده یا خیر) و منابع درخواستی (به عنوان مثال HTML، CSS، جاوا اسکریپت، دارایی های استاتیک و غیره) است.
5. کلاینت: کلاینت منابع را برای رندر کردن رابط کاربری تجزیه می کند.
6. اکشن کاربر: پس از رندر شدن رابط کاربری، کاربر می تواند با آن تعامل داشته باشد و کل پردازش دوباره شروع می شود.

بخش مهمی از ساخت یک برنامه وب ترکیبی، تصمیم گیری در مورد نحوه تقسیم کار در چرخه عمر و محل قرارگیری مرز شبکه است.

مرز شبکه Network Boundary

در توسعه وب، مرز شبکه یک خط مفهومی است که محیط های مختلف را از هم جدا می کند. برای مثال، کلاینت و سرور یا سرور و store داده.

در React، شما هر کجا که منطقی تر است، محل قرارگیری مرز شبکه کلاینت-سرور را انتخاب می کنید.

در پس زمینه، کار به دو بخش تقسیم می شود: گراف ماژول کلاینت client module graph و گراف ماژول سرور. گراف ماژول سرور server module graph شامل تمام کامپوننت هایی است که در سرور رندر می شوند و گراف ماژول کلاینت شامل تمام کامپوننت هایی است که در کلاینت رندر می شوند.

ممکن است مفید باشد که به گراف های ماژول به عنوان یک نمایش بصری از نحوه وابستگی فایل ها در برنامه شما به یکدیگر فکر کنید.

شما می توانید از قرارداد "use client" React برای تعریف مرز استفاده کنید. همچنین یک قرارداد "use server" وجود دارد که به React می گوید برخی از کارهای محاسباتی را در سرور انجام دهد.

ساخت برنامه های ترکیبی Building Hybrid Applications

هنگام کار در این محیط ها، مفید است که به جریان کد در برنامه خود به عنوان یک جهته فکر کنید. به عبارت دیگر، در طول یک پاسخ، کد برنامه شما در یک جهت جریان می یابد: از سرور به کلاینت.

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

در عمل، این مدل توسعه دهندگان را تشویق می کند تا قبل از ارسال نتیجه به کلاینت و تعاملی کردن برنامه، ابتدا به آنچه می خواهند در سرور اجرا کنند فکر کنند.

این مفهوم زمانی واضح‌تر می‌شود که ببینیم چگونه می‌توانید کامپوننت های کلاینت و سرور را در درخت کامپوننت یکسانی به هم متصل کنید. interleave client and server components