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

در صفحه‌‌های قبلی، نحوه‌ی دریافت، نصب و اجرا ، توسعه‌‌ی پروژه، جزییات نصب و اجرای پروژه، ارتباط با API، نحوه‌ی ارتباط کامپوننت‌های React با داده‌های دریافتی از API، نحوه‌ی پیاده‌سازی Loading و همچنین نحوه‌ی پیاده‌سازی تگ‌های سرصفحه، توضیح داده شد. در این صفحه به سراغ نحوه‌ی ساخت نقشه‌ی سایت XML ، می‌رویم.

پیاده‌سازی نقشه‌ی سایت XML

همانظور که پیش از این، در بخش start پروژه گفته شد، در فایل server.mjs، ابتدا یک Route برای نقشه‌ی سایت پروژه ایجاد می‌کنیم.

// server.mjs
.
import express, { Router } from 'express';
.
.
.
const app = express();
const route = Router();
app.use('/shop', route);

route.get('/sitemap', async (req, res) => {
  res.set('Content-Type', 'application/xml');
  const xmlContent = `<?xml version = "1.0" encoding = "UTF-8" ?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>http://localhost:5173/shop</loc></sitemap></sitemapindex>`;
  res.send(xmlContent);
});

route.get('*', async(req,res)=>{
.
.
.
app.listen(5173);

Route نقشه‌ی سایت (/sitemap) توسط کد بالا ــ در خط ۱۱ تا ۱۵ ــ ایجاد خواهد شد و بعد از اجرای آدرس http://loaclhost:5173/shop/sitemap در صفحه، یک نسخه‌ی xml ساده، به کاربر نمایش داده خواهد شد.
نکته: این Route و یا هر Route دلخواه دیگر را باید قبل از ایجاد Route با path همه‌ی درخواست‌ها (‘*’) ایجاد کرده باشیم؛ چون Route برای همه‌ی درخواست‌ها (‘*’) نسبت به Routeهایی که بعد از خودش ایجاد شوند، در اولویت است و عملا Route های بعد از آن دیده نخواهند شد.

برای اینکه نقشه‌ی سایت ما احتمالا مسیرهای مختلفی مثل /sitemap/pages یا /sitemap/categories و یا /sitemap/products خواهد داشت و همچنین برای اینکه طول کدهای فایل server.mjs بیش از حد طولانی نباشند، می‌توانیم در route تعین شده به جای get (HTTP method) از use استفاده کنیم تا به این وسلیه این route را به یک middleware تبدیل کرده باشیم.

route.use('/sitemap', async(req,res)=>{});

حالا در Handler function این route، می‌توانیم routeهای مختلف (path‌های بعد از /sitemap ) را به یک Router دیگر نسبت دهیم. این Router را باید در یک فایل دیگر پیاده‌سازی و export کرده باشیم تا در این‌جا با import کردن آن به Handler function همین route، نسبت دهیم.

import sitemap from './sitemap/sitemap.mjs';
route.use('/sitemap', sitemap);

محتویات فایل sitemap.mjs که در مثال بالا import شده و به مسیر /sitemap اختصاص داده شده است، به طور خلاصه، به شکل زیر خواهد بود:

// ./sitemap/sitemap.mjs

import { Router } from "express";

const sitemap = Router();

sitemap.get('/', async (req, res) => {});
sitemap.get('/pages', async (req, res) => {});
sitemap.get('/categories', async (req, res) => {});
sitemap.get('/products', async (req, res) => {});

export default sitemap;

route اصلیِ routeهای کد بالا، /sitemap است که در کد بالاتر تعریف شده بود و در اینجا route نخست که / است به همان http://loaclhost:5173/shop/sitemap اشاره خواهد داشت، route دوم که /pages است به http://loaclhost:5173/shop/sitemap/pages اشاره خواهد داشت و دو route دیگر هم به ترتیب به http://loaclhost:5173/shop/sitemap/categories و http://loaclhost:5173/shop/sitemap/products اشاره دارند.

متد HTTP get را برای routeهای بالا در نظر گرفتیم تا هنگام اجرای URL های ذکر شده، محتویات درنظرگرفته‌شده در Handler function هر route به کاربر نمایش داده شود. به عنوان مثال Handler function برای مسیر /sitemap/products به شکل زیر خواهد بود. (از خط ۱۲ تا ۱۴)

// ./sitemap/sitemap.mjs
.
.
import { productsXml } from "./view/products.mjs";
.
.
// url = http://localhost:5173/shop/
const url = getEnv('WEBSITE_BASE_URL') + (getEnv('SERVER_PORT') ? (':' + getEnv('SERVER_PORT')) : '') + getEnv('WEBSITE_DIRECTORY_NAME');
.
.
sitemap.get('/products', async (req, res) => {
     res.set('Content-Type', 'application/xml');
     const xmlContent = await productsXml(url);
     return res.send(xmlContent);
});

در Handler function روت کد بالا(خط ۱۲ تا ۱۴) یک Content-Type به عنوان نسخه‌ی خروجی صفحه با مدیاتایپ application/xml تعیین کردیم. یک ثابت به نام xmlContent تعیین کردیم و محتویات صفحه را با فراخوانی تابع productsXml که در ادامه توضیح داده می‌شود، در آن مقداردهی کردیم؛ سپس محتویات مقداردهی‌شده در ثابت xmlContent را، به‌عنوان خروجی نهایی برای انتشار در صفحه فرستادیم.

تابع productsXml که در کد بالا import شده، قرار است محتویات نقشه‌ی سایت یا لیست همه‌ی لینک‌های محصولات ما را در نسخه‌ی xml به شکل زیر تعیین و export کند.

import API from "../../core/API.mjs";
import FetchData from "../../core/FetchData.mjs";

export const productsXml = async (url) => {
    const apiInfo = API('products');
    const data = await FetchData('get', apiInfo.url);

    let xml = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">`;
    for (let i in data) {
        xml += `<url>
        <loc>${url}category/${data?.[i]?.category}/products/${data?.[i]?.id}</loc>
        <image:image>
            <image:loc>${data?.[i]?.image}</image:loc>
        </image:image>
        <lastmod>${data?.[i]?.updatedAt}</lastmod>
        </url>`;
    };

    xml += `</urlset>`;

    return xml;
}

همانطور که می‌بینید تابع API و FetchData فراخوانی خواهند شد تا محتویات موردنظر، از منبع API ما دریافت شوند و در کد xml ما به عنوان خروجی تابع productsXml قرار بگیرند.
تابع productsXml یک پارامتر به عنوان url دارد که بخش ابتدایی آدرس لینک‌های نقشه‌ی سایت را تعیین خواهد کرد(خط ۱۲ کد بالا) که برابر با آدرس وب‌سایت به علاوه‌ی port و دایرکتوری base خواهد بود. این پارامتر در Handler function مربوطه در فایل /sitemap/sitemap.mjs مقداردهی شده است. (در این پروژه برابر است با: http://localhost:5173/shop/)

در تابع بالا یک متغیر به نام xml تعین شده که در ابتدا ساختار پروتوکل یک نسخه‌ی xml با رعایت استانداردهای تعریف شده، در این متغیر مقداردهی شده‌اند؛ سپس در حلقه‌یی که وابسته به تعداد داده‌های دریافتی از منبع API خواهد بود <url> های مورد نظر با مقادیر تگ‌های <loc> و <image:image> و <lastmod> یکی یکی به متغیر xml ما اضافه می‌شوند؛ و در آخر، خارج از حلقه‌ی فوق، تگ <urlset> که در ابتدا و قبل از حلقه، باز شده بود، بسته می‌شود تا متغیر xml تکمیل شده باشد و به عنوان خروجی تابع در نظر گرفته شود. این خروجی قرار است خروجی route تعیین شده برای انتشار نهایی باشد.

برای دیدن اطلاعات بیش‌تر درباره‌ی پروتوکل sitemap به این لینک نگاه کنید.

برای هر دسته‌بندی دیگری می‌توانیم به همین شکلی که توضیح داده شد، یک نسخه‌ی XML بسازیم.

/پایان مقاله/

صفحه‌ی قبل: پیاده‌سازی تگ‌های سرصفحه

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