Rendering is the process of converting React code into HTML.
In Next.js, rendering is very versatile.
you’re free to render pages client-side or server-side, statically or incrementally.
Take a look at how these methods work and how each performs.
The web app then displays it to the user.
This can reduce the website’s performance.
However, server-side rendering is perfect for pages that consume dynamic data.
Use getServerSideProps to rebuild the page every time a user requests it.
Alternatively, set revalidate to 0:
This feature is currently in beta so keep that in mind.
you’re able to read more about dynamic data fetches in theNext.js 13 beta docs.
you’ve got the option to implement CSR at the page level or component level.
Because of this, CSR can contribute to slow performance.
It caches the data and revalidates it in case it goes stale.
Static-Site Generation
With static-site generation (SSG),the page fetches dataonce during build-time.
Static-generated pages are very fast and perform well because all the pages are built beforehand.
SSG is therefore perfect for pages that use static content like sales pages or blogs.
In Next.js, you must export the getStaticProps function in the page you want to statically render.
you could also query the database inside getStaticProps.
Learn rendering in Next.js 13from the docs.
This is where incremental static generation(ISG) helps.
This way, you dont need to rebuild the entire site only the pages that need it.
ISG retains the benefits of SSG with the added benefit of serving up-to-date content to users.
ISG is perfect for those pages on your site that consume changing data.
To use ISR, add the revalidate prop to the getStaticProps function on a page.
Here, Next.js will venture to rebuild the page when a request comes in after 60 seconds.
The next request will result in a response with the updated page.
Each of these methods is appropriate for different situations.
CSR is useful for pages that need fresh data, where strong SEO is not a concern.
SSR is also great for pages that consume dynamic data, but it’s more SEO-friendly.
