Next.js 15 and its powerful App Router provide developers with a modern and flexible framework for implementing various rendering strategies. The App Router enables better control over static rendering (SSG), server-side rendering (SSR), and client-side rendering (CSR), making it easier to optimize performance and deliver dynamic user experiences.

In this post, we’ll explore how to implement rendering strategies with the App Router using TypeScript examples.

1. Static Rendering (SSG)

Static Site Generation (SSG) is a rendering method where pages are pre-rendered at build time. In the App Router, generateStaticParams allows dynamic route generation for static pages.

Example: Static Rendering for Blog Pages

// app/blogs/[slug]/page.tsx

import { getBlogPost } from "@/lib/blogs";

export default async function BlogPage({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug);

  return (
    <article>
      <h1>{post.title}h1>
      <p>{post.content}p>
    article>
  );
}

// Generates static paths for dynamic routes
export async function generateStaticParams() {
  const posts = await fetchBlogSlugs();
  return posts.map((slug) => ({ slug }));
}

Use Case: Use SSG for pages with content that doesn’t change frequently, like blogs, product pages, or marketing content.

2. Server Rendering (SSR)

Server-Side Rendering (SSR) generates HTML on each request, ensuring the content is always up-to-date. In Next.js 15, server rendering is the default behavior for server components.

Example: Server Rendering for a User Dashboard

// app/dashboard/page.tsx

import { getUserData } from "@/lib/user";

export default async function DashboardPage() {
  const user = await getUserData();

  return (
    <section>
      <h1>Welcome, {user.name}h1>
      <p>Email: {user.email}p>
    section>
  );
}

// Force server fetching for dynamic data
export const fetchCache = "force-no-store";

Use Case: Use SSR for pages with frequently changing data or content that is user-specific, like dashboards or admin panels.

3. Client Rendering (CSR)

Client-Side Rendering (CSR) shifts rendering to the browser, making it suitable for interactive or user-driven components. You can enforce CSR in Next.js by using the "use client" directive.

Example: Client Rendering for a Weather Widget

"use client";

import { useState, useEffect } from "react";

export default function WeatherWidget() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    async function fetchWeather() {
      const response = await fetch("/api/weather");
      const data = await response.json();
      setWeather(data.condition);
    }

    fetchWeather();
  }, []);

  return <div>The weather is: {weather || "Loading..."}div>;
}

Use Case: CSR is ideal for highly interactive components or features that load data on the client side.

4. Combining Strategies: Hybrid Rendering

Next.js allows you to combine SSG, SSR, and CSR in the same project to optimize for performance and user experience.

Example: Blog Listing (SSG) and Blog Post Details (SSR)

Static Generation for Blog Listing:

// app/blogs/page.tsx

import { getAllBlogSummaries } from "@/lib/blogs";

export default async function BlogListPage() {
  const blogs = await getAllBlogSummaries();

  return (
    <div>
      {blogs.map((blog) => (
        <div key={blog.slug}>
          <a href={`/blogs/${blog.slug}`}>{blog.title}a>
        div>
      ))}
    div>
  );
}

// Pre-render all blog summaries
export async function generateStaticParams() {
  const blogs = await fetchBlogSlugs();
  return blogs.map((slug) => ({ slug }));}

Server-Side Rendering for Dynamic Blog Details:

// app/blogs/[slug]/page.tsx

import { getBlogPost } from "@/lib/blogs";

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug);

  return (
    <article>
      <h1>{post.title}h1>
      <p>{post.content}p>
    article>  );
}

This approach pre-renders the blog list while dynamically rendering the details for each blog post.

5. Tips for Optimizing Rendering in Next.js 15

• Use Static Rendering for pages that change infrequently or don’t rely on user-specific data.
• Opt for Server Rendering when you need real-time, dynamic data or personalization.
• Employ Client Rendering for interactive or UI-driven components that depend on client-side APIs.
• Leverage the App Router to manage layouts and nested routes for seamless integration of these strategies.

Conclusion

Next.js 15’s App Router empowers developers with fine-grained control over rendering strategies, making it easier than ever to balance performance and user experience. By understanding when to use static, server, and client rendering, you can build efficient and scalable applications tailored to your needs.

Powered by Froala Editor