React
React is a JavaScript library for building user interfaces, developed by Meta. It is the most widely used frontend framework and forms the foundation of Next.js, which adds server rendering and other capabilities needed for marketing websites. For web development, React provides a component based architecture that makes building and maintaining complex websites more manageable.
This page covers how React is used for marketing websites, its benefits and limitations, common mistakes, and how it fits into the broader web development stack.
What It Is and Why It Matters
React lets you build user interfaces from reusable components. A component is a self contained piece of UI: a navigation bar, a hero section, a product card, a contact form. Each component manages its own rendering logic and can be composed with other components to build complete pages.
For marketing websites, the component model means that design elements can be built once and reused across pages. A hero section component, a feature list component, and a call to action component can be combined in different configurations to create varied page layouts without rebuilding each element from scratch.
React alone renders content in the browser using JavaScript. This is called client side rendering (CSR). For marketing websites, CSR has a significant limitation: search engines may not fully execute JavaScript, which means content might not be indexed properly. This is why marketing websites built with React typically use Next.js, which adds server side rendering to ensure search engines see complete page content.
Key React concepts for marketing websites include: components (reusable UI elements), props (data passed to components), state (interactive data that changes), and hooks (functions that add capabilities to components). Server Components (introduced with React 18 and fully supported in Next.js) render on the server, which is the recommended approach for content that does not need client side interactivity.
Common Use Cases
How React is used in marketing website development.
Component Based Design Systems
Building a library of reusable UI components (hero sections, feature grids, testimonials, CTAs) that can be combined to create consistent, varied page layouts. Each component is designed once and used across the entire site.
Interactive Marketing Features
Building interactive elements like pricing calculators, product configurators, ROI tools, and dynamic forms. React state management makes it straightforward to build complex interactive features that respond to user input in real time.
CMS Block Architecture
Creating a block based CMS where each block type (hero, features, FAQ, CTA) is a React component. Content editors select and configure blocks in the CMS, and React renders them on the page. This is how this website works with Payload CMS.
Dynamic Content Loading
Loading content dynamically based on user interaction: expanding accordion sections, loading more items in a list, filtering product catalogs, or showing personalized content based on user segment.
Responsive Component Design
Building components that adapt to different screen sizes and devices. React combined with CSS frameworks like Tailwind CSS enables responsive design at the component level, ensuring consistent experience across devices.
Multi Page Application Architecture
Building marketing websites with multiple page types (landing pages, blog posts, product pages, resource hubs) that share common components but have distinct layouts. React component composition makes this modular and maintainable.
Practical Experience
I use React (through Next.js) for all marketing website projects. The component architecture aligns perfectly with how marketing websites are structured: reusable sections that are combined in different configurations across pages.
My workflow starts with designing the component library based on the site requirements. For a typical marketing site, this includes: multiple hero variants, feature/benefit grids, about/content sections, testimonial displays, FAQ accordions, CTA blocks, and form components. Each component is built with customization props (colors, layouts, content) so it can be adapted for different pages without duplicating code.
For CMS integration, I build each block type as a React component that receives its content as props from the CMS. The BlockRenderer pattern (which this site uses) maps CMS block types to React components, so adding a new section type means creating a new component and registering it. This approach gives content editors flexibility to build pages from blocks while keeping the frontend code modular.
One important architectural decision is the client vs server component boundary. In Next.js with React Server Components, I default to server components for all content rendering. Only components that need user interaction (forms, accordions, carousels, mobile menus) use "use client". This minimizes the JavaScript sent to the browser, which improves page load performance and Core Web Vitals scores.
For styling, I use Tailwind CSS with React components. Tailwind utility classes are applied directly in the component JSX, which keeps styles co located with the component logic. This approach produces small CSS bundles because unused styles are automatically removed during the build process.
I also use React for interactive marketing tools when needed: pricing calculators that update in real time, product configurators that show different options, and lead qualification forms that adapt based on user responses. React state management handles these interactions cleanly, and the component model means these interactive features integrate seamlessly into the broader site.
Common Mistakes to Avoid
Common React mistakes in marketing website development.
Client Side Rendering for Content Pages
Building content pages as client side React applications without server rendering. Search engines may not index client rendered content properly, and users see a loading state instead of immediate content. Use Next.js with server components for any content that needs to be indexed.
Over Componentization
Breaking the UI into too many tiny components that add complexity without adding reusability. A button that is used once does not need its own component file. Components should represent meaningful, reusable UI patterns, not every HTML element.
Excessive Client Side State
Managing data in React state that should come from the server. Marketing page content, navigation data, and other static information should be fetched on the server, not stored in client state. Client state should be reserved for truly interactive data (form inputs, UI toggles, user preferences).
Not Optimizing Bundle Size
Importing large libraries (chart libraries, animation libraries, rich text editors) on every page when they are only used on specific pages. Use dynamic imports (next/dynamic) to load heavy components only when needed, keeping the initial page load fast.
Ignoring Accessibility
Building interactive components without proper accessibility: missing ARIA attributes, non keyboard navigable elements, missing focus management. Interactive React components need explicit accessibility implementation because HTML semantics alone are not sufficient for custom UI elements.
Frequently Asked Questions
Not necessarily. Simple marketing websites with mostly static content can be built with plain HTML/CSS or simpler tools. React (through Next.js) becomes valuable when you need: a component based CMS with flexible page building, interactive features, a design system with reusable components, programmatic generation of many pages, or a development workflow that supports frequent updates and iterations.
All three can build marketing websites. React has the largest ecosystem and most framework options (Next.js). Vue has Nuxt.js which provides similar capabilities. Angular is less common for marketing sites. For SEO focused marketing websites, the framework matters less than the server rendering capability. Next.js (React) and Nuxt (Vue) both provide strong server rendering. I use React/Next.js because of the larger ecosystem and community support.
React alone (client side rendering) can cause SEO issues because content depends on JavaScript execution. React with Next.js (server rendering) is excellent for SEO because pages are rendered as complete HTML on the server. The distinction is crucial: React is a rendering library, and how you render (server vs client) determines the SEO impact. Always use server rendering for content that needs to be indexed.
React is a UI library for building components and managing rendering. Next.js is a framework built on React that adds: server side rendering, static generation, file based routing, API routes, image optimization, and deployment tooling. For marketing websites, you almost always want Next.js rather than React alone, because Next.js provides the server rendering and SEO capabilities that marketing sites require.
React components receive content from the CMS as props (data inputs). The CMS stores content (text, images, configuration) and React components render it visually. This is called the "headless CMS" pattern: the CMS manages content and the React frontend manages presentation. Popular headless CMS options include Payload, Contentful, Sanity, and Strapi. This site uses Payload CMS with React components rendered through Next.js.
Related Topics
Need a React Marketing Website?
I build React based marketing websites with Next.js that combine component based design, CMS flexibility, and strong SEO performance.