Enable configuration-driven static optimization

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

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 },
   },
 };
 

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 {

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',

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}

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}

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,