Merge pull request #7229 from layer5io/leecalcote/chore/full-site

Chore: Build performance - DSG for development environment and SSR for production environment

Author: leecalcote

.env.development

@@ -1 +1 @@
-GATSBY_GRAPHQL_IDE=playground
+# GATSBY_GRAPHQL_IDE=playground

gatsby-config.js

@@ -1,12 +1,19 @@
 /* eslint-env node */
 
+const isDevelopment = process.env.NODE_ENV === "development";
 const isProduction = process.env.NODE_ENV === "production";
 const isFullSiteBuild = process.env.BUILD_FULL_SITE === "true";
 const HEAVY_COLLECTIONS = ["members", "integrations"];
 const collectionIgnoreGlobs = isFullSiteBuild
   ? []
   : HEAVY_COLLECTIONS.map((name) => `**/${name}/**`);
-// const isDevelopment = process.env.NODE_ENV === "development";
+const devFlags = isDevelopment
+  ? {
+    PARALLEL_SOURCING: false,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+    PRESERVE_WEBPACK_CACHE: true,
+  }
+  : {};
 
 module.exports = {
   siteMetadata: {
@@ -21,8 +28,8 @@ module.exports = {
   },
   flags: {
     FAST_DEV: true,
-    PARALLEL_SOURCING: false, // Disable parallel sourcing to reduce memory pressure
     DEV_SSR: false,
+    ...devFlags,
   },
   trailingSlash: "never",
   plugins: [
@@ -518,4 +525,4 @@ module.exports = {
     "gatsby-plugin-meta-redirect",
     // make sure this is always the last one
   ],
-};
+};

gatsby-node.js

@@ -11,6 +11,8 @@ const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
 const config = require("./gatsby-config");
+const isDevelopment = process.env.NODE_ENV === "development";
+const isProduction = process.env.NODE_ENV === "production";
 const {
   componentsData,
 } = require("./src/sections/Projects/Sistent/components/content");
@@ -92,6 +94,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const envCreatePage = (props) => {
     const pageConfig = { ...props };
+
+    if (isDevelopment) {
+      pageConfig.defer = true;
+    } else if (isProduction) {
+      pageConfig.mode = "SSR";
+    }
     pageConfig.slices = { ...DEFAULT_SLICES, ...(pageConfig.slices || {}) };
 
     if (process.env.CI === "true") {

src/sections/Learn-Layer5/Chapters/index.js

@@ -70,6 +70,18 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
   const findServiceMeshImage = (images, serviceMesh) => images.find(image => image.name.toLowerCase() == serviceMesh);
   const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 
+  const missingServiceMeshImages = availableServiceMeshesArray
+    .filter(({ section }) => {
+      const meshImage = findServiceMeshImage(serviceMeshImages, section);
+      return !(meshImage && meshImage.imagepath?.childImageSharp?.gatsbyImageData);
+    })
+    .map(({ section }) => section);
+
+  if (missingServiceMeshImages.length > 0) {
+    const context = chapterData?.fields?.slug || "unknown-chapter";
+    throw new Error(`[Chapters] Missing meshesYouLearn image data for: ${missingServiceMeshImages.join(", ")} (chapter: ${context}).`);
+  }
+
   const ServiceMeshesAvailable = ({ serviceMeshes }) => serviceMeshes.map((sm, index) => {
     const meshImage = findServiceMeshImage(serviceMeshImages, sm.section);