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.
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?
At what point in time does our app needs to work?
Doing work at buildtime means our app is working (gathering data, rendering) when we compile our app.
Doing work at run-time means our app needs to work (gathering data, rendering), when the app is running.
Where is the work beeing done?
Inside our CDN network.
On our server.
Inside the browser of our users.
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 ⭐️⭐️⭐️⭐️⭐️
This approach creates the HTML markup on the server using simple string concatnation.
This approach creates the HTML markup on the server using simple a modern JS Framework (React.js)
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.
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.