Next.js 14 App Router: A Complete Guide to Server Components
With the release of Next.js 14, the development paradigm has shifted towards the App Router, which offers an intuitive approach to routing. It is based on the file system: each folder in the `app` directory automatically becomes a route (a URL segment), and a `page.tsx` file inside a folder defines the user interface for that route.
Next.js App Router Fundamentals
With the release of Next.js 14, the development paradigm has shifted towards the App Router, which offers an intuitive approach to routing. It is based on the file system: each folder in the `app` directory automatically becomes a route (a URL segment), and a `page.tsx` file inside a folder defines the user interface for that route.
The key innovation of this architecture is that all components are server-side by default (React Server Components). This means they are rendered on the server, generating pure HTML. As a result, a minimal amount of JavaScript is sent to the client, which significantly speeds up initial page load and improves overall performance.
Server Components: Power and Performance
| Type | Advantages | Limitations |
|---|---|---|
| Server Component | Server-side rendering for fast loading. | No access to hooks like useState, useEffect. |
| Server Component | Direct access to the database (DB) without an API. | Cannot use browser events (onClick, onChange). |
| Server Component | Reduces the client-side JavaScript bundle size. | Asynchronous operations only via async/await. |
Server Components are the foundation of the App Router and run exclusively on the server. They are stateless and cannot use hooks like useState or useEffect because they don't send any JavaScript to the client. Their main purpose is to fetch data and render static content.
The main advantage of Server Components is the ability to directly access data sources, such as a database, without needing to create an intermediate API layer. This simplifies the architecture and enhances security. Data is fetched using the familiar async/await syntax directly inside the component, which makes the code clean and predictable.
Thanks to these features, Server Components are ideal for displaying content that doesn't require immediate user interaction, such as blog posts, product pages, or static informational sections.
Client Components: Interactivity and State
When an application needs interactivity, Client Components come into play. To turn a Server Component into a Client Component, simply add the 'use client' directive at the very top of the file. This tells Next.js that this component and all its children should be hydrated on the client-side, meaning they receive the necessary JavaScript to function.
Client Components are the familiar React components that can use state, effects, and handle events. They should be used sparingly, only where truly necessary.
- Interactivity: buttons, forms, complex animations.
- State management: counters, toggles, modal windows.
- Event handling: click handlers (onClick), scroll handlers (onScroll), and other user actions.
- Using browser APIs: access to localStorage, window, and other objects.
This approach allows you to maintain the performance of server-side rendering for the majority of the page, adding interactivity only to specific, isolated areas.
Practical Application at Media Jet
| Task | Component Used | Technology |
|---|---|---|
| Displaying a blog post | Server Component | PostgreSQL, EditorJS |
| WebGL animations | Client Component | PixiJS |
| Submission form | Client Component | React Hooks (useState) |
| Modal windows | Client Component | React Hooks (useState) |
In a real-world project like Media Jet, the hybrid approach is fully utilized. Server Components are used for the main content, such as rendering blog posts. The data for the post is fetched directly from a PostgreSQL database, and the content created in EditorJS is converted to HTML on the server.
Meanwhile, Client Components are used for interactive elements. Complex WebGL animations on the homepage, implemented with PixiJS, submission forms with state validation, and modal windows are all offloaded to separate Client Components. This ensures that heavy libraries and interaction logic are loaded only when they are needed.
This balance allows for fast content loading, which is critical for SEO, while simultaneously providing a rich user experience (UX) with smooth animations and a responsive interface.
Optimization and Achieving High Metrics
Using Server Components by default is a powerful tool for SEO optimization. Search engine crawlers receive a fully rendered HTML document, which speeds up and simplifies content indexing. This directly contributes to achieving high scores in SEO reports.
On the other hand, the smart use of Client Components for interactive elements enhances the user experience. Reducing the amount of JavaScript sent to the client leads to significant improvements in performance metrics like Time to First Byte (TTFB) and Full Page Load. As a result, the following performance targets are achieved:
- Page load time: under 2 seconds.
- Lighthouse score: 90+.
- SEO score: 100.
Thus, the Next.js 14 App Router architecture allows for an optimal balance between performance, SEO, and interactivity, enabling the creation of modern and fast web applications.
