Why rendering strategy matters in NextJS

Introduction

Rendering strategy decides how and when your web page shows content to users. It affects speed, user experience, and how search engines see your site.

When you want your page to load very fast for users.

When your content changes often and needs to update quickly.

When you want search engines to find and understand your page easily.

When you want to save server resources by generating pages only when needed.

When you want to balance between fast loading and fresh content.

Syntax

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <h1>Hello, world!</h1>;
}

Next.js uses different rendering strategies like Static Generation and Server-side Rendering.

You can control rendering by exporting special variables or using functions like getStaticProps or getServerSideProps.

Examples

This forces the page to be generated once at build time and served as static HTML.

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <h1>Static Page</h1>;
}

This makes the page render on every request, showing fresh content each time.

NextJS

export const dynamic = 'force-dynamic';

export default function Page() {
  return <h1>Dynamic Page</h1>;
}

This uses Static Generation with data fetched at build time.

NextJS

export async function getStaticProps() {
  return { props: { time: new Date().toISOString() } };
}

export default function Page({ time }) {
  return <p>Build time: {time}</p>;
}

This uses Server-side Rendering to fetch data on every request.

NextJS

export async function getServerSideProps() {
  return { props: { time: new Date().toISOString() } };
}

export default function Page({ time }) {
  return <p>Request time: {time}</p>;
}

Sample Program

This example shows a page that fetches the current time from an API on the client side. The page loads quickly with a placeholder, then updates with fresh data.

This approach uses client-side rendering to keep content fresh without reloading the whole page.

NextJS

import { useState, useEffect } from 'react';

export default function TimePage() {
  const [time, setTime] = useState('Loading...');

  useEffect(() => {
    fetch('/api/time')
      .then(res => res.json())
      .then(data => setTime(data.time));
  }, []);

  return <main>
    <h1>Current Time</h1>
    <p>{time}</p>
  </main>;
}

// API route (pages/api/time.js)
export default function handler(req, res) {
  res.status(200).json({ time: new Date().toISOString() });
}

Important Notes

Choosing the right rendering strategy helps your site load faster and feel smoother.

Static pages are great for content that doesn't change often.

Dynamic rendering is better for personalized or frequently updated content.

Summary

Rendering strategy controls when and how your page content is created and shown.

It affects speed, freshness, and SEO of your website.

Next.js gives you tools to pick the best strategy for each page.