5 Ways to Render a Web UI

Understanding the evolution
of web rendering strategies

Static Site Generation (SSG)

• Early web:                 Started as linked static HTML files
                                        No JS, CSS, or databases involved
• URLs:                          Directly map to the server file structure
• Fastest method:      Content is pre-rendered
                                        Ready to be served immediately

Server-Side Rendering (SSR)

• Dynamic content generation on the server

• URLs mapped to server functions, not static files

• Data fetched from data sources and used to  generate HTML dynamically 

• SEO Optimized for web crawlers (e.g., Google Bot)

Single Page Application (SPA)

• Initial Minimal HTML

• Client-side rendering with JS

• Dynamic DOM manipulation
  on the user's browser

• Enabled by AJAX:
  asynchronous data fetching

Pros and Cons
of SPA

Advantages:

• App-like user experience

• Consistent navigation
  without full page reloads
   

Disadvantages:

• Poor initial SEO due to empty initial HTML

• Longer Time-to-Interaction (TTI): JS must load, execute, and fetch data first

SSR   -   SPA   -   SSG

Comparing

Which one
Should you choose?

•  Initial page is rendered server-side
  (SEO & quick interaction)

• JavaScript "hydrates" the UI once loaded

• After hydration, the app behaves like an SPA

Hybrid Approach

• JS attaches event handlers and interactivity to static HTML

• Combining the advantages of SSR and SPA

• Static pages generated at build-time initially

• Pages regenerated incrementally on demand

• Regeneration triggered by:

  • Set revalidation time interval

  • User request after stale data

• Benefits:

  • Keeps static pages up-to-date

  • Maintains speed of
    static generation with
    dynamic content updates

Incremental Static Regeneration (ISR)

Specific to Next.js

• SSG:
  Fastest initial load, optimal SEO, static

• SSR:
  Dynamic data, optimal SEO,
  server-generated

• SPA:
  Rich user experience, SEO,
  and initial load challenges

• Hybrid & ISR:
  Balance static speed with
  dynamic flexibility

Summary & Key Takeaways