Eliminate build-time API calls, default to dynamic rendering (#2660)

* force all pages into dynamic rendering, no build-time api calls

* allow running docker in production mode

* add temporary logging

* remove temporary logging

* fix typo

* remove unnecessary revalidates

Author: ChristopherChudzicki

docker-compose.apps.yml

@@ -36,7 +36,13 @@ services:
     command:
       - |
         yarn install --immutable
-        yarn watch
+        if [ "$${NODE_ENV}" = "production" ]; then
+          yarn build
+          echo "WARNING: Production preview will NOT re-render on file changes."
+          yarn preview
+        else
+          yarn watch
+        fi
     ports:
       - "8062:8062"
       - "6006:6006"

frontends/main/src/app/layout.tsx

@@ -17,6 +17,16 @@ export const metadata = {
   metadataBase: NEXT_PUBLIC_ORIGIN ? new URL(NEXT_PUBLIC_ORIGIN) : null,
 }
 
+/**
+ * Force all pages to render dynamically (at request-time) rather than
+ * statically at build time. This simplifies the build, reduces build time, and
+ * ensures fresh data on each request to the NextJS server.
+ *
+ * It does increase server load, but this should not be significant since
+ * requests are cached on CDN.
+ */
+export const dynamic = "force-dynamic"
+
 export default function RootLayout({
   children,
 }: Readonly<{

frontends/main/src/app/page.tsx

@@ -23,18 +23,6 @@ export async function generateMetadata({
   })
 }
 
-/**
- * Fallback to dynamic rendering to load as much of the page as possible.
- *
- * We could alternatively wrap the carousels (which use useSearchParams) in a
- * suspense boundary. This ostensibly leads to a faster response, since the
- * server can render the rest of the homepage at build time.
- *
- * But... We ache the result on CDN anyway, so it's essentially pre-build for
- * most requests, anyway.
- */
-export const dynamic = "force-dynamic"
-
 const Page: React.FC<PageProps<"/">> = async () => {
   const { dehydratedState } = await prefetch([
     // Featured Courses carousel "All"

frontends/main/src/app/search/page.tsx

@@ -20,18 +20,6 @@ export async function generateMetadata({ searchParams }: PageProps<"/search">) {
   })
 }
 
-/**
- * The search page uses Next's `useSearchParams`. This requires either:
- *  1. wrap the <SearchPage /> in Suspense
- *  2. or force-dynamic.
- *
- * (1) caused a hydration error for authenticated users. We have not found
- * the root cause of the hydration error.
- *
- * (2) seems to work well.
- */
-export const dynamic = "force-dynamic"
-
 const Page: React.FC<PageProps<"/search">> = async ({ searchParams }) => {
   const search = (await searchParams) as ResourceSearchRequest & {
     page?: string

frontends/main/src/app/sitemaps/channels/sitemap.ts

@@ -10,19 +10,16 @@ invariant(BASE_URL, "NEXT_PUBLIC_ORIGIN must be defined")
 const PAGE_SIZE = 100
 
 /**
- * By default in NextJS, sitemaps are statically generated at build time.
- * We want to ensure up-to-date sitemaps.
- *
- * This forces the sitemaps to be rendered for each request.
- * However, we we set s-maxage in the headers (next.config.js) to enable caching
- * by a CDN.
+ * As of NextJS 15.5.3, sitemaps are ALWAYS generated at build time, even with
+ * the force-dynamic below (this may be a NextJS bug?). However, the
+ * force-dynamic does force re-generation when requests are made in production.
  */
 export const dynamic = "force-dynamic"
 
 export async function generateSitemaps(): Promise<GenerateSitemapResult[]> {
   /**
-   * NextJS runs this at build time (despite force-dynamic below).
-   * Early exist here to avoid the useless build-time API calls.
+   * NextJS runs this at build time (despite force-dynamic above).
+   * Early exit here to avoid the useless build-time API calls.
    */
   if (dangerouslyDetectProductionBuildPhase()) return []
   const { count } = (await channelsApi.channelsList({ limit: PAGE_SIZE })).data

frontends/main/src/app/sitemaps/resources/sitemap.ts

@@ -10,19 +10,16 @@ invariant(BASE_URL, "NEXT_PUBLIC_ORIGIN must be defined")
 const PAGE_SIZE = 1_000
 
 /**
- * By default in NextJS, sitemaps are statically generated at build time.
- * We want to ensure up-to-date sitemaps.
- *
- * This forces the sitemaps to be rendered for each request.
- * However, we we set s-maxage in the headers (next.config.js) to enable caching
- * by a CDN.
+ * As of NextJS 15.5.3, sitemaps are ALWAYS generated at build time, even with
+ * the force-dynamic below (this may be a NextJS bug?). However, the
+ * force-dynamic does force re-generation when requests are made in production.
  */
 export const dynamic = "force-dynamic"
 
 export async function generateSitemaps(): Promise<GenerateSitemapResult[]> {
   /**
-   * NextJS runs this at build time (despite force-dynamic below).
-   * Early exist here to avoid the useless build-time API calls.
+   * NextJS runs this at build time (despite force-dynamic above).
+   * Early exit here to avoid the useless build-time API calls.
    */
   if (dangerouslyDetectProductionBuildPhase()) return []
   const { count } = (