فکر کنید «استفاده از مشتری» یعنی CSR؟ مسلط به این سوال مصاحبه Next.js

Summarize this content to 400 words in Persian Lang
اگر شما یک توسعه دهنده جوان هستید که با Next.js کار کرده اید، احتمالاً در مصاحبه های فنی با این سوال مواجه شده اید:”هست use client منحصراً برای رندر سمت مشتری (CSR)؟”اگر می توانید با اطمینان پاسخ دهید “نه، اجزا با use client همچنین می توانید از SSR (Server-Side Rendering) استفاده کنید!”، تأثیر قوی بر مصاحبه کننده خود خواهید گذاشت.

در این مقاله، ما بر روی SSR و اجزای سرور تمرکز خواهیم کرد تا به وضوح متوجه شویم که چه چیزی چیست use client واقعاً معنی دارد و فرآیند هیدراتاسیون مستلزم چیست. ما همچنین بررسی خواهیم کرد که چگونه تمام اجزای React قبل از ظهور Server Components جزء مشتری بودند و مزایای عملکردی Server Components را بررسی خواهیم کرد تا به شما کمک کند تا کاملاً برای مصاحبه های Next.js آماده شوید.

آشنایی با SSR، CSR و Hydration

به طور سنتی، برنامه های React اغلب با CSR (Rendering سمت مشتری) کار می کنند. مرورگر بسته‌های اولیه HTML و JS را از سرور دریافت می‌کند، اما صفحه اولیه فقط حاوی یک خالی است , leaving users staring at a blank screen until JS loads and rendering completes. This delays initial loading times and negatively impacts SEO.

One solution to this problem is SSR (Server-Side Rendering). With SSR, React components are rendered to HTML on the server before being sent to the client, allowing users to see actual content instead of a blank screen during initial load. However, this HTML is still in a “dry (Markup-only)” state without interactivity, and only becomes fully interactive after the browser loads JavaScript and React completes its hydration process by registering event handlers.

What is Hydration?

Hydration is the process where static HTML rendered on the server is matched with React’s virtual DOM on the client side, and event handlers are attached to create an interactive UI. In other words, after receiving “structure-only” HTML through SSR, once JavaScript loads and hydrate() executes, event and state management logic becomes active on top of this HTML structure.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون کاربران می‌توانند بلافاصله پس از بارگذاری صفحه، محتوا را ببینند و به محض آماده شدن JS، قابلیت تعامل در دسترس قرار می‌گیرد.

متمایز کردن اجزای سرور از اجزای مشتری

Server Components که پس از React 18 معرفی شد، الگوی جدیدی از “کامپوننت هایی که فقط روی سرور اجرا می شوند” را ارائه کرد. در Next.js، همه مؤلفه‌ها به‌طور پیش‌فرض مؤلفه‌های سرور هستند و فقط مؤلفه‌هایی که باید روی کلاینت اجرا شوند به صراحت اعلام می‌کنند. use client.

کامپوننت های سرور به صورت تکه های HTML به مشتری تحویل داده می شوند و از هیدراتاسیون حذف می شوند. این بدان معناست که HTML بازگردانده شده توسط مؤلفه‌های سرور به سادگی در مرورگر «همان‌طور که هست» وارد می‌شود، بدون اینکه کنترل‌کننده‌های رویداد یا حالت در سمت کلاینت تزریق شود. در نتیجه، اجزای سرور حداقل اندازه بسته جاوا اسکریپت را مصرف می کنند و به طور قابل توجهی به بهینه سازی عملکرد کمک می کنند.

از سوی دیگر، مؤلفه ها اعلام می کنند use client مانند اجزای سنتی React رفتار کنید. آنها HTML اولیه را از طریق SSR تولید می کنند، سپس فرآیند هیدراتاسیون را طی می کنند تا تعامل را فعال کنند. بنابراین، use client اجزا می توانند از SSR استفاده کنند و از فرآیند هیدراتاسیون که ترکیبی از SSR + CSR است، پشتیبانی کنند.

قبل از مؤلفه های سرور: همه مؤلفه ها مؤلفه های مشتری بودند

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

پس از معرفی اجزای سرور، اکنون می‌توانیم «قطعات استاتیکی که فقط باید نمایش داده شوند» را به‌عنوان مؤلفه‌های سرور بدون هیچ اعلانی مدیریت کنیم، در حالی که قطعاتی که نیاز به تعامل دارند را می‌توان با علامت‌گذاری کرد. use client. این جداسازی واضح بهینه سازی بسته نرم افزاری کارآمدتر و عملکرد بهتر را ممکن می کند.

چگونه اجزای سرور کار می کنند: درج شکاف و ترکیب HTML

کامپوننت‌های سرور، قطعه‌های HTML را بر روی سرور رندر می‌کنند و در اختیار مشتری قرار می‌دهند، در حالی که درخت رندر React یک «حفره» برای این قطعه‌ها ایجاد می‌کند. HTML نهایی با قرار دادن این قطعه ها در سوراخ های مربوطه ایجاد می شود. در اینجا یک نمودار ASCII ساده است که این فرآیند را نشان می دهد:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این فرآیند، اجزای سرور شامل بسته‌های جاوا اسکریپت نمی‌شوند. در نتیجه، آنها نمی توانند کنترل کننده رویداد یا وضعیت را ثبت کنند، اما این در واقع برای قسمت هایی که فقط به HTML ایستا نیاز دارند مفید است. کاهش اندازه بسته جاوا اسکریپت منجر به نمایش سریع‌تر صفحه نمایش اولیه می‌شود.

Acing Your Interview: با اطمینان به “آیا “استفاده از مشتری” فقط برای CSR است؟”

به عنوان مثال، ممکن است در یک مصاحبه با این سوال روبرو شوید:

مصاحبه کننده: “قطعات را با use client فقط از CSR پشتیبانی می کند؟”

پاسخ مدل:”خیر، در Next.js، همه اجزا به طور پیش‌فرض جزء سرور هستند و فقط اجزایی که باید روی کلاینت اجرا شوند به صراحت اعلام می‌کنند. use client. این اجزای کلاینت HTML اولیه را از طریق SSR تولید می‌کنند و سپس فرآیند هیدراتاسیون را طی می‌کنند تا تعامل را در سمت مشتری فعال کنند. بنابراین، use client قطعات همچنین می توانند از SSR استفاده کنند. از سوی دیگر، اجزای سرور از هیدراتاسیون حذف می‌شوند و تنها HTML ایستا را ارائه می‌دهند که اندازه بسته جاوا اسکریپت را کاهش می‌دهد و عملکرد را بهبود می‌بخشد.”

اگر بتوانید این را به وضوح توضیح دهید، مصاحبه کننده متوجه می شود که شما درک کاملی از اجزای سرور، SSR و مفاهیم هیدراتاسیون دارید.

رندر سمت سرور و اجزای سرور متقابلاً انحصاری نیستند

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

پاداش: «استفاده از سرور» چیست؟

“استفاده از سرور” مفهومی متفاوت از اجزای سرور است که برای تعریف اقدامات سرور استفاده می شود. Server Actions به مشتریان این امکان را می دهد که مستقیماً توابع سرور را فراخوانی کنند و آنها را برای انجام وظایف سمت سرور مانند ارسال فرم یا به روز رسانی داده ها مفید می کند.

خلاصه

تمام اجزای Next.js به طور پیش فرض جزء سرور هستند
اجزای کلاینت به صریح نیاز دارند use client اعلامیه
اجزای کلاینت می توانند از SSR استفاده کنند: رندر HTML سمت سرور و به دنبال آن هیدراتاسیون
کامپوننت های سرور HTML ایستا را بدون هیدراتاسیون ارائه می کنند، اندازه بسته جاوا اسکریپت را کاهش می دهند و عملکرد را بهبود می بخشند.
'استفاده از سرور' یک ویژگی جداگانه برای تعریف اقدامات سرور است
اجزای سرور مکمل SSR هستند، نه جایگزین آن: آنها با هم، تجربه و عملکرد بهینه ای را برای کاربر فراهم می کنند

با داشتن این دانش، با اطمینان به سوالات مصاحبه پاسخ دهید. تاکید کنید که “از اجزای کلاینت نیز از SSR پشتیبانی می کند” و توضیح دهید که چگونه مولفه های سرور منجر به بهینه سازی بسته نرم افزاری و بهبود عملکرد می شود. برجسته کردن این نکته که همه مؤلفه‌ها به‌طور پیش‌فرض مؤلفه‌های سرور هستند و فقط مؤلفه‌های کلاینت به دستورالعمل «استفاده از مشتری» نیاز دارند، درک عمیق شما از معماری Next.js را نشان می‌دهد.

[Server: SSR] --(HTML)--> [Browser: Initial Display] 
                                      | 
                                      v 
                          (JS Load, hydrate()) 
                                      |
                                      v
                    [Browser: Event Handlers Attached, VDOM Sync]

[Server: RSC(Render)] --> [HTML snippet] 
                                | 
                                v 
                [React Render Tree]: "hole" creation
                                | 
                                v 
                    Combined HTML --> Client transmission 
                    (Server Components excluded from hydration)