آموزش React: رندر سمت سرور

معرفی Introduction

• آنچه شما باید بدانید What you should know

• رندر سمت سرور را با React بیاموزید Learn server-side rendering with React

1. راه اندازی 1. Setting Up

• ابزارهای کروم و فایرفاکس Chrome and Firefox tools

• راه حل: چرا از SSR استفاده می کنید؟ Solution: Why would you use SSR?

• کتابخانه ها و ابزارهای مورد نیاز را نصب کنید Install the required libraries and tools

• چالش: چرا از SSR استفاده می کنید؟ Challenge: Why would you use SSR?

• SSR: چه، چگونه و چرا SSR: What, how, and why

2. از Next.js برای ساخت SSR استفاده کنید 2. Use Next.js to Build SSR

• اعمال Redux را اضافه کنید Add Redux actions

• داده ها را برای وسایل اضافه کنید Add data for props

• معرفی Next.js با React Introducing Next.js with React

• راه حل: چرا از Redux برای SSR استفاده کنیم؟ Solution: Why use Redux for SSR?

• فروشگاه Redux و راه اندازی را اضافه کنید Add Redux store and setup

• کاهش دهنده های Redux را اضافه کنید Add Redux reducers

• اجزای اولیه را از قالب اضافه کنید Add initial components from template

• چالش: چرا از Redux برای SSR استفاده کنیم؟ Challenge: Why use Redux for SSR?

3. رندر سمت سرور با Node 3. Server-Side Rendering with Node

• چالش: چرا از Node یا Express برای SSR استفاده کنیم؟ Challenge: Why use Node or Express for SSR?

• سرور Express یا Next.js اولیه ایجاد کنید Create initial Express or Next.js server

• پیوندها و صفحات را با Express یا Next.js اضافه کنید Add links and pages with Express or Next.js

• راه حل: چرا از Node یا Express برای SSR استفاده کنیم؟ Solution: Why use Node or Express for SSR?

• مسیرهای اکسپرس را اضافه کنید Add the Express routes

4. تقسیم کد 4. Code Splitting

• سایر ابزارهای موجود برای تقسیم کد Other tools available for code splitting

• راه حل: هدف از تقسیم کد چیست؟ Solution: What is the purpose of code splitting?

• چالش: هدف از تقسیم کد چیست؟ Challenge: What is the purpose of code splitting?

• تقسیم کد در Next.js Code splitting in Next.js

نتیجه Conclusion

• روتر واکنش با SSR React Router with SSR

• مراحل بعدی Next steps