Next.js for Scalable Products: SSR, SEO & App Router
Production patterns for SEO-first UIs, server components, and performance. Built for platforms like TravelOS.
Next.js is a React framework that renders on the server by default, which is what makes it suitable for pages that need to be indexed. The App Router organises an application as nested layouts and server components, sending JavaScript to the browser only for the parts that are genuinely interactive.
SSR vs CSR
Server-Side Rendering for SEO-critical pages: landing, destinations, articles. Client-Side Rendering for interactive dashboards and forms. Hybrid approach for optimal UX and crawlability.
Dynamic content with static generation where possible. Incremental Static Regeneration (ISR) for content that updates periodically.
SEO-First UI
Metadata optimization per page. OpenGraph and Twitter cards. Structured data (Schema.org) for rich snippets. Canonical URLs to avoid duplicate content.
Sitemap generation, robots.txt, semantic HTML. Fast LCP and CLS for Core Web Vitals. These patterns power TravelOS and other content platforms.
App Router Architecture
App Router with server components by default. Colocated data fetching. Streaming for progressive rendering. Layouts and nested routes for consistent structure.
Client components only where interactivity is needed. Reduced bundle size and faster initial load.
Performance Tuning
next/image for optimized images. Font optimization with next/font. Lazy loading for below-the-fold content. Lighthouse 95+ targets.
Caching strategies, edge when appropriate. Minimal JavaScript for content-heavy pages.
Common questions about building with Next.js
When should a page be server-rendered rather than client-rendered?
- Server-render anything that must be indexed or shared: landing pages, articles, destination and product pages. Client-render what only a signed-in user touches — dashboards, forms, filters. A crawler that has to execute JavaScript to find your content will sometimes decide not to.
What is the difference between static generation and ISR?
- Static generation builds a page once at deploy time and serves identical HTML to everyone. Incremental Static Regeneration serves that cached HTML but rebuilds it in the background after a set interval, so content changing a few times a day stays fresh without a deploy.
Do server components make a site faster?
- They cut the JavaScript the browser downloads and runs, which usually improves largest contentful paint on content-heavy pages. They are not automatically faster: a server component making a slow database call still blocks the response. The gain is in the bundle, not the query.
How do you avoid duplicate content on a multilingual Next.js site?
- A self-referencing canonical on every page, plus hreflang alternates naming each language and x-default. Generate both from one helper so the page head and the sitemap cannot disagree, and only declare an alternate for a language that genuinely exists.