فهرست
مقدمه
صفحه ۱دانلود و نمایش دمو
نصب و اجرا
ویرایش و توسعه
جزییات نصب و اجرا ـ ۱
صفحه ۲عملیات Build
Start پروژه
جزییات نصب و اجرا ـ ۲
صفحه ۳استفاده از Node Stream
آماده‌سازی Router
ارتباط با API
صفحه ۴تابع FetchData و پارامترهای آن
تابع API و پارامترهای آن
ارتباط کامپوننت‌های React با داده‌های API
صفحه ۵پیاده‌سازی Loading
صفحه ۶پیاده‌سازی تگ‌های سرصفحه
صفحه ۷پیاده‌سازی نقشه‌ی سایت XML
صفحه ۸
در صفحهی قبلی، نحوه‌ی دریافت، نصب و اجرا و توسعهی پروژه، توضیح داده شد. در این صفحه به سراغ بخش نخست از جزییات نصب و اجرا می‌رویم.
جزییات نصب و اجرا ـ ۱
عملیات Build
پیش از آن‌که برنامه را اجرا کنیم باید عملیات Build که Vite وظیفه‌ی آن را بر عهده دارد را انجام داده باشیم (مرحله چهارم نصب).
دستور کامند عملیات build، در بخش scripts در فایل package.json تعریف شده و از دو دستورِ اجرایِ build:client و دستور اجرای build:server تشکیل شده است. Vite وظیفه‌ی اجرای این دو دستور را دارد.
Vite علاوه بر کمک به ساختِ حالتِ ویژه‌ی توسعه، وظیفه‌ی «بسته‌بندی و تقسیم» و «تولید» فایل‌های موردنیاز، در چارچوب SSR را نیز بر عهده دارد.
۱. یک دایرکتوری به نام dist (قابل تغییر) می‌سازد و فایل‌های موردنیاز پروژه را در دو دایرکتوری با نام‌های server و client قرار می‌دهد.
۲. فایل‌های موجود در دایرکتوری public پروژه را در دو دایرکتوری server و client، کپی می‌کند.
۳. با خواندن فایل index.html و پردازش فایل src/entry-client.jsx (فراخوانی شده در درون index.html)، همه‌ی کامپوننت‌های React و کدهای جاوااسکریپت موجود در کامپوننت‌ها را به شکلی که برای مرورگر قابل نمایش باشد، تبدیل می‌کند و در یک فایلِ js. و همه‌ی کدهای css استفاده شده در کامپوننت‌ها را در یک فایل css. در دایرکتوری client قرار می‌دهد. با هر بار دستور build نام تازه‌یی برای این دو فایل می‌گذارد.
۴. فایل index.html تازه‌یی را در دایرکتوری client، با توجه به فایل اصلی index.html، تولید می‌کند. این فایل، کد فراخوانیِ دو فایل CSS و JS تازه تولید شده را در خود دارد. (خط۶و۷ کد زیر).
<!-- dist/shop/client/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!--app-head-->
<script type="module" crossorigin src="./assets/index-4boHzjP3.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DbnvRcPW.css">
</head>
<body>
<div id="root"><!--app-html--></div>
<!--client-script-->
</body>
</html>فایل index.html تازه تولید شده، قرار است در سمت سرور توسط فایل server.mjs خوانده شود، تا محتویات درخواست‌شده‌‌ی کامپوننت‌ها به جای خط کامنت
<!--app-html-->(خط۱۰ کد بالا)، متاتگ‌های Head به جای خط کامنت<!--app-head-->(خط۵) و یک خط<script>...</script>که حاویwindow.__data__با مقدارِ آبجکت stringify شده‌ی داده‌های دریافتی از API است، به جای خط کامنت<!--client-script-->(خط۱۱) قرار بگیرند. دراین‌باره، در ادامه‌ی مقاله توضیح داده شده است.
۵. با خواندن فایل src/entry-server.jsx و پردازش کامپوننت‌های React، به شکلی که در سمت سرور قابل استفاده باشند، فایل تازه‌یی به نام entry-server.js می‌سازد و درون دایرکتوری dist/server قرار می‌دهد. در این فایلِ تازه، تابع render [همانند فایل اصلی] export می‌شود تا بتواند در سمت سرور و در فایل server.mjs برای انجام عملیات رندرینگ فراخوانی شود.
۶. همه‌ی فایل‌های JS و CSS یاد شده را در حالت فشرده‌شده، ذخیره می‌کند. (اختیاری، قابل تنظیم در فایل vite.config.js)
نکته: اگر یک
دایرکتوری Baseبرای پروژه در نظر گرفته شده باشد، در ثابتWEBSITE_DIRECTORY_NAMEفایل.envتعریف شده است. (در این پروژه shop)
نام این دایرکتوری باید در فایل package.json که دستورهای build پروژه در بخش scripts آن وجود دارد نیز، تعریف شود.
با اجرای دستور build، دایرکتوری‌های client و server دروندایرکتوری Baseو خوددایرکتوری Baseدر dist قرار خواهد گرفت.
مثلاdist/clientمی‌شود:dist/shop/clientوdist/serverمی‌شود:dist/shop/server.دایرکتوری Baseدر این پروژه، همانshopدرhttp://localhost:5173/shopاست.
Start پروژه
برای راه‌اندازی و اجرای پروژه، همانطور که در مرحله آخرِ نصب گفته شد، باید فایل server.mjs را توسط node اجرا کنیم.
در فایل server.mjs (به طور خلاصه):
۱. یک سرور HTTP به کمک Express ایجاد می‌کنیم.
۲. به وسیله‌ی express.static که یک Middle Ware داخلی در express است، دایرکتوری client موجود در دایرکتوری dist که توسط Vite ساخته‌شده بود را برای کاربر قابل ارائه می‌کنیم.
۳. فایل dist/client/index.html (تولیدشده توسط Vite) را به عنوان قالب اصلی دریافت می‌کنیم.
۴. یک Router که یک سیستم مسیریابی به شکل یک Middle Ware است، در Express ایجاد می‌کنیم. این Router می‌تواند دایرکتوری base پروژه را به عنوان دایرکتوری اصلی و آغازین درنظر بگیرد.
۵. سپس، یک path به نام /sitemap برای ارجاع به نقشه‌ی سایت پروژه؛ و بعد از آن یک path دیگر برای ارجاع به همه‌ی درخواست‌های URI دیگر ('*')، به عنوان نقطه‌های پایانی درخواست‌های کاربر، در نظر می‌گیریم و به شکل Route با متد HTTP GET به Router ایجاد شده، نسبت می‌دهیم.
Routeهای Express، در Handler function خود، درخواست‌ها و اطلاعات مختلفی که توسط کاربر ایجاد می‌شوند را دریافت می‌کنند و پاسخ‌های موردنظر را برای نمایش به کاربر ارائه می‌دهند.
۶. سپس تابع render موجود در فایل dist/server/entry-server.js (تولیدشده توسط Vite) را در Handler function روت ایجاد شده (برای همه‌ی درخواست‌ها ('*'))، وارد می‌کنیم.
به واسطه‌ی تابع render، می‌توانیم محتویات کامپوننت‌های React را دریافت کنیم، تا به همراه دیگر اجزای موردنظر، به جای خط کامنت‌های موجود در فایل dist/client/index.html، در HTML نهایی بگنجانیم و منتشر کنیم.
محتویات HTML نهایی با توجه به URL درخواست شده توسط کاربر، متفاوت خواهد بود.
۷. در آخر، پروژه را در آدرس و Port تعیین شده، آماده‌ی اجرا می‌کنیم.
توضیحات بیش‌تر و کامل‌تری درباره‌ی اقدامات فایل server.mjs، در ادامه‌ی این مقاله، نوشته شده است.
صفحهی قبل: نحوه‌ی نصب، اجرا و توسعهی پروژه
صفحهی بعد: جزییات نصب و اجرا ـ ۲
اطلاعات برنامه
نام: express-react-ssr
پلتفرم: Node.js
زبان: JavaScript
لایسنس: MIT
تاریخ انتشار اولیه: ۹ مرداد ۱۴۰۳
تاریخ آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۳
مخزن: GitHub