رندرینگ سمت سرور React به‌وسیله‌ی Express

پروژه‌ی معرفی شده در این مقاله، قالب یک وب‌سایت فروشگاهی ساده، طراحی شده با React و Tailwind CSS است که داده‌های موردنیازش را از API دریافت می‌کند و به‌وسیله‌ی Express و با کمک Vite (ویت) در سمت سرور، رندر می‌شود و Source نهایی هر صفحه، شامل محتویاتِ کامپوننت‌ها و تگ‌های سرصفحه‌ی مربوط به هر صفحه برای برخورداری از عملکرد مناسب در سئو است. همچنین نقشه‌ی سایت XML برای بخش‌های مورد نیاز، تهیه شده است.

مقدمه

اگر با React، قالب وب‌سایتی را نوشته باشیم، هنگام اجرا، در ‌Source صفحه می‌بینیم که مرورگر، HTML مینیمالی را به همراه دو فایل css (در صورت وجود) و js فراخوانی شده، دریافت کرده است.
همه‌چیز در نمایش محتوا بی نقص است اما می‌بینیم که در Source صفحه‌ها، خبری از کدهای HTML موجود در کامپوننت‌های React و نوشته‌های احتمالی درون کامپوننت‌ها نیست. در این حالت همه‌ی کامپوننت‌های React به‌وسیله‌ی فایل جاوااسکریپتی که مرورگر «بعد از خواندن Source اولیه» دریافت می‌کند به نمایش درخواهندآمد و درواقع آن فایل جاوااسکریپت، Source ما را تکمیل کرده است. این حالت، همان Client Side Rendering (CSR) یا رندرینگ سمت مشتری (کاربر) است.
در این‌صورت کار ربات‌های خزنده‌ی موتورهای جست‌وجو برای دریافت صحیح صفحه‌های وب‌سایت، راحت نخواهد بود و چون این خزنده‌ها، ‌Source ‌مورد انتظار ما را دریافت نکرده‌اند، صفحه‌های وب‌سایت در موتورهای جست‌وجو، به درستی Index نمی‌شوند.

اما Server Side Rendering (SSR) یا رندرینگ سمت سرور، به ما امکان «بازتولیدِ HTML» قبل از ارسال به سمت کاربر را خواهد داد. با فراهم شدن این امکان، می‌توانیم با رندر و ادغام کردن محتویات کامپوننت‌های React در کدهای HTML موجود، برای هر صفحه Source تازه‌ای را در سمت سرور تولید کنیم و برای نمایش به سمت Client بفرستیم.

برای پیاده‌سازی رندرینگ سمت سرور React، تازه‌ترین و شاید بهترین گزینه‌، استفاده از فریمورک‌های Next.js ـ Remix ـ Gatsby و یا Vike باشد. اما به هر حال برای افرادی که بخواهند با فریمورک Express.js یک قالب ساخته شده با React را در سمت سرور رندر کنند، روش پیشِ رو، شاید روش خوبی باشد که در قالب یک پروژه، به همراه همین مقاله (در ۸ صفحه)، تقدیم می‌شود.

عملیات رندرینگ کامپوننت‌های React در این پروژه توسط renderToPipeableStream و Node Stream, Transform انجام می‌پذیرد.

مخزن template-ssr-react-streaming که توسط Bjorn Lu عضو اصلی تیم Vite.js تهیه شده، منبع راهنما در ساخت این پروژه است.

دانلود و نمایش دمو

دانلود (از GitHub)
مخزن پروژه در GitHub

نمایش دمو – لینک کمکی

برای فرستادن پرسش و یا گزارش ایراد، می‌توانید از طریق issues مخزن پروژه در GitHub، اقدام کنید.

نصب و اجرا

موارد مورد نیاز:
Node.js نسخه‌ی ۱۴+
npm نسخه‌ی ۶+

۱. ابتدا مخزن پروژه را دریافت نمایید. برای این کار می‌توانید آن را دانلود کنید و یا اگر git را نصب‌شده دارید، با کامند زیر آن را دریافت کنید:

git clone https://github.com/ramoures/express-react-ssr.git

۲. اگر فایل Zip را دانلود کردید، آن را extract کنید، سپس در یک ترمینال پوشه‌ی پروژه را باز کنید؛ یا اگر پروژه را Clone کردید، با کامند زیر وارد پوشه‌ی پروژه شوید:

cd express-react-ssr

۳. با کامند زیر ‌dependency های مورد نیاز پروژه را نصب کنید:

npm install

۴. با کامند زیر پروژه را build کنید:

npm run build

۵. و در نهایت با کامند زیر پروژه را start کنید:

npm start

کامند npm start معادل با کامند node server.mjs است.

● حالا برای دیدن پروژه در مرورگر، آدرس زیر را باز کنید:

http://localhost:5173/shop/

برای تغییر دایرکتوری shop در انتهای آدرس URL پروژه: ۱. فایل .env را در ویرایش‌گرتان باز کنید و مقدار WEBSITE_DIRECTORY_NAME را تغییر دهید. (برای حذف مقدار را خالی (“”) بگذارید). ۲. سپس در بخش scripts فایل package.json نیز دایرکتوری shop را در کلیدهای build:client و build:clien تغییر دهید یا حذف کنید. ۳. در انتها بار دیگر پروژه را build کنید.

ویرایش و توسعه

در این پروژه‌، با کمک Vite حالت ویژه‌ی توسعه در نظر گرفته شده که به‌وسیله‌ی اجرای آن، محتویاتی که ویرایش و یا توسعه داده‌ می‌شوند را، همیشه‌ تازه (بدون انجام عمل Reload صفحه‌ها در مرورگر)، در آدرس و پورتی مجزا در مرورگرمان ببینیم.

با کامند زیر، حالت توسعه را اجرا کنید:

npm run dev

کامند بالا فایل dev.mjs را در سرور Node اجرا می‌کند و معادل کامند node dev.mjs است.

حالا در آدرس زیر، پروژه را در حالت توسعه ببینید:

http://localhost:4173/shop/

همانطور که مشاهده می‌کنید، پورتی که حالت توسعه در آن اجرا می‌شود، 4173 است و با Port اصلی پروژه (5173) که بعد از عملیات Build اقدام به اجرای آن می‌کنیم، متفاوت است.
هر دو ‌Port به‌وسیله‌ی ویرایش فایل env. قابل تغییر هستند.

فایل dev.mjs به طور خلاصه: ۱. یک ‌سرور ویژه‌ی حالت توسعه با کمک Vite ایجاد می‌کند و آن را به شکل Middle Ware به express اضافه می‌کند. ۲. فایل index.html را دریافت می‌کند. ۳. فایل /src/entry-server.jsx را می‌خواند و در چارچوب SSR با توجه به URL درخواست شده تغییرات را برای نمایش نهایی در source هر صفحه آماده می‌‌کند و source آماده شده را جایگزین خط کامنت <!--app-html--> در index.html می‌کند.

● می‌توانید همزمان با اجرای دستور بالا، در یک ترمینال دیگر، با کامند زیر فرآیند ساخت و فشرده‌سازی Tailwind را اجرا کنید:

npm run tw

با اجرای کامند بالا، هر تغییری که در ‌ClassName‌ها بدهیم، توسط Tailwind پردازش و css نهایی آن‌ها، در فایل output.css به صورت فشرده، ذخیره می‌شود.
فایل‌هایی که ‌Tailwind مامور به خواندن و پردازش آن‌ها می‌باشد را قبلا در فایل tailwind.config.js تعریف کرده‌ایم.

کامند بالا معادل کامند زیر است که برای اجرای آسان‌تر، در بخش scripts فایل package.json بازتعریف شده است:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch --minify

نکته‌

بعد از اتمام ویرایش‌ و توسعه‌ی پروژه، لازم است پروژه را بار دیگر Build کنیم تا آخرین تغییرات اعمال شوند: npm run build
سپس برای اجرای پروژه‌ی نهایی در سرور، باید فایل ‌server.mjs را با کامند node server.mjs یا npm start اجرا کنیم.

---

روندنما

صفحه‌ی بعد: جزییات نصب و اجرا ـ ۱

اطلاعات برنامه
نام: express-react-ssr
پلتفرم: Node.js
زبان: JavaScript
لایسنس: MIT
تاریخ انتشار اولیه: ۹ مرداد ۱۴۰۳
تاریخ آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۳
مخزن: GitHub