refactor: use cache on providers

apps/site/app/[locale]/download/archive/[version]/page.tsx

@@ -46,7 +46,7 @@ const getPage: FC<PageParams> = async props => {
   const [locale, pathname] = basePage.getLocaleAndPath(version, routeLocale);
 
   if (version === 'current') {
-    const releaseData = provideReleaseData();
+    const releaseData = await provideReleaseData();
 
     const release = releaseData.find(release => release.status === 'Current');
 

apps/site/app/[locale]/not-found.tsx

@@ -1,15 +1,15 @@
-'use client';
+'use server';
 
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
 import Button from '#site/components/Common/Button';
 import Turtle from '#site/components/Common/Turtle';
 import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
 
-const NotFoundPage: FC = () => {
-  const t = useTranslations();
+const NotFoundPage: FC = async () => {
+  const t = await getTranslations();
 
   return (
     <GlowingBackdropLayout kind="default">

apps/site/components/EOL/EOLReleaseTable/TableBody.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { Fragment, useState } from 'react';
+
+import FormattedTime from '#site/components/Common/FormattedTime';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
+import EOLModal from '#site/components/EOL/EOLModal';
+import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
+import type { NodeRelease } from '#site/types/releases.js';
+import type { GroupedVulnerabilities } from '#site/types/vulnerabilities.js';
+
+type EOLReleaseTableBodyProps = {
+  eolReleases: Array<NodeRelease>;
+  vulnerabilities: GroupedVulnerabilities;
+};
+
+const EOLReleaseTableBody: FC<EOLReleaseTableBodyProps> = ({
+  eolReleases,
+  vulnerabilities,
+}) => {
+  const t = useTranslations();
+
+  const [currentModal, setCurrentModal] = useState<string | undefined>();
+
+  return (
+    <tbody>
+      {eolReleases.map(release => (
+        <Fragment key={release.major}>
+          <tr>
+            <td data-label="Version">
+              v{release.major} {release.codename ? `(${release.codename})` : ''}
+            </td>
+
+            <td data-label="Date">
+              <FormattedTime date={release.releaseDate} />
+            </td>
+
+            <td>
+              <VulnerabilityChips
+                vulnerabilities={vulnerabilities[release.major]}
+              />
+            </td>
+
+            <td>
+              <LinkWithArrow
+                className="cursor-pointer"
+                onClick={() => setCurrentModal(release.version)}
+              >
+                {t('components.downloadReleasesTable.details')}
+              </LinkWithArrow>
+            </td>
+          </tr>
+
+          <EOLModal
+            release={release}
+            vulnerabilities={vulnerabilities[release.major]}
+            open={currentModal === release.version}
+            onOpenChange={open => open || setCurrentModal(undefined)}
+          />
+        </Fragment>
+      ))}
+    </tbody>
+  );
+};
+
+export default EOLReleaseTableBody;

apps/site/components/EOL/EOLReleaseTable/index.tsx

@@ -0,0 +1,42 @@
+import { getTranslations } from 'next-intl/server';
+import type { FC } from 'react';
+
+import provideReleaseData from '#site/next-data/providers/releaseData';
+import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
+import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
+
+import EOLReleaseTableBody from './TableBody';
+
+const EOLReleaseTable: FC = async () => {
+  const releaseData = await provideReleaseData();
+  const vulnerabilities = provideVulnerabilities();
+
+  const eolReleases = releaseData.filter(
+    release => release.status === EOL_VERSION_IDENTIFIER
+  );
+
+  const t = await getTranslations();
+
+  return (
+    <table id="tbVulnerabilities">
+      <thead>
+        <tr>
+          <th>
+            {t('components.eolTable.version')} (
+            {t('components.eolTable.codename')})
+          </th>
+          <th>{t('components.eolTable.lastUpdated')}</th>
+          <th>{t('components.eolTable.vulnerabilities')}</th>
+          <th>{t('components.eolTable.details')}</th>
+        </tr>
+      </thead>
+
+      <EOLReleaseTableBody
+        eolReleases={eolReleases}
+        vulnerabilities={vulnerabilities}
+      />
+    </table>
+  );
+};
+
+export default EOLReleaseTable;