DEV Community: Guilherme Amaral

The Different Web Navigation and Rendering Techniques Explained

Guilherme Amaral — Sun, 15 Jun 2025 00:00:55 +0000

(auto-translated, original post here)

SSG, SSR, SPA, MPA, CSR. If you're a developer and, like me, have tried to venture a bit into frontend web development, you've probably come across some of these terms. One of the biggest confusions I faced while researching the topic was understanding the different types of rendering—not because they are necessarily complex, but because it's somewhat difficult to find clear and precise information about them. A large portion of the available resources and discussions in technical forums end up mixing distinct concepts, especially rendering methods with navigation strategies. When they don't mix these concepts, they focus too much on the advantages and disadvantages of each approach, without adequately explaining what they are and how they work.

Before we begin, it's important to recall the lifecycle of a request and the difference between static and dynamic content. When a user accesses a website, their browser first makes an HTTP request to get the page's HTML. After receiving the HTML, the browser starts to process it and, during this process, identifies and makes new requests to obtain necessary additional resources (like CSS files, JavaScript, and images). This process can take anywhere from a few milliseconds to several seconds, depending on the latency and speed of the connection.

As for the content, it can be classified as static or dynamic. Static content is that which remains the same for all users and rarely changes—for example, a site's logo, institutional texts, or decorative images. Dynamic content, on the other hand, is generated or customized at the time of the request, and can vary based on several factors such as the logged-in user, the time of day, or database data—for example, a social media feed, comments on a blog, or data from an admin dashboard.

To start, it's crucial to establish a clear distinction: these methods can be divided into two main categories—navigation methods (SPA and MPA) and rendering methods (SSR, SSG, and CSR). When you see someone asking, for example, whether SSR or SPA is better, there's already a conceptual error in the question itself, as they are concepts that address different aspects of web development. To make it easier to understand, let's first explore the navigation methods, then the rendering methods, and finally, explain how they can be combined and used together.

Navigation Methods: MPA vs SPA

Navigation methods define how the transition between different pages or sections of a site is handled. Let's use a simple portfolio with two pages as an example: "Who I am" (homepage at portfolio.com) and "My projects" (at portfolio.com/projects). Navigation between these pages can be done through a top navigation bar, where the user clicks to access the desired page.

In the MPA (Multi-Page Application) method, which is the traditional web approach, when a user navigates from the homepage to the projects page, the browser makes a new request to the server. The server, in turn, sends a new HTML page to the browser. This method has been used since the beginning of the internet and continues to be widely employed today, being especially suitable for sites with mostly static content, like blogs and institutional websites. Astro, for example, is a framework that traditionally uses this approach.

In the SPA (Single-Page Application) method, which has gained popularity in the last decade, navigation between pages is actually a simulation. The entire site functions as a single page, and when the user "navigates," what really happens is a dynamic content swap, without the need to reload the entire page. The address in the browser's URL bar changes to give the impression of navigation, but it's all managed by JavaScript. This approach is widely used in modern web applications, like Gmail and Facebook, where the user experience needs to be more fluid and similar to a desktop application. Frameworks like React, Vue, and Angular were initially designed with this type of application in mind. The request cycle here is bifurcated: the browser first receives a minimal static HTML, and then JavaScript takes over, rendering the page dynamically.

It's important to note that a site can use both methods. For example, we can keep the navigation between "home" and "projects" as an SPA, but have a "blog" section that loads as an MPA, leveraging the best of each approach as needed.

Rendering Methods: SSG, SSR, and CSR

Now that we understand how navigation works, let's explore the different rendering methods. These methods determine how and when the HTML content and structure of the page are generated. To facilitate initial understanding, I'll explain the methods in their most classic and isolated forms.

SSG (Static Site Generation) is the method where pages are rendered during the website's build process. In this process, all the source code (whether it's in React, Vue, Svelte, or any other framework) is transformed into optimized HTML, CSS, and JavaScript files. The resulting JavaScript usually focuses on the page's interactive functionalities, not being responsible for the basic content structure, which is handled by the HTML and CSS. Astro, for example, is a framework that uses SSG in combination with MPA. This method is ideal for blogs, documentation sites, and portfolios, where the content doesn't change frequently. In SSG, the page structure is static. During the request cycle, the server simply delivers pre-generated HTML files without any additional processing.

In CSR (Client-Side Rendering), the page structure is rendered in the user's browser. The server typically sends a simplified HTML file, along with the necessary JavaScript to build the interface. Although the basic HTML loads, the page only becomes functional once the JavaScript is executed, making the initial load time longer. This is the method traditionally used by pure React applications and is common in SPAs, being ideal for highly interactive applications where content changes dynamically.

SSR (Server-Side Rendering), similar to SSG, generates complete HTML, but it does so on-demand, when the user makes the request. This allows the content to be personalized for that user or to be up-to-date with the latest information from the database, without the need to access a JSON API. Frameworks like Next.js make extensive use of this approach. SSR also has some disadvantages, such as a higher load on the server compared to other methods, and, in the case of pages using JavaScript frameworks, it also requires a runtime like Node.js running on the server.

Combinations and Nuances of Rendering Methods

The reality of modern web development is that rendering methods rarely exist in their "pure" forms. The combinations between them are not just a matter of using different methods for different pages, but of mixing them in fundamental and intrinsic ways, where it's sometimes difficult to distinguish where one method ends and another begins. These methods also don't need to be used to load an entire page; they can be used to render just parts of it.

For example, consider a page that uses CSR (Client-Side Rendering). In its most basic form, it would start with an almost empty HTML and rely entirely on JavaScript to build the interface. But do we really need to start with a blank page? We can leverage the build process to pre-render the initial content the user will see (known as the "first paint" or "initial render"), creating a hybrid experience between SSG and CSR. In this combination, the initial structure of the page uses SSG, while new changes use CSR, optimizing the request cycle.

Going further, let's suppose that on this same page, we want to add information that changes constantly, like the weather forecast, and we want the user to have access to this information immediately. Using JavaScript requests would only work after the page is loaded, so we can use SSR instead of SSG for our initial HTML, and continue using CSR for future changes on the page.

We can create any combination of the three rendering methods and use them with any mix of the two navigation types; you are not limited to choosing just one.

Conclusion

The choice between different navigation and rendering methods is not a matter of "better or worse," but of suitability for the use case. Many modern applications combine different approaches to optimize the user experience in each context.

The most important thing is to understand how these techniques can be used to improve your application and adapt to your limitations. With the emergence of increasingly sophisticated frameworks, the lines between these approaches become more blurred, allowing for ever more hybrid and optimized solutions.

This is an extensive and complex topic, and there are many nuances that could not be fully addressed in this text. If you have any critiques, questions, or suggestions, I would be very happy to answer them in the comments.

Explicando as diferentes técnicas de navegação e renderização na web

Guilherme Amaral — Sat, 15 Feb 2025 21:47:47 +0000

SSG, SSR, SPA, MPA, CSR. Se você é desenvolvedor e, assim como eu, tentou se aventurar um pouco no desenvolvimento frontend web, já deve ter se deparado com algum desses termos. Uma das maiores confusões que enfrentei pesquisando o assunto foi entender os diferentes tipos de renderização - não por serem necessariamente complexos, mas porque existe uma certa dificuldade em encontrar informações claras e precisas sobre. Grande parte dos recursos disponíveis e das discussões em fóruns técnicos acabam misturando conceitos distintos, especialmente métodos de renderização com estratégias de navegação. Quando não misturam esses conceitos, focam muito nas vantagens e desvantagens de cada abordagem, sem explicar adequadamente o que são e como funcionam.

Antes de iniciar, é importante relembrar o ciclo de vida de uma requisição e a diferença entre conteúdo estático e dinâmico. Quando um usuário acessa um site, seu navegador primeiro faz uma requisição HTTP para obter o HTML da página. Após receber o HTML, o navegador começa a processá-lo e, durante esse processo, identifica e realiza novas requisições para obter recursos adicionais necessários (como arquivos CSS, JavaScript e imagens). Este processo pode levar desde alguns milissegundos até vários segundos, dependendo da latência e velocidade da conexão.

Quanto ao conteúdo, ele pode ser classificado como estático ou dinâmico. Conteúdo estático é aquele que permanece o mesmo para todos os usuários e raramente muda - por exemplo, o logotipo de um site, textos institucionais ou imagens decorativas. Já o conteúdo dinâmico é gerado ou personalizado no momento da requisição, podendo variar com base em diversos fatores como o usuário logado, a hora do dia ou dados do banco de dados - por exemplo, o feed de uma rede social, comentários em um blog ou dados de um painel administrativo.

Para começar, é fundamental estabelecer uma distinção clara: esses métodos podem ser divididos em duas categorias principais - os métodos de navegação (SPA e MPA) e os métodos de renderização (SSR, SSG e CSR). Quando você encontra alguém perguntando o que vale mais a pena entre SSR e SPA, por exemplo, já existe um erro conceitual na própria pergunta, pois são conceitos que abordam aspectos diferentes do desenvolvimento web. Para facilitar o entendimento, vamos primeiro explorar os métodos de navegação, depois os métodos de renderização e, por fim, explicar como eles podem ser combinados e utilizados em conjunto.

Métodos de Navegação: MPA vs SPA

Os métodos de navegação definem como é realizada a transição entre diferentes páginas ou seções de um site. Vamos usar como exemplo um portfólio simples com duas páginas: "Quem eu sou" (página inicial em portfolio.com) e "Meus projetos" (em portfolio.com/projetos). A navegação entre essas páginas pode ser feita através de uma barra de navegação superior, onde o usuário clica para acessar a página desejada.

No método MPA (Multi Page Application), que é a abordagem tradicional da web, quando um usuário navega da página inicial para a página de projetos, o navegador faz uma nova requisição ao servidor. O servidor, por sua vez, envia uma nova página HTML para o navegador. Este método é utilizado desde o início da internet e continua sendo amplamente empregado hoje, sendo especialmente adequado para sites com conteúdo principalmente estático, como blogs e sites institucionais. O Astro, por exemplo, é um framework que tradicionalmente utiliza esta abordagem.

Já no método SPA (Single Page Application), que ganhou popularidade na última década, a navegação entre páginas é, na verdade, uma simulação. Todo o site funciona como uma única página, e quando o usuário "navega", o que realmente acontece é uma troca dinâmica de conteúdo, sem necessidade de recarregar a página inteira. O endereço na barra do navegador muda para dar a impressão de navegação, mas é tudo gerenciado por JavaScript. Esta abordagem é muito utilizada em aplicações web modernas, como o Gmail e o Facebook, onde a experiência do usuário precisa ser mais fluida e similar a um aplicativo desktop. Frameworks como React, Vue e Angular foram inicialmente projetados com foco neste tipo de aplicação. O ciclo de requisição aqui é bifurcado: o navegador primeiro recebe um HTML estático mínimo e, então, o JavaScript assume, renderizando a página dinamicamente.

É importante notar que um site pode utilizar ambos os métodos. Por exemplo, podemos manter a navegação entre "home" e "projetos" como uma SPA, mas ter uma seção de "blog" que carrega como MPA, aproveitando o melhor de cada abordagem conforme a necessidade.

Métodos de Renderização: SSG, SSR e CSR

Agora que entendemos como a navegação funciona, vamos explorar os diferentes métodos de renderização. Estes métodos determinam como e quando o conteúdo e estrutura HTML da página é gerada. Para facilitar o entendimento inicial, vou explicar os métodos em sua forma mais clássica e isolada.

O SSG (Static Site Generation) é o método onde as páginas são renderizadas durante o processo de build do website. Neste processo, todo o código fonte (seja ele em React, Vue, Svelte ou qualquer outro framework) é transformado em arquivos HTML, CSS e JavaScript otimizados. O JavaScript resultante geralmente se concentra em funcionalidades interativas da página, não sendo responsável pela estrutura básica do conteúdo, que fica por conta do HTML e CSS. O Astro, por exemplo, é um framework que utiliza SSG em combinação com MPA. Este método é ideal para blogs, sites de documentação e portfólios, onde o conteúdo não muda frequentemente. No SSG, a estrutura da página é estática. Durante o ciclo de requisição, o servidor simplesmente entrega arquivos HTML pré-gerados, sem processamento adicional.

No CSR (Client Side Rendering), a estrutura da página é renderizada no navegador do usuário. O servidor normalmente envia um HTML simplificado, junto com o JavaScript necessário para construir a interface. Embora o HTML básico carregue, a página só se torna funcional quando o JavaScript é executado, tornando o carregamento inicial mais demorado. Este é o método tradicionalmente usado por aplicações React puras, e é comum em SPAs, sendo ideal para aplicações altamente interativas onde o conteúdo se altera dinamicamente.

O SSR (Server Side Rendering), similar ao SSG, gera HTML completo, mas faz isso sob demanda, quando o usuário faz a requisição. Isso permite que o conteúdo seja personalizado para aquele usuário, ou esteja atualizado com as últimas informações do banco de dados, sem a necessidade de acessar uma API JSON. Frameworks como Next.js utilizam bastante dessa abordagem. O SSR também traz algumas desvantagens, como uma carga maior no servidor em comparação aos outros métodos, e, no caso de páginas que usam frameworks JavaScript, também é necessário um runtime como o Node rodando no servidor.

Combinações e Nuances dos Métodos de Renderização

A realidade do desenvolvimento web moderno é que os métodos de renderização raramente existem em suas formas "puras". As combinações entre eles não são apenas uma questão de usar diferentes métodos para diferentes páginas, mas sim de misturá-los de formas fundamentais e intrínsecas, onde às vezes é difícil distinguir onde um método termina e outro começa. Esses métodos também não precisam ser usados para carregar uma página toda, podem ser usados para renderizar apenas pedaços dela.

Por exemplo, considere uma página que utiliza CSR (Client Side Rendering). Em sua forma mais básica, ela começaria com um HTML quase vazio e dependeria totalmente do JavaScript para construir a interface. Mas será que precisamos realmente começar com uma página vazia? Podemos aproveitar o processo de build para pré-renderizar o conteúdo inicial que o usuário verá (conhecido como "first paint" ou "initial render"), criando uma experiência híbrida entre SSG e CSR. Nessa combinação, a estrutura inicial da página utiliza SSG, enquanto novas alterações utilizam CSR, otimizando o ciclo de requisição.

Indo além, vamos supor que a gente quer nessa mesma página adicionar uma informação que muda constantemente, como a previsão do tempo, e queremos que o usuário tenha acesso a essa informação imediatamente, usar requisições javascript só funcionariam depois que a página estivesse carregada, então podemos usar SSR no lugar de SSG para o nosso HTML inicial, e continuar usando CSR para futuras alterações na páginas.

Podemos criar quaisquer combinações entre os 3 métodos de renderização, e utilizar junto com qualquer mistura entre os 2 tipos de navegação, você não está limitado a escolher apenas um.

Conclusão

A escolha entre diferentes métodos de navegação e renderização não é uma questão de "melhor ou pior", mas sim de adequação ao caso de uso. Muitas aplicações modernas combinam diferentes abordagens para otimizar a experiência do usuário em cada contexto.

O mais importante é entender como essas técnicas podem ser usadas para melhorar a sua aplicação e se adequar as suas limitações. Com o surgimento de frameworks cada vez mais sofisticados, as linhas entre essas abordagens se tornam mais tênues, permitindo soluções cada vez mais híbridas e otimizadas.

Este é um tema extenso e complexo, e existem muitas nuances que não puderam ser completamente abordadas neste texto. Se você tiver quaisquer críticas, dúvidas ou sugestões, ficarei muito feliz de responder nos comentários.