Rendering with NextJS

6 min readJan 31

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.

Rendering types

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
This one is quite similar client-side but with the obvious difference that everything happens on the server. Once the user makes a request, on the server, all the data is prepared and content is generated, and sent as a response to the user. After that content is loaded and shown, all the JavaScript is loaded and all listeners are attached in the process that is called hydration. To use this type of rendering, you need to expose the getServerSideProps function which is where you get all the data needed for your component.
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.