@fullstackdatasolutions/articles 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.12.0] - 2026-08-03
+
+### Fixed
+
+- **SEO: `ArticlesPage` no longer requires client-side JS to expose article links.** Previously `ArticlesPage` fetched its article list entirely client-side via `useArticles()`, so the server-rendered HTML for `/articles` contained only a "Loading articles..." placeholder with zero `<a href>` links — crawlers that don't execute JS (or that snapshot the initial response) never discovered any article URLs from the index page. `ArticlesPage` now accepts optional `initialArticles`/`initialCategories` props; when a consuming app passes server-fetched data (e.g. via `getAllArticles()`/`getAllCategories()` from `@fullstackdatasolutions/articles/server` in an `async` Server Component), the first render is fully populated with real links and no client fetch occurs on mount. This matches the pattern `CategoryArticlesPage` and `AuthorArticlesPage` already used. Omitting the new props preserves the previous client-fetch behavior, so this is backward compatible.
+
 ## [0.11.0] - 2026-07-30
 
 ### Added

package/README.md

@@ -110,11 +110,26 @@ export const siteConfig: ArticlesConfig = {
 // app/articles/page.tsx
 import type { Metadata } from 'next'
 import { ArticlesPage } from '@fullstackdatasolutions/articles'
-import { generateArticlesIndexMetadata } from '@fullstackdatasolutions/articles/server'
+import {
+  generateArticlesIndexMetadata,
+  getAllArticles,
+  getAllCategories,
+} from '@fullstackdatasolutions/articles/server'
 import { siteConfig } from '@/config/articles'
 export const metadata: Metadata = generateArticlesIndexMetadata(siteConfig)
-export default function Page() {
-  return <ArticlesPage config={siteConfig} />
+export default async function Page() {
+  // Fetching server-side and passing as initialArticles/initialCategories means the
+  // first response already contains real <a href> article links — required for
+  // crawlers that don't execute client JS. Omitting these props still works, but
+  // falls back to a client-side fetch and a "Loading articles..." placeholder in
+  // the initial HTML.
+  const [articles, categories] = await Promise.all([
+    getAllArticles(siteConfig),
+    getAllCategories(),
+  ])
+  return (
+    <ArticlesPage config={siteConfig} initialArticles={articles} initialCategories={categories} />
+  )
 }
 
 // app/articles/[...slug]/page.tsx

package/dist/index.cjs

@@ -715,12 +715,12 @@ function getBreadcrumbsConfig(config) {
 
 // src/useArticles.ts
 var import_react3 = require("react");
-function useArticles() {
+function useArticles(initialArticles, initialCategories) {
   const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
   const debounceRef = (0, import_react3.useRef)(null);
-  const [articles, setArticles] = (0, import_react3.useState)([]);
-  const [categories, setCategories] = (0, import_react3.useState)([]);
-  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [articles, setArticles] = (0, import_react3.useState)(initialArticles != null ? initialArticles : []);
+  const [categories, setCategories] = (0, import_react3.useState)(initialCategories != null ? initialCategories : []);
+  const [loading, setLoading] = (0, import_react3.useState)(initialArticles === void 0);
   const [error, setError] = (0, import_react3.useState)(null);
   const fetchArticles = (0, import_react3.useCallback)((query) => __async(this, null, function* () {
     try {
@@ -758,7 +758,7 @@ function useArticles() {
     }
   }), []);
   (0, import_react3.useEffect)(() => {
-    fetchArticles("");
+    if (initialArticles === void 0) fetchArticles("");
   }, [fetchArticles]);
   const handleSearch = (0, import_react3.useCallback)(
     (query) => {
@@ -889,9 +889,13 @@ function renderSection(section, ctx, config) {
       return null;
   }
 }
-function ArticlesPage({ config }) {
+function ArticlesPage({
+  config,
+  initialArticles,
+  initialCategories
+}) {
   var _a, _b, _c;
-  const state = useArticles();
+  const state = useArticles(initialArticles, initialCategories);
   const layout = (_a = config.layout) != null ? _a : DEFAULT_LAYOUT;
   const pageSize = (_b = config.pageSize) != null ? _b : DEFAULT_PAGE_SIZE;
   const categoriesPageSize = (_c = config.categoriesPageSize) != null ? _c : DEFAULT_CATEGORIES_PAGE_SIZE;