From f5a5b4aef6528cfebfe776ab0f72b5baef836382 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 12 Feb 2024 18:10:26 -0600
Subject: [PATCH] Enable configuration-driven static optimization

---
 README.md                        |  3 ++-
 next.config.js                   |  4 ++--
 src/app/p/[photoId]/layout.tsx   | 13 +++++++++----
 src/components/Badge.tsx         |  3 +++
 src/components/ChecklistRow.tsx  | 17 ++++++++++++++++-
 src/site/SiteChecklistClient.tsx | 12 ++++++++++++
 src/site/config.ts               | 31 +++++++++++++++++++++----------
 7 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index ffb3fa35..c70f6e41 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,8 @@ Installation
 
 ### 6. Optional configuration
 
-- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (will result in increased storage usage)
+- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE = 1` enables PPR and static optimization, i.e., building pages ahead of time (results in increased storage usage)—⚠️ _Experimental_
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order
diff --git a/next.config.js b/next.config.js
index c6ea678c..a18d28c6 100644
--- a/next.config.js
+++ b/next.config.js
@@ -35,8 +35,8 @@ const nextConfig = {
       .concat(createRemotePattern(AWS_S3_HOSTNAME)),
     minimumCacheTTL: 31536000,
   },
-  experimental: {
-    ppr: true,
+  ...process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE === '1' && {
+    experimental: { ppr: true },
   },
 };
 
diff --git a/src/app/p/[photoId]/layout.tsx b/src/app/p/[photoId]/layout.tsx
index 41ef856d..81004543 100644
--- a/src/app/p/[photoId]/layout.tsx
+++ b/src/app/p/[photoId]/layout.tsx
@@ -14,12 +14,17 @@ import {
 import PhotoDetailPage from '@/photo/PhotoDetailPage';
 import { getPhotosNearIdCached } from '@/photo/cache';
 import { getPhotoIds } from '@/services/vercel-postgres';
+import { STATICALLY_OPTIMIZED } from '@/site/config';
 
 export async function generateStaticParams() {
-  const photos = await getPhotoIds({ limit: GENERATE_STATIC_PARAMS_LIMIT });
-  return photos.map(photoId => ({
-    params: { photoId },
-  }));
+  if (STATICALLY_OPTIMIZED) {
+    const photos = await getPhotoIds({ limit: GENERATE_STATIC_PARAMS_LIMIT });
+    return photos.map(photoId => ({
+      params: { photoId },
+    }));
+  } else {
+    return [];
+  }
 }
 
 interface PhotoProps {
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 67461974..34102ab3 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -2,12 +2,14 @@ import { clsx } from 'clsx/lite';
 
 export default function Badge({
   children,
+  className,
   type = 'large',
   highContrast,
   uppercase,
   interactive,
 }: {
   children: React.ReactNode
+  className?: string
   type?: 'large' | 'small' | 'text-only'
   highContrast?: boolean
   uppercase?: boolean
@@ -39,6 +41,7 @@ export default function Badge({
   };
   return (
     <span className={clsx(
+      className,
       'leading-none',
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index 10b91f5a..8b57939a 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -7,12 +7,14 @@ export default function ChecklistRow({
   status,
   isPending,
   optional,
+  experimental,
   children,
 }: {
   title: string
   status: boolean
   isPending: boolean
   optional?: boolean
+  experimental?: boolean
   children: ReactNode
 }) {
   return (
@@ -25,8 +27,21 @@ export default function ChecklistRow({
         loading={isPending}
       />
       <div className="flex flex-col min-w-0">
-        <div className="font-bold dark:text-gray-300">
+        <div className={clsx(
+          'flex flex-wrap items-center gap-2',
+          'font-bold dark:text-gray-300',
+        )}>
           {title}
+          {experimental &&
+            <span className={clsx(
+              'text-[0.7rem] font-medium uppercase tracking-wide leading-none',
+              'px-[3px] py-[2px] rounded-[0.2rem]',
+              'text-pink-500 dark:text-pink-800',
+              'bg-pink-50 dark:bg-pink-200/90',
+              'border border-pink-200/75 dark:border-pink-700/50',
+            )}>
+              Experimental
+            </span>}
         </div>
         <div>
           {children}
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 7b08db87..e61b61f9 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -37,6 +37,7 @@ export default function SiteChecklistClient({
   showFilmSimulations,
   showExifInfo,
   isProModeEnabled,
+  isStaticallyOptimized,
   isBlurEnabled,
   isGeoPrivacyEnabled,
   isPriorityOrderEnabled,
@@ -274,6 +275,17 @@ export default function SiteChecklistClient({
           higher quality image storage:
           {renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
         </ChecklistRow>
+        <ChecklistRow
+          title="Static Optimization"
+          status={isStaticallyOptimized}
+          isPending={isPendingPage}
+          optional
+          experimental
+        >
+          Set environment variable to {'"1"'} to enable
+          PPR and static optimization, i.e., building pages ahead of time:
+          {renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE'])}
+        </ChecklistRow>
         <ChecklistRow
           title="Image Blur"
           status={isBlurEnabled}
diff --git a/src/site/config.ts b/src/site/config.ts
index c4997ce2..81613c55 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -81,21 +81,31 @@ export const CURRENT_STORAGE: StorageType =
 
 // SETTINGS
 
-export const PRO_MODE_ENABLED = process.env.NEXT_PUBLIC_PRO_MODE === '1';
-export const BLUR_ENABLED = process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
-export const GEO_PRIVACY_ENABLED = process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
+export const PRO_MODE_ENABLED =
+  process.env.NEXT_PUBLIC_PRO_MODE === '1';
+export const STATICALLY_OPTIMIZED =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE === '1';
+export const BLUR_ENABLED =
+  process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
+export const GEO_PRIVACY_ENABLED =
+  process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
 export const PRIORITY_ORDER_ENABLED =
   process.env.NEXT_PUBLIC_IGNORE_PRIORITY_ORDER !== '1';
-export const PUBLIC_API_ENABLED = process.env.NEXT_PUBLIC_PUBLIC_API === '1';
-export const SHOW_REPO_LINK = process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
+export const PUBLIC_API_ENABLED =
+  process.env.NEXT_PUBLIC_PUBLIC_API === '1';
+export const SHOW_REPO_LINK =
+  process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
 export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
-export const SHOW_EXIF_DATA = process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
-export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
-  ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
-  : 1;
+export const SHOW_EXIF_DATA =
+  process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
+export const GRID_ASPECT_RATIO =
+  process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
+    ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
+    : 1;
 export const OG_TEXT_BOTTOM_ALIGNMENT =
-  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
+  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '')
+    .toUpperCase() === 'BOTTOM';
 
 export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
 
@@ -121,6 +131,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
+  isStaticallyOptimized: STATICALLY_OPTIMIZED,
   isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isPriorityOrderEnabled: PRIORITY_ORDER_ENABLED,