chore: render a json-ld object for search engines when the page are dynamic (and the data is originally fetched on frontend)

Author: sneko

package-lock.json

@@ -147,6 +147,7 @@
     "react-use": "^17.4.0",
     "robots-parser": "^3.0.1",
     "rrweb": "^1.1.3",
+    "schema-dts": "^1.1.2",
     "sharp": "^0.32.1",
     "simple-git": "^3.22.0",
     "superjson": "^1.13.3",

package.json

@@ -1,8 +1,14 @@
 import { Metadata } from 'next';
+import { headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import { userAgent } from 'next/server';
+import { CreativeWork, WithContext } from 'schema-dts';
 
 import { InitiativePage, InitiativePageProps } from '@etabli/src/app/(public)/initiative/[initiativeId]/InitiativePage';
+import { useServerTranslation } from '@etabli/src/i18n';
 import { GetInitiativeSchema } from '@etabli/src/models/actions/initiative';
 import { prisma } from '@etabli/src/prisma';
+import { initiativePrismaToModel } from '@etabli/src/server/routers/mappers';
 import { formatPageTitle } from '@etabli/src/utils/page';
 
 export async function generateMetadata(props: InitiativePageProps): Promise<Metadata> {
@@ -27,6 +33,98 @@ export async function generateMetadata(props: InitiativePageProps): Promise<Meta
   };
 }
 
-export default function Page(props: InitiativePageProps) {
-  return <InitiativePage {...props} />;
+export default async function Page(props: InitiativePageProps) {
+  const { t } = useServerTranslation('common');
+
+  const userAgentObject = userAgent({ headers: headers() });
+
+  // Since this page has a dynamic pathname and the data is fetched from the frontend we add a condition so search engines
+  // still have content to index in case they don't do client rendering with `puppeteer` or equivalent
+  let initiativeJsonLd: WithContext<CreativeWork> | null = null;
+  if (userAgentObject.isBot) {
+    const result = GetInitiativeSchema.shape.id.safeParse(props.params.initiativeId);
+    if (!result.success) {
+      return notFound();
+    }
+
+    // We rely on the UUID validation from `generateMetadata()`
+    const dbInitiative = await prisma.initiative.findUnique({
+      where: {
+        id: result.data,
+      },
+      include: {
+        ToolsOnInitiatives: {
+          include: {
+            tool: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+        BusinessUseCasesOnInitiatives: {
+          include: {
+            businessUseCase: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    if (!dbInitiative) {
+      return notFound();
+    }
+
+    const initiative = initiativePrismaToModel({
+      ...dbInitiative,
+      businessUseCases: dbInitiative.BusinessUseCasesOnInitiatives.map((bucOnI) => bucOnI.businessUseCase.name),
+      tools: dbInitiative.ToolsOnInitiatives.map((toolOnI) => toolOnI.tool.name),
+    });
+
+    initiativeJsonLd = {
+      '@context': 'https://schema.org',
+      '@type': 'CreativeWork',
+      // TODO: the link registry cannot be used server-side so not specifying the id (https://github.com/zilch/type-route/issues/125)
+      // '@id': linkRegistry.get('initiative', { initiativeId: initiative.id }, { absolute: true }), // Must be unique as IRI
+      name: initiative.name,
+      description: initiative.description,
+      url: initiative.websites,
+      about: [
+        {
+          '@type': 'SoftwareSourceCode',
+          codeRepository: initiative.repositories,
+          keywords: initiative.tools,
+        },
+      ],
+      potentialAction: [
+        ...initiative.businessUseCases.map((businessUseCase) => {
+          return {
+            '@type': 'Action' as 'Action',
+            description: businessUseCase,
+            disambiguatingDescription: `${t('model.initiative.businessUseCase', { count: 1 })} : ${businessUseCase}`,
+          };
+        }),
+        ...initiative.functionalUseCases.map((functionalUseCase) => {
+          const functionalUseCaseName = t(`model.initiative.functionalUseCase.enum.${functionalUseCase}`);
+
+          return {
+            '@type': 'Action' as 'Action',
+            description: functionalUseCaseName,
+            disambiguatingDescription: `${t('model.initiative.functionalUseCase.label', { count: 1 })} : ${functionalUseCaseName}`,
+          };
+        }),
+      ],
+      dateModified: initiative.updatedAt.toISOString(),
+    };
+  }
+
+  return (
+    <>
+      {!!initiativeJsonLd && <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(initiativeJsonLd) }} />}
+      <InitiativePage {...props} />
+    </>
+  );
 }