React blog section components

A blog index is a scanning surface. People read titles and almost nothing else, so the title needs the most typographic weight on the card and the excerpt needs to be short enough that every card ends up the same height. Truncate excerpts by character count on the server rather than with line-clamp alone, because clamping still ships the full text and leaves ragged card heights when your grid rows are not fixed. Two lines is plenty.

Client-side fuzzy search is the right call up to a few hundred posts and wrong after that. Two of these blocks filter an in-memory array, which is instant and needs no backend, and also means the whole post list is in the JavaScript payload. Past roughly 300 posts, move to a server route or an index like Pagefind. Whichever you choose, render the full list in the HTML and let search filter it, so crawlers and people with JavaScript disabled still see your archive.

Be deliberate about dates. A visible publish date is honest and helps with news-style content, and it also quietly kills your evergreen tutorials once they are eighteen months old. If your posts age well, show an updated date instead and actually update them. If you use categories, keep the set small enough that each one has at least four posts, because a filter that returns one result feels broken.

Use real links for pagination. Infinite scroll on a blog index means your older posts have no crawlable URL and nobody can share page four, and the back button usually loses their place. Numbered pages with anchor tags cost you nothing in perceived speed if you prefetch. On images, set an explicit aspect ratio on every card thumbnail and only mark the featured post's image as priority, otherwise you are racing twelve images for bandwidth above the fold.