Wavenet Podcast – Focus Tech – How to choose your frontend architecture? SPA, SSR, SSG

Wavenet Podcast – Focus Tech

How to choose your frontend architecture? SPA, SSR, SSG

After exploring the question “Have lightweight clients become too heavy?”, the Wavenet Podcast – Focus Tech team continues its series dedicated to frontend development.

In this episode, three architectures are put into perspective: SPA, SSR, and SSG.

The goal is clear: understand how they work, how they are built, and—above all—in which contexts they make sense.

Featuring Antoine Richez, Olivier Bossaer, and Simon Baudart, the discussion is educational, concrete, and grounded in real‑world practice.

Three architectures, three ways of thinking about the web

“It’s a single request — clearly the simplest of them all.”
— Antoine Richez

SPA — Single Page Application

A SPA (Single Page Application) is a web application made up of a single HTML page whose content is updated dynamically through JavaScript executed in the browser.

In practice:

• the browser loads a single page
• transitions and content changes occur without full page reloads
  only data is exchanged with the server via HTTP requests (API calls, fetch, etc.)

“You access a website, but in reality there’s only one page.
The changes are virtual: everything you see in the browser is dynamic code rendered for the user.”
— Antoine Richez

How does it work?

During the build, the framework (React, Angular…) compiles all the JavaScript into a bundle, usually with tools like Webpack or Vite.
This bundle is shipped along with the main HTML file.

Once loaded:

• navigation becomes very smooth
• the interface remains reactive and continuous

Points of attention

This approach does have limitations:

slower initial load, since the browser must download and execute all the JavaScript
nearly empty initial HTML, making SEO more challenging

Key takeaways
• Very dynamic and fluid
• Initial loading and SEO require extra attention

SSR — Server‑Side Rendering

SSR (Server‑Side Rendering) follows a different logic: the initial rendering is done on the server.

When a user accesses the site:

• the server generates a full HTML page,
• the content is visible immediately,
• JavaScript then takes over to handle interactivity.

“There’s a client bundle and a server bundle, and it’s the server bundle that performs the necessary generation when displaying the page.”

Why choose SSR?

Its main advantages include:

• fast initial display,
• better perceived performance,
• easier SEO.

Frameworks like Next.js or Nuxt.js rely on this hybrid model, combining server rendering with client‑side logic.

Technical complexity

JavaScript runs in two distinct environments:

• the browser,
• the server.

“Not all APIs are available everywhere.”

Some features (geolocation, DOM access, etc.) work only on the client, requiring greater discipline in development.

Key takeaways
• Good balance between performance and SEO
• More complex architecture to master

SSG — Static Site Generation

SSG (Static Site Generation) builds the entire site ahead of time, before deployment.

Each page is:

• generated during the build
• optimized
• stored as static files ready to be served

“With static generation, you know exactly what you’re outputting.
You can compress everything as much as possible.”
— Olivier Bossaer

Key advantages

• Very high performance
• Can handle large traffic volumes
• Simple infrastructure
• Smaller attack surface

“SSG is old made new again.
We’re going back to static sites—but with today’s tools.”
— Simon Baudart

Limitations

The trade‑off is reduced dynamism:

• any content change requires a new build
• not suited for real‑time updates

SSG is particularly relevant for:

• company websites
• blogs
• technical documentation
• catalogs with low update frequency

Key takeaways
• Performance, simplicity, efficiency
• Limited dynamism

Conclusion — It’s all about choosing the right fit

“In summary, SSG wins on performance and security,
SSR sits in the middle,
and SPA is the natural choice when you need high interactivity.”
— Pierre‑Arnaud Delsaut

All guests agree on one essential point: no single architecture is universally better.
The right choice always depends on the project’s context.

🎧 Listen to the full episode on the Wavenet Podcast – Focus Tech.