@fullstackdatasolutions/articles 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstackdatasolutions/articles",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": false,
   "license": "MIT",
   "funding": {

package/src/ArticlesPage.tsx

@@ -152,8 +152,16 @@ function renderSection(
   }
 }
 
-export function ArticlesPage({ config }: Readonly<{ config: ArticlesConfig }>) {
-  const state = useArticles()
+export function ArticlesPage({
+  config,
+  initialArticles,
+  initialCategories,
+}: Readonly<{
+  config: ArticlesConfig
+  initialArticles?: Article[]
+  initialCategories?: CategoryInfo[]
+}>) {
+  const state = useArticles(initialArticles, initialCategories)
   const layout = config.layout ?? DEFAULT_LAYOUT
   const pageSize = config.pageSize ?? DEFAULT_PAGE_SIZE
   const categoriesPageSize = config.categoriesPageSize ?? DEFAULT_CATEGORIES_PAGE_SIZE

package/src/__tests__/ArticlesPage.test.tsx

@@ -273,6 +273,23 @@ describe('ArticlesPage', () => {
     await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
   })
 
+  it('renders real article links synchronously when given server-fetched initialArticles, with no client fetch', () => {
+    // Simulates the SSR path: a server component fetches articles via getAllArticles()
+    // and passes them down, so Googlebot's first request already contains real hrefs.
+    ;(globalThis.fetch as jest.Mock).mockReturnValue(new Promise(() => {}))
+    render(
+      <ArticlesPage config={{ ...baseConfig, layout: ['latest'] }} initialArticles={mockArticles} />
+    )
+
+    expect(screen.getByText('Latest Articles')).toBeInTheDocument()
+    expect(screen.queryByText('Loading articles...')).not.toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Second Article' })).toHaveAttribute(
+      'href',
+      '/articles/article-2'
+    )
+    expect(globalThis.fetch).not.toHaveBeenCalled()
+  })
+
   it('uses pageSize from config', async () => {
     const manyArticles = Array.from({ length: 10 }, (_, i) => ({
       ...mockArticles[0],

package/src/__tests__/useArticles.test.ts

@@ -190,6 +190,34 @@ describe('useArticles', () => {
     })
   })
 
+  describe('with server-seeded initial data', () => {
+    it('starts populated and not loading, and skips the mount fetch', () => {
+      ;(globalThis.fetch as jest.Mock).mockReturnValue(new Promise(() => {}))
+      const mockCategories = [
+        { name: 'Campaigns', slug: 'campaigns', count: 2, featuredImage: '/x.jpg' },
+      ]
+
+      const { result } = renderHook(() => useArticles(mockArticles, mockCategories))
+
+      expect(result.current.loading).toBe(false)
+      expect(result.current.articles).toHaveLength(3)
+      expect(result.current.categories).toEqual(mockCategories)
+      expect(globalThis.fetch).not.toHaveBeenCalled()
+    })
+
+    it('still fetches when a search is performed after seeding', async () => {
+      ;(globalThis.fetch as jest.Mock).mockResolvedValue({
+        ok: true,
+        json: async () => ({ articles: [mockArticles[0]] }),
+      })
+
+      const { result } = renderHook(() => useArticles(mockArticles, []))
+      act(() => result.current.handleSearch(''))
+
+      await waitFor(() => expect(globalThis.fetch).toHaveBeenCalledWith('/api/articles'))
+    })
+  })
+
   it('refetches all articles when handleSearch is called with empty string', async () => {
     ;(globalThis.fetch as jest.Mock).mockResolvedValue({
       ok: true,

package/src/useArticles.ts

@@ -12,12 +12,15 @@ export interface UseArticlesReturn {
   handleSearch: (query: string) => void
 }
 
-export function useArticles(): UseArticlesReturn {
+export function useArticles(
+  initialArticles?: Article[],
+  initialCategories?: CategoryInfo[]
+): UseArticlesReturn {
   const [searchQuery, setSearchQuery] = useState('')
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const [articles, setArticles] = useState<Article[]>([])
-  const [categories, setCategories] = useState<CategoryInfo[]>([])
-  const [loading, setLoading] = useState(true)
+  const [articles, setArticles] = useState<Article[]>(initialArticles ?? [])
+  const [categories, setCategories] = useState<CategoryInfo[]>(initialCategories ?? [])
+  const [loading, setLoading] = useState(initialArticles === undefined)
   const [error, setError] = useState<string | null>(null)
 
   const fetchArticles = useCallback(async (query: string) => {
@@ -66,7 +69,9 @@ export function useArticles(): UseArticlesReturn {
   }, [])
 
   useEffect(() => {
-    fetchArticles('')
+    if (initialArticles === undefined) fetchArticles('')
+    // Seeded data came from the server render; skip the redundant client fetch on mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchArticles])
 
   const handleSearch = useCallback(