شروع کار با Angular Universal و SSR در Angular

عنوان Angular Universal فرآیند رندر سمت سرور (SSR) برنامه شما به HTML روی سرور (یعنی Node.js) است.

برنامه‌های معمولی Angular برنامه‌های تک صفحه‌ای (معروف به SPA) هستند که در آن رندر در مرورگر انجام می‌شود . این فرآیند را می توان به عنوان رندر سمت کلاینت(CSR) نیز نامید.

در این مقاله به درک عمیقی خواهیم پرداخت: Angular Universal چیست، انواع مختلف SSR چیست، و چگونه می‌توانیم برنامه‌های خود را برای تبدیل شدن به Universal تنظیم کنیم.

اگر به Angular Universal علاقه مند بوده اید، یا به دنبال اطلاعاتی در مورد Angular Universal هستید، ممکن است برای شروع کار با مشکل مواجه شده باشید، زیرا در چند سال گذشته تغییرات زیادی رخ داده است و اطلاعات نادرست تاریخ گذشته یا غلط زیادی وجود دارد!

در این مجموعه چند قسمتی به موارد زیر می پردازیم:

• عنوان Angular Universal چیست؟
• کار با Angular Universal
• معماری و انواع SSR.

توجه : قبلاً Angular Universal با نامangular2-universalدر npm شناخته می‌شد . مطمئن شوید که هر مقاله یا کدی را بر اساس آن نادیده بگیرید، زیرا مدت‌هاست که منسوخ شده است!

حالا Angular Universal چیست؟

بحث Angular Universal نام مستعار رندر سمت سرور (به اختصار SSR) با Angular است . از نظر فنی پکیج مربوط به آن درangular/platform-server@ یافت می شود .

اکنون که کمی از این موضوع فهمیدیم، بیایید به این موضوع بپردازیم که چگونه می‌توانید رندر سرور برنامه‌های Angular خود را همین حالا شروع کنید!

شروع با Angular Universal

در این آموزش قصد داریم شروع کار با Angular Universal را با کمک Angular CLI بررسی کنیم.

1. ابتدا، اجازه دهید یک پروژه Angular-CLI جدید ایجاد کنیم:
   مطمئن شوید که آخرین Angular-CLI را دارید . npm i --g @angular/cli

توجه: در صورت تمایل می توانید از این موضوع صرف نظر کنید و مستقیماً سعی کنید Universal را به برنامه موجود خود اضافه کنید.

ng new some-amazing-project

حالا بیایید Angular Universal ? را اضافه کنیم.

از Angular-CLI نسخه 6.1، کد ng addطرح شماتیک اضافه شده است که به شما امکان می دهد به سرعت چهارچوب مورد نیاز، سرور Node express و سایر ارتباطات مورد نیاز برای شروع کار را ایجاد کنید.

نصب شماتیک Angular Universal

به پوشه اصلی پروژه Angular-CLI خود که می‌خواهید Universal را به آن اضافه کنید وارد شوید، و شماتیک زیر را اجرا کنید.

به clientProject [name]-- توجه کنید .به فایل angular.json خود نگاهی بیندازید و مطمئن شوید که "نام" پروژه ای را که می خواهید رندر سمت سرور را به آن اضافه کنید، قرار داده اید.

2. در مرحله بعد، ازng addبرای نصب شماتیک ها در برنامه ما استفاده کنید.

ng add @nguniversal/express-engine --clientProject [name]
// angular.json
{ ...
  &quotprojects&quot: {
    &quotsome-amazing-project&quot: {}
}

در مثال بالا، می‌خواهیم از کد زیر استفاده کنیم :

ng add @nguniversal/express-engine --clientProject some-amazing-project

چگونه Angular Universal را برای برنامه خود اجرا کنیم؟

معمولاً ما ng serveرااجرا می‌کنیم تا برنامه معمولی CSR خود را اجرا کنیم.

وقتی می خواهیم نسخه رندر شده سمت سرور خود را بسازیم و اجرا کنیم، باید از چند اسکریپت استفاده کنیم که به package.json ما اضافه شده است .

قبل از اینکه به آن اسکریپت‌های مهم بپردازیم، می‌خواهم 2 موضوع مهم مختلف در دنیای رندر سمت سرور (صرف نظر از JS Framework / غیره) را پوشش دهم…

رندر سمت سرور (SSR) پویا و Static Pre-rendering

رندر سمت سرور (SSR) پویا مفهومی است که وقتی یک سرور Node ، هر زمان مسیری مورد بازدید قرار می‌گیرد، به صورت پویا برنامه را تولید می‌کند - آن رشته را به مرورگر برمی‌گرداند.

پیش رندر استاتیک زمانی است که می‌خواهیم فهرستی از مسیرها را از قبل رندر کنیم و فایل‌های استاتیک ایجاد کنیم (به عنوان مثال: index.html، about-us.html، و غیره) و سپس از یک سرور انتخابی خود برای ارائه آن فایل‌ها در آینده استفاده کنیم.

پس چگونه بفهمیم کدام یک را چه زمانی انتخاب کنیم؟

پیش‌رندر (Pre-rendering) معمولاً عملکرد بهتری به شما می‌دهد، زیرا ما منتظر نیستیم تا سرور تمام APIهای لازم را در برنامه شما را بررسی کند، و هیچ چیزی نباید «serialized» شود، در حال حاضر تمام HTMLهای serialized شده برنامه شما برای هر کدام از فایل های Routes آماده شده است.

در اینجا لیست خوبی از سوالاتی است که قبل از بررسی مسیری که باید طی کنیم با کلاینت در نظر می گیریم.

زمان استفاده از Static Pre-Rendering:

• برنامه شما به خودی خود نسبتا Static است.
  (یا حداقل مسیرهایی که می‌خواهید از pre-render کنید)
  به عنوان مثال: homepage | about us | contact us
• بخش‌های بسیار پویا از سایت شما (و آنهایی که پشت یک مانع Login/Auth قرار دارند) را می‌توان به نسخه نرم‌افزار رندر شده سمت کلاینت (CSR) برنامه شما در نظر گرفت و Angular می‌تواند به طور معمول خود را بوت استرپ کند.
• برنامه شما اغلب به روز نمی شود.
  هر زمان که تغییراتی در مسیرهای استاتیک مورد نیاز باشد، می‌توانید به سادگی اسکریپت buildرا دوباره اجرا کنید و پوشه‌ dist را که حاوی همه فایل‌های از پیش رندر شده‌تان است، دوباره منتشر کنید.

زمان استفاده از Dynamic SSR:

• برنامه شما (و مسیرهایی که به SSR نیاز دارید) بسیار پویا هستند
• شما فهرستی از“trending products” | “live data” و غیره دارید، که باید برای هر رندر سمت سرور به درستی پر شود.
• ساختار برنامه های شما بر اساس فایل های JSON یا یک CMS ارائه می شود که در آن هر چیزی ممکن است در هر لحظه تغییر کند.

معمولاً اکثر برنامه‌ها به پیش‌رندر استاتیک نیاز دارند زیرا هر مسیری که در پشت دیوار احراز هویت است سود زیادی از استفاده از SSR نمی‌برد، زیرا یکی از اهداف اصلی، دستاوردهای SEO و performance است.

به یاد داشته باشید، همیشه می توانید جنبه های خاصی از برنامه خود را در طول SSR رندر نکنید و آن بخش های پویا در طول CSR رندر کنید! در بخش بعدی این مجموعه به آن خواهیم پرداخت.

نحوه راه اندازی Angular Universal

با بازگشت به package.json خود ، می بینیم تعداد زیادی اسکریپت جدید اضافه شده است، اما اگر به زیر نگاهی بیندازید - هر دو روش SSR را فوراً در اختیار شما قرار می دهند!

توجه داشته باشید، همچنین می‌توانید این اسکریپت‌ها را به یک اسکریپت کوتاه کنید که هر دو را اجرا می‌کند تا برای شما راحت‌تر شود.

// Dynamic SSR                                                                                                                                     npm run build:ssr && npm run serve:ssr

این برنامه شما را کامپایل می کند و یک سرور Node Express را می چرخاند تا برنامه یونیورسال شما را در آن سرویس دهدhttp://localhost:4000

// Static Pre-Rendering                                                                                                                        
npm run build:prerender && npm run serve:prerender

این اسکریپت برنامه شما را کامپایل می‌کند و فایل‌های برنامه‌ها شما را از قبل رندر(pre-render) می‌کند و یک http-server دمو را اجرا میکند تا بتوانید آن را درhttp://localhost:8080 مشاهده کنید.

توجه: برای استقرار وبسایت استاتیک خود در یک پلتفرم static hosting، شما باید پوشه dist/browser را استقرار دهید، به جای مسیر معمولی dist.

پس چطور می‌توانیم مطمئن شویم که عملکرد درستی داشته است؟

بسته به نسخه‌ای که راه‌اندازی کرده‌اید (پویا/استاتیک)، اگر به آدرس localhost دسترسی داشته باشید، باید ببینید که بین تگ معمولا خالیه <app-root></app-root> حالا دارای محتوا است! ✨ ✨

شما می‌توانید<title>My Application is amazingggg</title> خود را تنظیم کنید.

شما می‌توانید تگ <meta></meta> خود را تنظیم کنید.

محتوای برنامه شما serialized می‌شود.

برای مشاهده محتوای خروجی در داخل<app-root></app-root> ، جاوا اسکریپت یا View Source را غیرفعال کنید.

راه اندازی دستی Angular Universal:

اگر ترجیح می‌دهید همه چیز را خودتان اضافه کنید، نگاهی به ویکی CLI بیندازید که (گام به گام) نحوه افزودن تمام قطعات به یک پروژه CLI را شرح می‌دهد:
https://github.com/angular/angular- cli/wiki/stories-universal rendering

همچنین می توانید نگاهی به مخزن Angular Universal-Starter بیاندازید که نتیجه نهایی مراحل نشان داده شده در ویکی است. تمام فایل های جدید مورد نیاز، راه اندازی سرور اصلی Node و غیره.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.