fix: we should invalidate data over time

app/[locale]/[[...path]]/page.tsx

@@ -5,7 +5,7 @@ import type { FC } from 'react';
 import { setClientContext } from '@/client-context';
 import { MDXRenderer } from '@/components/mdxRenderer';
 import { WithLayout } from '@/components/withLayout';
-import { ENABLE_STATIC_EXPORT } from '@/next.constants.mjs';
+import { ENABLE_STATIC_EXPORT, IS_DEVELOPMENT } from '@/next.constants.mjs';
 import { DEFAULT_VIEWPORT } from '@/next.dynamic.constants.mjs';
 import { dynamicRouter } from '@/next.dynamic.mjs';
 import { availableLocaleCodes, defaultLocale } from '@/next.locales.mjs';
@@ -120,7 +120,8 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
 export const dynamicParams = true;
 
 // Enforces that this route is used as static rendering
+// Except whenever on the Development mode as we want instant-refresh when making changes
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'error';
+export const dynamic = IS_DEVELOPMENT ? 'force-dynamic' : 'error';
 
 export default getPage;

app/[locale]/next-data/blog-data/[category]/route.ts

@@ -1,4 +1,5 @@
 import provideBlogData from '@/next-data/providers/blogData';
+import { VERCEL_EVALIDATE_TIME } from '@/next.constants.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
 
 // We only support fetching these pages from the /en/ locale code
@@ -40,3 +41,8 @@ export const dynamicParams = false;
 // Enforces that this route is cached and static as much as possible
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
 export const dynamic = 'error';
+
+// Ensures that this endpoint is invalidated and re-executed every X minutes
+// so that when new deployments happen, the data is refreshed
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
+export const revalidate = VERCEL_EVALIDATE_TIME;

app/[locale]/next-data/release-data/route.ts

@@ -1,4 +1,5 @@
 import provideReleaseData from '@/next-data/providers/releaseData';
+import { VERCEL_EVALIDATE_TIME } from '@/next.constants.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
 
 // We only support fetching these pages from the /en/ locale code
@@ -18,10 +19,15 @@ export const GET = async () => {
 // This is used for ISR static validation and generation
 export const generateStaticParams = async () => [{ locale }];
 
-// Forces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
+// Enforces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
 export const dynamicParams = false;
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
 export const dynamic = 'error';
+
+// Ensures that this endpoint is invalidated and re-executed every X minutes
+// so that when new deployments happen, the data is refreshed
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
+export const revalidate = VERCEL_EVALIDATE_TIME;

next-data/blogData.ts

@@ -1,12 +1,17 @@
-import { ENABLE_STATIC_EXPORT, NEXT_DATA_URL } from '@/next.constants.mjs';
+import {
+  ENABLE_STATIC_EXPORT,
+  IS_DEVELOPMENT,
+  NEXT_DATA_URL,
+  VERCEL_ENV,
+} from '@/next.constants.mjs';
 import type { BlogDataRSC } from '@/types';
 
 const getBlogData = (category: string): Promise<BlogDataRSC> => {
   // When we're using Static Exports the Next.js Server is not running (during build-time)
   // hence the self-ingestion APIs will not be available. In this case we want to load
   // the data directly within the current thread, which will anyways be loaded only once
   // We use lazy-imports to prevent `provideBlogData` from executing on import
-  if (ENABLE_STATIC_EXPORT) {
+  if (ENABLE_STATIC_EXPORT || (!IS_DEVELOPMENT && !VERCEL_ENV)) {
     return import('@/next-data/providers/blogData').then(
       ({ default: provideBlogData }) => provideBlogData(category)
     );

next-data/releaseData.ts

@@ -1,12 +1,17 @@
-import { ENABLE_STATIC_EXPORT, NEXT_DATA_URL } from '@/next.constants.mjs';
+import {
+  ENABLE_STATIC_EXPORT,
+  IS_DEVELOPMENT,
+  NEXT_DATA_URL,
+  VERCEL_ENV,
+} from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';
 
 const getReleaseData = (): Promise<NodeRelease[]> => {
   // When we're using Static Exports the Next.js Server is not running (during build-time)
   // hence the self-ingestion APIs will not be available. In this case we want to load
   // the data directly within the current thread, which will anyways be loaded only once
   // We use lazy-imports to prevent `provideBlogData` from executing on import
-  if (ENABLE_STATIC_EXPORT) {
+  if (ENABLE_STATIC_EXPORT || (!IS_DEVELOPMENT && !VERCEL_ENV)) {
     return import('@/next-data/providers/releaseData').then(
       ({ default: provideReleaseData }) => provideReleaseData()
     );

next.constants.mjs

@@ -21,6 +21,16 @@ export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
  */
 export const VERCEL_ENV = process.env.NEXT_PUBLIC_VERCEL_ENV || undefined;
 
+/**
+ * This is used for defining a default time of when `next-data` and other dynamically generated
+ * but static-enabled pages should be regenerated.
+ *
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
+ */
+export const VERCEL_EVALIDATE_TIME = Number(
+  process.env.NEXT_PUBLIC_VERCEL_REVALIDATE_TIME || 300
+);
+
 /**
  * This is used for telling Next.js to to a Static Export Build of the Website
  *
@@ -50,15 +60,15 @@ export const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL
 /**
  * This is used for any place that requires the Node.js distribution URL (which by default is nodejs.org/dist)
  *
- * Note that this is a manual Environment Variable defined by us if necessary.
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
  */
 export const DIST_URL =
   process.env.NEXT_PUBLIC_DIST_URL || 'https://nodejs.org/dist/';
 
 /**
  * This is used for any place that requires the Node.js API Docs URL (which by default is nodejs.org/docs)
  *
- * Note that this is a manual Environment Variable defined by us if necessary.
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
  */
 export const DOCS_URL =
   process.env.NEXT_PUBLIC_DOCS_URL || 'https://nodejs.org/docs/';
@@ -69,7 +79,7 @@ export const DOCS_URL =
  * This is useful when running the deployment on a subdirectory
  * of a domain, such as when hosted on GitHub Pages.
  *
- * Note that this is a manual Environment Variable defined by us if necessary.
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
  */
 export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '';
 
@@ -112,6 +122,8 @@ export const EXTERNAL_LINKS_SITEMAP = [
 
 /**
  * The `localStorage` key to store the theme choice of `next-themes`
+ *
+ * This is what allows us to store user preference for theming
  */
 export const THEME_STORAGE_KEY = 'theme';
 
@@ -123,19 +135,25 @@ export const SENTRY_DSN =
 
 /**
  * This states if Sentry should be enabled and bundled within our App
+ *
+ * We enable sentry by default if we're om development mode or deployed
+ * on Vercel (either production or preview branches)
  */
 export const SENTRY_ENABLE = IS_DEVELOPMENT || !!VERCEL_ENV;
 
 /**
  * This configures the sampling rate for Sentry
  *
- * @note we always want to capture 100% on preview branches and development mode
+ * We always want to capture 100% on Vercel Preview Branches
+ * and not when it's on Production Mode (nodejs.org)
  */
 export const SENTRY_CAPTURE_RATE =
-  SENTRY_ENABLE && BASE_URL !== 'https://nodejs.org' ? 1.0 : 0.01;
+  SENTRY_ENABLE && VERCEL_ENV && BASE_URL !== 'https://nodejs.org' ? 1.0 : 0.01;
 
 /**
  * Provides the Route for Sentry's Server-Side Tunnel
+ *
+ * This is a `@sentry/nextjs` specific feature
  */
 export const SENTRY_TUNNEL = (components = '') =>
   SENTRY_ENABLE ? `/monitoring${components}` : undefined;