Static Rendering vs Dynamic Rendering: Website Rendering Methods

Benefits of Static Rendering

Static rendering brings multiple advantages, making it the preferred solution for many websites:

• SEO Advantages：Pre-rendered content is easier for search engine crawlers to index because content is crawlable when the page loads. Search engines can directly read complete HTML content without waiting for JavaScript execution.
• Faster Loading：When pre-rendered content is deployed to platforms like Vercel, it can be cached and globally distributed (CDN). This allows users worldwide to access the website faster, reducing latency.
• Less Server Pressure：After content is cached, the server doesn't need to dynamically generate content for each user request, significantly reducing computational costs and server load.
• Better User Experience：Fast page loading speed, first-screen content immediately visible, improving user satisfaction.
• Higher Availability：Even if backend services are temporarily unavailable, cached static pages can still be accessed normally.

Technical Implementation of Static Rendering

Implementation of static rendering differs across frameworks:

Next.js App Router

In Next.js App Router, all routes are statically rendered by default. You can control this through:

// app/page.tsx - Default static rendering

export default async function Page() {
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return <div>{/* Render content */}</div>;
}

// Force static rendering
export const dynamic = 'force-static';

// Use revalidation (ISR)
export const revalidate = 3600; // Regenerate every 3600 seconds

Next.js Pages Router

In Pages Router, use \`getStaticProps\` and \`getStaticPaths\` to implement static rendering:

// pages/posts/[id].js

export default function Post({ post }) {
  return <article>{post.title}</article>;
}

// Get static paths
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));

return { paths, fallback: false };
}

// Get static props
export async function getStaticProps({ params }) {
const res = await fetch(\`https://api.example.com/posts/\${params.id}\`);
const post = await res.json();

return {
props: { post },
revalidate: 3600, // ISR: Regenerate every 3600 seconds
};
}

Use Cases

Static rendering is suitable for the following scenarios:

• Static Blog Posts：Content is relatively fixed and doesn't need frequent updates
• Marketing Landing Pages：Display fixed content, pursuing fast loading and SEO
• Documentation Websites：Content is stable, needs good search experience
• Product Showcase Pages：Product information is relatively fixed, suitable for pre-rendering
• Pages Without User Interaction：Pure display pages

Benefits of Dynamic Rendering

Although dynamic rendering requires more server resources, it has irreplaceable advantages in certain scenarios:

• Real-Time Data：Dynamic rendering enables applications to display real-time or frequently updated data. This is suitable for applications where data changes frequently, such as stock trading interfaces, real-time news, social media feeds, etc.
• User-Specific Content：Easier to provide personalized content, such as Dashboards or user profiles, and update data based on user interactions. Each user may see completely different content.
• Request-Time Information：Dynamic rendering allows access to information that can only be known at request time, such as cookies, URL search parameters, user geographic location, etc. This information cannot be predicted at build time.
• Data Consistency：Each request fetches the latest data, ensuring users see the most up-to-date content.
• Flexible Permission Control：Can dynamically decide which content to display based on user permissions.

Technical Implementation of Dynamic Rendering

Methods to implement dynamic rendering in different frameworks:

Next.js App Router

In App Router, you can enable dynamic rendering through:

// app/dashboard/page.tsx - Dynamic rendering

export const dynamic = "force-dynamic"; // Force dynamic rendering

export default async function Dashboard() {
  // Use request-time information like cookies, headers
  const { cookies } = await import("next/headers");
  const session = await getSession(cookies());

// Get user-specific data
const userData = await fetchUserData(session.userId);

return <div>{/* Personalized content */}</div>;
}

// Or use dynamic functions to automatically enable dynamic rendering
export default async function Page() {
const { cookies } = await import('next/headers');
// Using cookies() automatically enables dynamic rendering
}

Next.js Pages Router

In Pages Router, use \`getServerSideProps\` to implement dynamic rendering:

// pages/dashboard.js

export default function Dashboard({ userData }) {
  return <div>{userData.name}</div>;
}

// Executes on every request
export async function getServerSideProps(context) {
// Access request-time information
const { req, res, query } = context;
const session = await getSession(req);

// Get user-specific data
const userData = await fetchUserData(session.userId);

return {
props: {
userData,
},
};
}

Use Cases

Dynamic rendering is suitable for the following scenarios:

• User Dashboards：Need to display user-specific data and information
• Real-Time Data Display：Stock prices, sports scores, real-time news, etc.
• E-commerce Shopping Carts：Need to dynamically display content based on user status
• User Profiles：Personalized content display
• Content Requiring Permission Control：Display different content based on user permissions

Performance Consideration：The disadvantage of dynamic rendering is that each request requires server processing, and response speed may be slower. If your application is dynamic but some data requests are slow, the entire page will be blocked. This is why you need to properly use Streaming and Suspense to optimize user experience.

Client-Side Rendering (CSR)

Client-Side Rendering refers to page content being dynamically generated in the user's browser through JavaScript. The server only returns a basic HTML framework and JavaScript files, and the actual page content is generated after client-side JavaScript execution.

Characteristics：

• Slow Initial Load：Need to download and execute JavaScript to see content
• SEO Unfriendly：Search engine crawlers may not correctly index JavaScript-generated content
• Good Interactive Experience：Page switching doesn't require reloading, providing smooth user experience
• Less Server Pressure：Server only provides static files, doesn't perform rendering

Implementation Example：

// React CSR Example

import { useState, useEffect } from "react";
import { addUtmToExternalLink, getExternalLinkRel } from "@/lib/utils";

function App() {
const [data, setData] = useState(null);

useEffect(() => {
// Client-side data fetching
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []);

if (!data) return <div>Loading...</div>;

return <div>{data.content}</div>;
}

Use Cases：Single Page Applications (SPA), applications requiring rich interactions, internal tools that don't need SEO.

Server-Side Rendering (SSR)

Server-Side Rendering refers to the server executing a complete rendering process each time a user requests, generating HTML before returning it to the client. This is conceptually very similar to dynamic rendering, and SSR is often considered an implementation method of dynamic rendering.

Characteristics：

• SEO Friendly：Search engines can directly index complete HTML content
• Fast First Screen Load：Users see content immediately without waiting for JavaScript execution
• High Server Pressure：Each request requires server processing
• Real-Time Data：Each request fetches the latest data

Implementation Example：

// Next.js SSR Example (Pages Router)

export async function getServerSideProps(context) {
  // Executes on every request
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
};
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

Use Cases：Pages requiring real-time data, personalized content, dynamic pages requiring SEO.

Static Site Generation (SSG)

Static Site Generation refers to pre-generating HTML files for all pages at build time. These static files can be deployed to CDN for global fast distribution. SSG is an implementation method of static rendering.

Characteristics：

• Best Performance：Pre-generated static files load fastest
• SEO Friendly：Complete HTML content facilitates search engine indexing
• Low Cost：Can be deployed to free static hosting services
• Difficult Data Updates：Need to rebuild to update content

Implementation Example：

// Next.js SSG Example

export async function getStaticProps() {
  // Executes at build time
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
};
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

Use Cases：Blogs, documentation websites, marketing pages, websites with relatively fixed content.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a hybrid rendering method introduced by Next.js, combining the performance advantages of static rendering with the data update capabilities of dynamic rendering. Pages are pre-generated at build time but can be regenerated periodically in the background without redeploying the entire website.

Characteristics：

• Excellent Performance：Most requests return cached static pages
• Data Can Be Updated：Pages automatically regenerate in the background, keeping content fresh
• SEO Friendly：Pre-generated HTML facilitates search engine indexing
• High Flexibility：Can set different revalidation times

Implementation Example：

// Next.js ISR Example

export async function getStaticProps() {
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
// Revalidate every 60 seconds
revalidate: 60,
};
}

// Or use On-Demand Revalidation
// Manually trigger regeneration through API route
// pages/api/revalidate.js
export default async function handler(req, res) {
await res.revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
}

Use Cases：Websites where content needs regular updates but not real-time updates, such as news websites, product catalogs, blogs, etc.