
فهرست
مقدمه
صفحه ۱دانلود و نمایش دمو
نصب و اجرا
ویرایش و توسعه
جزییات نصب و اجرا ـ ۱
صفحه ۲عملیات Build
Start پروژه
جزییات نصب و اجرا ـ ۲
صفحه ۳استفاده از Node Stream
آمادهسازی Router
ارتباط با API
صفحه ۴تابع FetchData و پارامترهای آن
تابع API و پارامترهای آن
ارتباط کامپوننتهای React با دادههای API
صفحه ۵پیادهسازی Loading
صفحه ۶پیادهسازی تگهای سرصفحه
صفحه ۷پیادهسازی نقشهی سایت XML
صفحه ۸
در صفحههای قبلی، نحوهی دریافت، نصب و اجرا ، توسعهی پروژه، جزییات نصب و اجرای پروژه، ارتباط با 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