Choosing Between Server-Rendered and Static: How Tobesee Leverages Next.js Rendering Strategies

One of the most important decisions when building a content website is how pages get rendered. Do you generate HTML on every request? Pre-build it at deploy time? Or use a hybrid approach? Next.js — the framework powering Tobesee — supports all three strategies, and understanding when to use each one can significantly impact your site performance and user experience.

The Three Rendering Strategies

Server-Side Rendering (SSR)

With SSR, the server generates HTML for each incoming request. The browser receives a fully rendered page, which is great for SEO and initial load performance. The trade-off is that every request requires server computation.

In Tobesee, SSR is used for pages that need fresh data on every request — like the admin dashboard, where you always want to see the latest content state.

Static Site Generation (SSG)

With SSG, pages are pre-built at deploy time. The HTML files are generated once and served directly from a CDN. This is the fastest possible delivery method because there is no server computation at request time.

Tobesee can use SSG for pages that change infrequently, like the homepage or the about page. These pages are built during npm run build and served as static files.

Incremental Static Regeneration (ISR)

ISR is a hybrid approach unique to Next.js. Pages are statically generated at build time, but they can be regenerated in the background after a specified time interval. This gives you the speed of static pages with the freshness of server-rendered content.

For a Tobesee blog, ISR is particularly useful for article pages. The first visitor after a content update might see slightly stale content, but the page regenerates in the background and subsequent visitors see the updated version.

How Tobesee Uses These Strategies

Article Listing Page

The /posts page fetches the article index from GitHub and renders a list of all articles. This page benefits from SSR or ISR because the article list changes whenever new content is published.

With ISR configured to revalidate every 60 seconds, the page stays fast (served from cache most of the time) while picking up new articles within a minute of publication.

Individual Article Pages

Each article page (/posts/[slug]) fetches a single Markdown file from GitHub and renders it as HTML. These pages are good candidates for ISR because individual articles change infrequently after publication.

Admin Pages

The admin dashboard and content editor always use SSR. These pages need real-time data — the latest article list, the current content of an article being edited — and caching would cause confusion.

Static Pages

Pages like /about, /contact, /privacy, and /terms are fully static. Their content is defined in the source code and only changes during deployments. SSG is the right choice here.

Performance Impact

The rendering strategy directly affects two key metrics:

Time to First Byte (TTFB)

• SSG/ISR (cached): 10-50ms — the CDN serves a pre-built file
• ISR (regenerating): 200-500ms — the server rebuilds the page
• SSR: 200-800ms — the server renders on every request

Largest Contentful Paint (LCP)

Because all three strategies deliver complete HTML (not empty shells that need JavaScript to fill in), LCP is primarily determined by asset loading rather than rendering strategy. Tobesee pages typically achieve LCP under 2 seconds on mobile connections.

Practical Configuration in Next.js

Next.js App Router (which Tobesee uses) handles rendering through route segment configuration:

// Static page — built at deploy time
export const dynamic = 'force-static';

// Server-rendered page — fresh on every request
export const dynamic = 'force-dynamic';

// ISR page — revalidate every 60 seconds
export const revalidate = 60;

These configurations are set per page, giving you fine-grained control over how each route behaves.

Comparing with Other Platforms

WordPress

WordPress generates every page dynamically by default. Each request triggers PHP execution and database queries. Performance depends heavily on caching plugins that essentially convert dynamic pages into static files — achieving what Next.js SSG does natively.

Gatsby

Gatsby is a pure static site generator. Every page is pre-built at deploy time. This delivers excellent performance but means content updates require a full rebuild and redeployment. For sites with hundreds of pages, rebuilds can take several minutes.

Hugo and Jekyll

These static site generators also require full rebuilds for content changes. They are fast at building but lack the server-side rendering option for pages that need dynamic data.

Tobesee with Next.js

Tobesee gets the best of all approaches. Static pages are pre-built for speed. Dynamic pages are server-rendered for freshness. ISR pages balance both. And the admin panel works as a full server-rendered application. All of this runs on a single framework without plugins or additional infrastructure.

SEO Considerations

Search engines prefer pages that load quickly and deliver complete HTML. All three Next.js rendering strategies satisfy this requirement because the HTML is generated on the server (or at build time), not in the browser.

Key SEO benefits:

• Complete HTML delivered on first request — no JavaScript required for content visibility
• Fast TTFB from CDN-served static and ISR pages
• Dynamic meta tags generated per page for accurate search result snippets
• Automatic sitemap at /sitemap.xml listing all public pages

Choosing the Right Strategy for Your Pages

| Page Type | Recommended Strategy | Why | |-----------|---------------------|-----| | Homepage | ISR (60s) | Balance between freshness and speed | | Article listing | ISR (60s) | New articles appear within a minute | | Individual articles | ISR (300s) | Articles rarely change after publication | | Resource listing | ISR (60s) | Resources update occasionally | | About / Contact / Legal | SSG | Content only changes during deployments | | Admin dashboard | SSR | Always needs real-time data | | Article editor | SSR | Must show current content state |

Conclusion

The rendering strategy you choose affects performance, SEO, and user experience. Tobesee benefits from Next.js flexibility by using the right strategy for each page type — static pages load instantly from the CDN, content pages stay fresh through ISR, and admin pages always show real-time data through SSR. This combination delivers a fast, SEO-friendly site without the complexity of external caching layers.