WIP: show somewhat dynamic rendering based on dynamic constraints

src/lib/routing/index.ts

@@ -10,6 +10,17 @@ export type RecordRoute =
 
 export { getFileHref } from './file';
 
+export const isStaticRoute = (record: RecordRoute) => {
+  // POC implementation to show the idea,
+  // actual implementation ought to be based on a either a setting per page or the existence of ceertain blocks?
+  // @ts-expect-error _allSlugLocales might not exist on all records
+  return !record._allSlugLocales?.some((slug: unknown) => slug.value === ('demos'));
+};
+
+export const isServerRoute = (record: RecordRoute) => {
+  return !isStaticRoute(record);
+};
+
 export const getHomeHref = ({ locale = getLocale() } = {}) => {
   return `/${locale}/`;
 };

src/pages/[locale]/[...serverPath]/index.astro

@@ -0,0 +1,36 @@
+---
+import { datocmsCollection } from '@lib/datocms';
+import { isServerRoute } from '@lib/routing/';
+import { getPagePath } from '@lib/routing/page';
+import { PageRoute as fragment, type PageRouteFragment, type SiteLocale } from '@lib/datocms/types';
+import Page from '@views/Page/Page.astro';
+
+export const prerender = false;
+
+export async function getStaticPaths() {
+  const pages = await datocmsCollection<PageRouteFragment>({
+    collection: 'Pages',
+    fragment,
+  });
+  return pages
+    .filter(isServerRoute)
+    .flatMap((page) => {
+      const locales = page._allSlugLocales
+        ?.map((slug) => slug.locale)
+        .filter((locale) => !!locale);
+      return locales?.map((locale) => {
+        return { params: { locale, serverPath: getPagePath({ page, locale }) } };
+      });
+    });
+}
+
+type Params = {
+  locale: SiteLocale;
+  serverPath: string;
+};
+const { locale, serverPath: path } = Astro.params as Params;
+---
+
+<Page {locale} {path}>
+  <mark slot="mark">Server rendered ({new Date().toLocaleTimeString()})</mark>
+</Page>

src/pages/[locale]/[...staticPath]/index.astro

@@ -0,0 +1,36 @@
+---
+import { datocmsCollection } from '@lib/datocms';
+import { isStaticRoute } from '@lib/routing/';
+import { getPagePath } from '@lib/routing/page';
+import { PageRoute as fragment, type PageRouteFragment, type SiteLocale } from '@lib/datocms/types';
+import Page from '@views/Page/Page.astro';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  const pages = await datocmsCollection<PageRouteFragment>({
+    collection: 'Pages',
+    fragment,
+  });
+  return pages
+    .filter(isStaticRoute)
+    .flatMap((page) => {
+      const locales = page._allSlugLocales
+        ?.map((slug) => slug.locale)
+        .filter((locale) => !!locale);
+      return locales?.map((locale) => {
+        return { params: { locale, staticPath: getPagePath({ page, locale }) } };
+      });
+    });
+}
+
+type Params = {
+  locale: SiteLocale;
+  staticPath: string;
+};
+const { locale, staticPath: path } = Astro.params as Params;
+---
+
+<Page {locale} {path}>
+  <mark slot="mark">Pre rendered ({new Date().toLocaleTimeString()})</mark>
+</Page>

src/pages/[locale]/index.astro

@@ -9,13 +9,15 @@ import Blocks from '@blocks/Blocks.astro';
 import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
 import query from './_index.query.graphql';
 
+export const prerender = true;
+
 export async function getStaticPaths() {
   return locales.map((locale) => ({ params: { locale } }));
 }
 
 const { locale } = Astro.params;
 const variables = { locale };
-const { page } = await datocmsRequest<HomePageQuery /*, typeof prerender */>({ query, variables });
+const { page } = await datocmsRequest<HomePageQuery , typeof prerender>({ query, variables });
 const pageUrls = locales.map((locale) => ({
   locale,
   pathname: getHomeHref({ locale }),
@@ -24,6 +26,6 @@ const pageUrls = locales.map((locale) => ({
 
 <Layout pageUrls={pageUrls} seoMetaTags={page._seoMetaTags}>
   <PreviewModeSubscription query={query} variables={variables} />
-  <h1>{page.title}</h1>
+  <h1><mark>Pre rendered ({new Date().toLocaleTimeString()})</mark> {page.title}</h1>
   <Blocks blocks={page.bodyBlocks} />
 </Layout>

src/pages/[locale]/[...path]/index.astro → src/views/Page/Page.astro

@@ -1,47 +1,23 @@
 ---
-import { datocmsCollection, datocmsRequest } from '@lib/datocms';
-import { getPageHref } from '@lib/routing/';
-import {
-  getPagePath,
-  getPageSlugFromPath,
-  getParentPages,
-} from '@lib/routing/page';
-import { 
-  PageRoute as fragment, 
-  type PageQuery, 
-  type PageRouteFragment, 
-  type SiteLocale 
-} from '@lib/datocms/types';
+import type { PageQuery, SiteLocale  } from '@lib/datocms/types';
 import type { PageUrl } from '@lib/seo';
+import { datocmsRequest } from '@lib/datocms';
+import { getPageHref } from '@lib/routing/';
+import { getPageSlugFromPath, getParentPages } from '@lib/routing/page';
 import Layout from '@layouts/Default.astro';
 import Blocks from '@blocks/Blocks.astro';
 import { formatBreadcrumb } from '@components/Breadcrumbs';
 import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
-import query from './_index.query.graphql';
+import query from './Page.query.graphql';
 
-export async function getStaticPaths() {
-  const pages = await datocmsCollection<PageRouteFragment>({
-    collection: 'Pages',
-    fragment,
-  });
-  return pages.flatMap((page) => {
-    const locales = page._allSlugLocales
-      ?.map((slug) => slug.locale)
-      .filter((locale) => !!locale);
-    return locales?.map((locale) => {
-      return { params: { locale, path: getPagePath({ page, locale }) } };
-    });
-  });
-}
-
-type Params = {
+interface Props {
   locale: SiteLocale;
   path: string;
-};
+}
+const { locale, path } = Astro.props as Props;
 
-const { locale, path } = Astro.params as Params;
 const variables = { locale, slug: getPageSlugFromPath(path) };
-const { page } = await datocmsRequest<PageQuery /*, typeof prerender */>({ query, variables });
+const { page } = await datocmsRequest<PageQuery>({ query, variables });
 const breadcrumbs = [...getParentPages(page), page].map((page) =>
   formatBreadcrumb({
     text: page.title,
@@ -60,6 +36,6 @@ const pageUrls = (page._allSlugLocales || []).map(({ locale }) => ({
   seoMetaTags={page._seoMetaTags}
 >
   <PreviewModeSubscription query={query} variables={variables} />
-  <h1>{page.title}</h1>
+  <h1><slot name="mark" /> {page.title}</h1>
   <Blocks blocks={page.bodyBlocks} />
 </Layout>

tsconfig.json

@@ -11,7 +11,8 @@
       "@middleware/*": ["src/middleware/*"],
       "@pages/*": ["src/pages/*"],
       "@root/*": ["./*"],
-      "@src/*": ["src/*"]
+      "@src/*": ["src/*"],
+      "@views/*": ["src/views/*"],
     },
     "verbatimModuleSyntax": true,
     "plugins": [