NextJS has been around for quite a few years already, and I loved it since I first tried it. It is an amazing framework with many good solutions, but what sold it for me was server-side rendering. This is something that React supported for a long time in a way, but until recently and React v18 improvements, it was quite complex to do. NextJS solves this in a very easy and quite flexible way and that is why in the rest of this article, you will have an overview of it.
There are three rendering types supported. Those are:
- Client-side rendering
Once the application is loaded, any required data is fetched on the client. When everything is fetched, content is generated and displayed in UI. This is also the reason why it is called client-side because all work is being done on the client.
- Server-side rendering
- Static Side Generation
Static Side Generation is a kind of special type of server-side rendering. The difference is that rendering does not happen on the request but during the build time. Maybe you have some pages that you want to have ready but they won’t change often, then you can generate their content during the build and just serve them already prepared. There is also a possibility to generate new content post-build by using incremental static regeneration, but that is a bit more advanced topic at the moment. To use this type of rendering, you expose the getStaticProps function where you get all required props.
In the following three sections, I will show how each type of rendering works. First, you will…