remove blog-data endpoint and use public json file instead

Author: dario-piotrowicz

.gitignore

@@ -33,6 +33,9 @@ tsconfig.tsbuildinfo
 
 dist/
 
+# Ignore the blog-data json that we generate during dev and build
+apps/site/public/blog-data.json
+
 # Ignore worker artifacts
 apps/site/.open-next
 apps/site/.wrangler

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

@@ -11,15 +11,15 @@ import type { BlogCategory } from '@/types';
 
 import styles from './layouts.module.css';
 
-const getBlogCategory = async (pathname: string) => {
+const getBlogCategory = (pathname: string) => {
   // pathname format can either be: /en/blog/{category}
   // or /en/blog/{category}/page/{page}
   // hence we attempt to interpolate the full /en/blog/{category}/page/{page}
   // and in case of course no page argument is provided we define it to 1
   // note that malformed routes can't happen as they are all statically generated
   const [, , category = 'all', , page = 1] = pathname.split('/');
 
-  const { posts, pagination } = await getBlogData(
+  const { posts, pagination } = getBlogData(
     category as BlogCategory,
     Number(page)
   );
@@ -38,7 +38,7 @@ const BlogLayout: FC = async () => {
       link: `/blog/${category}`,
     }));
 
-  const blogData = await getBlogCategory(pathname);
+  const blogData = getBlogCategory(pathname);
 
   return (
     <>

apps/site/layouts/Blog.tsx

@@ -1,38 +1,16 @@
-import {
-  ENABLE_STATIC_EXPORT,
-  IS_DEV_ENV,
-  NEXT_DATA_URL,
-  VERCEL_ENV,
-  VERCEL_REGION,
-} from '@/next.constants.mjs';
 import type { BlogCategory, BlogPostsRSC } from '@/types';
 
-const getBlogData = (
-  cat: BlogCategory,
-  page?: number
-): Promise<BlogPostsRSC> => {
-  const IS_NOT_VERCEL_RUNTIME_ENV =
-    (!IS_DEV_ENV && VERCEL_ENV && !VERCEL_REGION) ||
-    (!IS_DEV_ENV && !VERCEL_ENV);
-
-  // 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 || IS_NOT_VERCEL_RUNTIME_ENV) {
-    return import('@/next-data/providers/blogData').then(
-      ({ provideBlogPosts, providePaginatedBlogPosts }) =>
-        page ? providePaginatedBlogPosts(cat, page) : provideBlogPosts(cat)
-    );
-  }
-
-  const fetchURL = `${NEXT_DATA_URL}blog-data/${cat}/${page ?? 0}`;
+import {
+  provideBlogPosts,
+  providePaginatedBlogPosts,
+} from './providers/blogData';
 
-  // This data cannot be cached because it is continuously updated. Caching it would lead to
-  // outdated information being shown to the user.
-  return fetch(fetchURL)
-    .then(response => response.text())
-    .then(JSON.parse);
+const getBlogData = (cat: BlogCategory, page?: number): BlogPostsRSC => {
+  return page && page >= 1
+    ? // This allows us to blindly get all blog posts from a given category
+      // if the page number is 0 or something smaller than 1
+      providePaginatedBlogPosts(cat, page)
+    : provideBlogPosts(cat);
 };
 
 export default getBlogData;

apps/site/next-data/blogData.ts

@@ -1,10 +1,18 @@
 import { cache } from 'react';
 
-import generateBlogData from '@/next-data/generators/blogData.mjs';
 import { BLOG_POSTS_PER_PAGE } from '@/next.constants.mjs';
+import { blogData as rawBlogData } from '@/next.json.mjs';
 import type { BlogCategory, BlogPostsRSC } from '@/types';
 
-const { categories, posts } = await generateBlogData();
+const blogData = {
+  ...rawBlogData,
+  posts: rawBlogData.posts.map(post => ({
+    ...post,
+    date: new Date(post.date),
+  })),
+};
+
+const { categories, posts } = blogData;
 
 export const provideBlogCategories = cache(() => categories);
 

apps/site/next-data/providers/blogData.ts

@@ -2,6 +2,7 @@
 
 import _authors from './authors.json' with { type: 'json' };
 import _siteNavigation from './navigation.json' with { type: 'json' };
+import _blogData from './public/blog-data.json' with { type: 'json' };
 import _siteRedirects from './redirects.json' with { type: 'json' };
 import _siteConfig from './site.json' with { type: 'json' };
 
@@ -16,3 +17,6 @@ export const siteRedirects = _siteRedirects;
 
 /** @type {import('./types').SiteConfig} */
 export const siteConfig = _siteConfig;
+
+/** @type {import('./types').BlogData} */
+export const blogData = _blogData;

apps/site/next.json.mjs

@@ -3,8 +3,9 @@
   "type": "module",
   "scripts": {
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
-    "dev": "cross-env NODE_NO_WARNINGS=1 next dev --turbopack",
-    "serve": "npm run dev",
+    "dev": "npm run build-blog-data -- --watch & cross-env NODE_NO_WARNINGS=1 next dev --turbopack",
+    "serve": "npm run build-blog-data -- --watch & npm run dev",
+    "prebuild": "npm run build-blog-data",
     "build": "cross-env NODE_NO_WARNINGS=1 next build",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
     "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true npm run build",
@@ -16,13 +17,15 @@
     "lint": "turbo run lint:md lint:snippets lint:js lint:css",
     "lint:fix": "turbo run lint:md lint:js lint:css --no-cache -- --fix",
     "sync-orama": "node ./scripts/orama-search/sync-orama-cloud.mjs",
+    "build-blog-data": "node ./scripts/blog-data/generate.mjs",
     "test:unit": "cross-env NODE_NO_WARNINGS=1 jest",
     "test:unit:watch": "npm run test:unit -- --watch",
     "test": "turbo test:unit",
     "build:worker": "npx opennextjs-cloudflare build",
     "postbuild:worker": "node ./.cloudflare/prepare-build.mjs",
     "cf:preview": "npm run build:worker && sleep 3 && npx wrangler dev",
-    "cf:deploy": "npx wrangler deploy"
+    "cf:deploy": "npx wrangler deploy",
+    "postinstall": "npm run build-blog-data"
   },
   "dependencies": {
     "@heroicons/react": "~2.2.0",
@@ -73,11 +76,13 @@
   "devDependencies": {
     "@eslint/compat": "~1.2.7",
     "@next/eslint-plugin-next": "15.2.0",
+    "@opennextjs/cloudflare": "^0.6.4",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.2.0",
     "@testing-library/user-event": "~14.6.1",
     "@types/jest": "29.5.14",
     "@types/semver": "~7.5.8",
+    "chokidar": "^4.0.3",
     "eslint-config-next": "15.2.0",
     "eslint-import-resolver-typescript": "~3.8.3",
     "eslint-plugin-mdx": "~3.1.5",
@@ -96,7 +101,6 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "~8.25.0",
     "user-agent-data-types": "0.4.2",
-    "wrangler": "^4.6.0",
-    "@opennextjs/cloudflare": "^0.6.4"
+    "wrangler": "^4.6.0"
   }
 }

apps/site/package.json

@@ -0,0 +1,27 @@
+import { writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { watch } from 'chokidar';
+
+import generateBlogData from '../../next-data/generators/blogData.mjs';
+
+await generateAndSaveBlogData();
+
+const watchMode =
+  process.argv.includes('--watch') || process.argv.includes('-w');
+
+if (watchMode) {
+  watch('pages/en', { ignoreInitial: true }).on('all', generateAndSaveBlogData);
+}
+
+async function generateAndSaveBlogData() {
+  const blogData = await generateBlogData();
+
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  writeFileSync(
+    `${__dirname}/../../public/blog-data.json`,
+    JSON.stringify(blogData),
+    'utf8'
+  );
+}