آموزش رندر سمت سرور با React و Redux

سرفصل ها و درس ها

شروع شدن Getting Started

• چند یادداشت A Few Notes

• منابع دوره Course Resources

• به انجمن ما بپیوندید! Join Our Community!

• چرا رندر سمت سرور؟ Why Server Side Rendering?

• بررسی اجمالی SSR SSR Overview

بیایید کدنویسی کنیم! Let's Get Coding!

• نمای کلی برنامه App Overview

• رویکرد معماری سرور Server Architecture Approach

• فایل استارتر Package.Json Starter Package.Json File

• راه اندازی دیگ بخار Boilerplate Setup

• راه اندازی اکسپرس Express Setup

• تابع RenderToString The RenderToString Function

• JSX روی سرور JSX on the Server

• بسته وب سمت سرور Server Side Webpack

• تنفس و بررسی Breather and Review

پیکربندی سرور Server Configuration

• بازسازی و راه اندازی مجدد Rebuilding and Restarting

• رندر سمت سرور، جاوا اسکریپت ایزومورف، جاوا اسکریپت جهانی Server Side Rendering, Isomorphic Javascript, Universal Javascript

• سمت مشتری JS Client Side JS

• بسته های مشتری Client Bundles

• فهرست عمومی The Public Directory

• چرا Client.js؟ Why Client.js?

• راه اندازی مشتری Client Bootup

Refactoring برای Cleaner Code Refactoring for Cleaner Code

• ادغام پیکربندی Webpack Merging Webpack Config

• راه اندازی تک اسکریپت Single Script Startup

• نادیده گرفتن فایل ها با Webpack Ignoring Files with Webpack

• کمک کننده رندر Renderer Helper

افزودن ناوبری Adding Navigation

• پیاده سازی پشتیبانی از روتر React Implementing React Router Support

• BrowserRouter در مقابل StaticRouter BrowserRouter vs StaticRouter

• پیکربندی مسیر Route Configuration

• عدم تطابق HTML HTML Mismatch

• اطلاعات بیشتر در مورد پیکربندی مسیر More on Route Configuration

• لایه های مسیریابی Routing Tiers

یکپارچه سازی پشتیبانی برای Redux Integrating Support for Redux

• Users API The Users API

• چهار چالش بزرگ Four Big Challenges

• ایجاد فروشگاه مرورگر Browser Store Creation

• ایجاد فروشگاه سرور Server Store Creation

• FetchUsers Action Creator FetchUsers Action Creator

• کاهش دهنده کاربران The Users Reducer

• کاهش دهنده واردات Reducer Imports

• جزء UsersList UsersList Component

• بابل پلی پر Babel Polyfill

بارگذاری اطلاعات سمت سرور Server Side Data Loading

• تشخیص تکمیل بارگذاری داده Detecting Data Load Completion

• راه حل شماره 1 برای بارگذاری داده ها Solution #1 for Data Loading

• راه حل شماره 2 برای بارگذاری داده ها Solution #2 for Data Loading

• کتابخانه پیکربندی روتر React The React Router Config Library

• به روز رسانی موارد استفاده از مسیر Updating Route Uses

• تابع MatchRoutes The MatchRoutes Function

• توابع LoadData LoadData Functions

• ارسال فروشگاه Store Dispatch

• در انتظار تکمیل بارگذاری داده Waiting for Data Load Completion

• تنفس و بررسی Breather and Review

سازماندهی با اجزای صفحه Organization with Page Components

• رویکرد صفحه The Page Approach

• Refactoring به صفحات Refactoring to Pages

• بازآفرینی صادرات صفحه Refactoring Page Exports

• آبرسانی دولت مشتری Client State Rehydration

• بیشتر در مورد Rehydration State Client More on Client State Rehydration

• وضعیت دامپینگ به الگوها Dumping State to Templates

• کاهش حملات XSS Mitigating XSS Attacks

احراز هویت در دنیای رندر سمت سرور Authentication in a Server Side Rendering World

• مسائل احراز هویت Authentication Issues

• احراز هویت از طریق پروکسی Authentication via Proxy

• چرا JWT نه؟ Why Not JWT's?

• راه اندازی پروکسی Proxy Setup

• ارائه دهنده به API Communication Renderer to API Communication

• نمونه های Axios با Redux Thunk Axios Instances with Redux Thunk

• کلاینت Axios Instance Client Axios Instance

• نمونه سرور Axios Server Axios Instance

• جزء سرصفحه The Header Component

• افزودن کامپوننت برنامه Adding an App Component

• ساخت هدر Building the Header

• در حال واکشی وضعیت Auth Fetching Auth Status

• تماس با FetchCurrentUser Calling FetchCurrentUser

• اتصال هدر Connecting the Header

• سفارشی سازی هدر Header Customization

• یک ظاهر طراحی هدر Header Styling

رسیدگی به خطا Error Handling

• 404 صفحه یافت نشد 404 Not Found Pages

• پیاده سازی صفحه NotFound Implementing the NotFound Page

• زمینه StaticRouter StaticRouter Context

• ویژگی مدیریت The Admin Feature

• Admins Action Creator and Reducer Admins Action Creator and Reducer

• کامپوننت مسیر مدیران Admins Route Component

• تست مسیر مدیران Testing Admins Route

• Promise.all Failures Promise.all Failures

• راه حل رسیدگی به خطا شماره 1 Error Handling Solution #1

• راه حل رسیدگی به خطا شماره 2 Error Handling Solution #2

• راه حل رسیدگی به خطا شماره 3 Error Handling Solution #3

• مؤلفه مورد نیاز تأیید اعتبار The Require Auth Component

• پیاده سازی Require Auth Implementing Require Auth

• نیاز به Auth در حال استفاده Require Auth in Use

• مدیریت تغییر مسیرها Handling Redirects

افزودن پشتیبانی بهتر سئو Adding Better SEO Support

• برچسب های متا Meta Tags

• تنظیم برچسب ها با کلاه ایمنی Setting Tags with Helmet

• واکنش کلاه ایمنی در عمل React Helmet in Practice

• برچسب های عنوان پویا Dynamic Title Tags

• RenderToString در مقابل RenderToNodeStream RenderToString vs RenderToNodeStream

بسته شدن Wrapup

• مراحل بعدی و جمع بندی Next Steps and Wrapup

موارد اضافی Extras

• جایزه! Bonus!