Rendering on the web
Motivation
Over the past years JavaScript frameworks have created new patterns for rendering to achieve the optimal performance for page rendering.
This guide tries to explain the different patterns and discuss their pros and cons using Next.js.
Performance
But first lets talk about performance. To understand the performance characteristics of a website we need to answer two simple questions.
- When is our app working?
- Where is our app working?
When
At what point in time does our app needs to work?
Build-Time
Doing work at buildtime means our app is working (gathering data, rendering) when we compile our app.
Run-Time
Doing work at run-time means our app needs to work (gathering data, rendering), when the app is running.
Where
Where is the work beeing done?
at Edge
Inside our CDN network.
on our Server
On our server.
on the client
Inside the browser of our users.
Rendering patterns
1. Tranditional Static Rendering
Lets begin with a very simple example. We have a static html somewhere and just ship it by using a static webserver.
This approach is probably the fastes when it comes to performance.
- FCP ⭐️⭐️⭐️⭐️⭐️
- TTI ⭐️⭐️⭐️⭐️⭐️
2. Traditional Server Side Rendering
This approach creates the HTML markup on the server using simple string concatnation.
3. Modern Server Side Rendering
This approach creates the HTML markup on the server using simple a modern JS Framework (React.js)
4. Modern Server Side Rendering with Client Side Rendering (hydration)
This approach creates the HTML markup on the server using simple a modern JS Framework (React.js) and hydrates the markup on the client using React.js.
5. Modern Static Side Rendering with Client Side Rendering (hydration)
Here we render our HTML code at build time using a modern framework and hydrate the markup from the server on the client at runtime.