Next.js

Static and Dynamic Rendering

by Tomas Trescak t.trescak@westernsydney.edu.au

Next.js

/

Server vs. Client Components

  • Slow websites = frustrated users
  • Rendering & Caching: The Dynamic Duo
  • Example: A Blog Website

Next.js

/

Static Rendering

    export default function CategoriesPage() {
  return (
    <ul>
      <li>Technology</li>
      <li>Travel</li>
      <li>Food</li>
    </ul>
  );
}
/app/categories/page.tsx
  • Pre-building pages at build time
  • Simple Example: Category Page

Next.js

/

Static Rendering

    export default function WelcomePostPage() {
    return (
        <div>
            <h1>Welcome to our Blog!</h1>
            <p>This is an introductory post...</p>
        </div>
    )
}
/app/blog/welcome-post/page.tsx
  • Pre-building pages at build time
  • Simple Example: Category Page
  • Advanced Example: Static Blog Post

Next.js

/

Server vs. Client Components

  • ✅  When to Use
    • Rarely changing content
    • You do not mind full site regeneration
  • ❌ When not to Use
    • Frequently changing content
    • Authorised routes (user-specific)

Next.js

/

Dynamic Rendering

    async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  if (!res.ok) {
    throw new Error('Failed to fetch post');
  }
  return res.json();
}

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

  return (
    <div>
      <h1>{post.title}</h1>
      <p>Views: {post.views}</p> <narration>Dynamic view count</narration>
      <p>{post.content}</p>
    </div>
  );
}
/ app/blog/[slug]/page.tsx
  • Rendering pages at request time
  • Simple Example: Blog Post with View Count

Next.js

/

Dynamic Rendering

    import { useSearchParams } from 'next/navigation'

async function getPosts(tag: string) {
  let url = `https://api.example.com/posts?tag=${tag}`
  const res = await fetch(url);
  return res.json();
}

export default async function BlogPage() {
  const tag = useSearchParams().get('tag')
  const posts = await getPosts(tag)

  return (
    <ul>
      {posts.map(post => (
          <li key={post.slug}><a href={`/blog/${post.slug}`}>{post.title}</a></li>
      ))}
    </ul>
  )
}
/app/blog/page.tsx
  • Rendering pages at request time
  • Advanced Example: Filtering Blog Posts

Next.js

/

Server vs. Client Components

  • ✅  When to Use
    • User-specific data
    • Frequently changing content
    • Request parameters
  • ❌ When not to Use
    • Static content

Next.js

/

When does Next.js render what?

  • Static
    • No runtime data fetching
    • generateStaticParams
    • no dynamic APIs
  • Dynamic
    • Runtime data fetching
    • dynamic APIs ( cookies , headers , searchParams )
    • cache: 'no-store'
    • dynamic = 'force-dynamic'

Next.js

/

Conclusion

  • Rendering patterns are crucial for web performance
  • Static rendering for static content, dynamic rendering for dynamic content
  • Static = CDN Friendly
  • Next.js intelligently handles rendering based on your code
  • Understanding these concepts is essential for building efficient web applications