در طی چند سال گذشته ، Angular با برخی از تغییرات مهم و مهم رشد کرده است. یکی از این تغییرات شامل ارائه سمت سرور به جای کتابخانه مانند آن بود که قبلاً با زاویه ای جهانی ، سلف SSR زاویه ای (Angular Universal) قرار داشت (@angular/ssr).
اکنون ، هر برنامه زاویه ای ، خارج از جعبه ، به طور پیش فرض ، از SSR استفاده می کند ، که یک ویژگی امتناع است. برای بیشتر افراد ، هنگام ساختن برنامه های زاویه ای ، یا باید در سمت سرور ارائه شود یا خیر. به عنوان مثال ، یک داشبورد در پشت دیوار ورود به سیستم به SSR احتیاج ندارد ، در حالی که یک سایت تجارت الکترونیکی به آن احتیاج دارد.
با این حال ، برنامه هایی وجود دارد که برخی از صفحات در پشت دیوار ورود به سیستم و برخی از مسیرهای عمومی وجود دارد. اگر به مثال سایت تجارت الکترونیکی خود برگردیم ، صفحات پرداخت ، صفحات سفارش و غیره ، نمونه هایی هستند که احتمالاً در پشت دیوار ورود به سیستم قرار دارند ، در حالی که صفحات محصول عمومی هستند.
اگر SSR را در چنین مسیری در پشت دیوار ورود به سیستم فعال کنید و شخصی از صفحه بازدید کند ، Angular صفحه ورود به سیستم را ارائه می دهد (یا هر کجا که نگهبانان AUTH آنها را هدایت می کنند). با بارگیری صفحه ، Angular تعیین می کند که کاربر وارد سیستم شده و آنها را به صفحه واقعی تغییر مسیر داده است ، همانطور که در زیر آمده است:
این بدان معناست که کاربر قبل از دیدن صفحه واقعی ، فلاش را در صفحه ورود مشاهده می کند. این اتفاق می افتد زیرا در مورد ما ، زمینه تأیید اعتبار فقط در مرورگر موجود است ، نه سرور ، و از این رو ، روی سرور ، کاربر وارد سیستم نشده است ، بلکه در مرورگر کاربر است.
اگر با این کار روبرو شدید ، مانند من ، قبل از Angular 19 ، باید SSR را غیرفعال کنید ، زیرا این یک تجربه کاربر بهینه نیست. با این حال ، تیم زاویه ای که در Angular 19 معرفی شده است ، مفهوم حالت های ارائه برای مسیرهای فردی ، یا آنچه را که رندر هیبریدی نامیده می شود.
به جای همه مسیرها یا در سمت مشتری (CSRD) یا سرور ارائه شده (SSRD) ، اکنون می توانید برای هر مسیر انتخاب کنید. مهمتر از آن ، آنها همچنین توانایی انجام تولید سایت استاتیک (SSG) را برای مسیرهای جداگانه اضافه کردند.
بیایید چند کد را ببینیم.
تنظیم مسیرهای سرور به صورت دستی
لطفاً توجه داشته باشید که این ویژگی در پیش نمایش توسعه دهنده است ، بنابراین با احتیاط از آن استفاده کنید. برای کسب اطلاعات بیشتر در مورد این معنی ، لطفاً لینک زیر را در مورد نسخه زاویه ای در اینجا بررسی کنید.
قبل از اینکه بتوانیم بیشتر پیش برویم ، اطمینان حاصل کنید که شما در Angular 19 هستید. Angular مفهومی را برای مسیرهای سرور معرفی کرده است که در آن می توانید اعلام کنید که برای مسیرهای خاص چه کاری انجام دهید. برای مثال در بالا ، ما دو مسیر داریم ، همانطور که در زیر آمده است:
export const routes: Routes = [
{
path: '',
component: HomeComponent,
canActivate: [redirectIfNotLoggedInGuard],
},
{
path: 'login',
component: LoginComponent,
canActivate: [redirectIfLoggedInGuard],
},
];
برای پیکربندی مسیر فوق ، می توانیم با استفاده از مسیر و حالت رندر مورد نیاز ، تنظیمات مسیر سرور را اضافه کنیم. من تصمیم گرفتم که آنها را در کنار یکدیگر ذخیره کنم ، اما می تواند در پرونده مسیرهای سرور آن زندگی کند – هرچه قایق شما را شناور کند.
...
import { RenderMode, ServerRoute } from '@angular/ssr';
...
export const serverRoutes: ServerRoute[] = [
{
path: '',
renderMode: RenderMode.Client,
},
{
path: 'login',
renderMode: RenderMode.Server,
},
];
حالت رندر یکی از سه مقدار را می پذیرد ، RenderMode.Clientبا RenderMode.Serverوت RenderMode.Prerenderبشر برای مثال بسیار ساده ما در بالا ، ما هستیم RenderMode.Client برای صفحه اصلی ، بنابراین در سمت سرور ارائه نمی شود ، و سپس RenderMode.Server برای صفحه ورود ، آن را به سمت سرور ارائه می دهد.
لطفاً توجه داشته باشید ، در حال حاضر ، باید تمام مسیرها را به مسیرهای سرور اضافه کنید.
پس از تنظیم مسیرهای خود ، در نهایت باید مسیرهای سرور را در پیکربندی برنامه خود ارائه دهیم تا Angular بتواند از آنها استفاده کند. ما با استفاده از provideServerRouting عملکرد و عبور در مسیرهای سرور که ما پیکربندی کردیم.
...
import { provideServerRendering } from '@angular/platform-server';
import { provideServerRouting } from '@angular/ssr';
...
export const appConfig: ApplicationConfig = {
providers: [
...
provideServerRouting(serverRoutes),
provideRouter(routes),
...
],
};
و همین است. اگر به مثال خود برگردیم ، می بینید که فلاش صفحه ورود کاملاً از بین رفته است.
می توانید کد برنامه فوق را در اینجا پیدا کنید.
راه اندازی برای پروژه های جدید
البته این زاویه ای است که ما در مورد آن صحبت می کنیم. با جادوی شماتیک ، می توانید روند فوق را خودکار کنید. فقط باید مسیرهای خود را پیکربندی کنید.
اگر یک پروژه جدید را شروع می کنید ، Angular یک پرچم فراهم می کند --server-routing این کار را برای پروژه جدید هنگام تنظیم آن امکان پذیر می کند.
ng add @angular/ssr --server-routing
پایان
در این مقاله مختصر ، ما به حالت های رندر در زاویه ای و چگونگی استفاده از آنها برای ارائه تجربه کاربری بهتر برای کاربران خود نگاه کردیم. قبل از این ، گزینه های شما محدود بود. در صورت شکستن UX کاربران خود می توانید از SSR استفاده کنید یا از SSR استفاده نکنید. اما با استفاده از حالت های رندر ، می توانید SSR را در جایی که منطقی باشد ، امکان پذیر کنید ، صفحات پیش نویس که حس می کنند و صفحات CSR که معقول هستند ، و از تجربه کاربری بسیار بهتری برای کاربران ما اطمینان حاصل می کنند.
این از من است ، و تا دفعه بعد ، برنامه نویسی مبارک.
