Как сгенерировать маршрут /sitemap.xml во фреймворке Remix

Согласно google.com

Карта сайта — это файл, в котором вы предоставляете информацию о страницах, видео и других файлах на вашем сайте, а также о связях между ними. Поисковые системы, такие как Google, читают этот файл, чтобы более эффективно просматривать ваш сайт.

Прежде всего, нам понадобится помощь этого очень мощного пакета под названием Remix SEO. Итак, установите его с помощью следующей команды.

npm i @balavishnuvj/remix-seo

Войти в полноэкранный режим Выйти из полноэкранного режима

Затем создайте новый файл с именем sitemapRoutes.server.ts в нашей директории app/. После создания файла вставьте в него следующий код.

import type { EntryContext } from "@remix-run/node";
import { generateSitemap } from "@balavishnuvj/remix-seo";

const siteUrl =
  process.env.ENVIRONMENT === "production"
    ? "https://yourProductionWebsiteUrl.com"
    : "http://localhost:3000";

type Handler = (
  request: Request,
  remixContext: EntryContext
) => Promise<Response | null> | null;

export const otherRootRoutes: Record<string, Handler> = {
  "/sitemap.xml": async (request, remixContext) => {
    return generateSitemap(request, remixContext, {
      siteUrl,
    });
  },
};

export const otherRootRouteHandlers: Array<Handler> = [
  ...Object.entries(otherRootRoutes).map(([path, handler]) => {
    return (request: Request, remixContext: EntryContext) => {
      if (new URL(request.url).pathname !== path) return null;

      return handler(request, remixContext);
    };
  }),
];

Вход в полноэкранный режим Выйти из полноэкранного режима

Это все для файла sitemapRoutes.server.ts. Теперь перейдите к файлу entry.server.tsx в директории app/ и внесите в него следующие изменения:

import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
+ import { otherRootRouteHandlers } from "./sitemapRoutes.server";


- export default function handleRequest(
+ export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
+  for (const handler of otherRootRouteHandlers) {
+    const otherRouteResponse = await handler(request, remixContext);
+    if (otherRouteResponse) return otherRouteResponse;
+  }
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

Вход в полноэкранный режим Выход из полноэкранного режима

и теперь все готово! Поздравляю, вы сделали это 😉
Теперь вам просто нужно перейти по ссылке http://localhost:3000/sitemap.xml и вы увидите сгенерированную карту сайта, как показано ниже: