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

مقدمه Introduction

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

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

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

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

• ابزارهای Chrome و Firefox Chrome and Firefox tools

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

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

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

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

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

• م componentsلفه های اولیه را از الگو اضافه کنید Add initial components from template

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

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

• اقدامات Redux را اضافه کنید Add Redux actions

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتیجه Conclusion

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