Next.js v10.0.2 Performance Comparison
This is an experimental site to check how Next.js performs with the various approaches.
Default (CSR with Pre-renders)
Performance score:
By default, Next.js pre-renders every page. They have Automatic Static Optimization. In this implementation, the API call is happening in the browsers. P re-rendering will give the page a better performance.
Default (CSR with Pre-renders) + Image Optmization
Performance score:
This version uses the Default (CSR with Pre-renders) version. Additionally, this version does an image optimization using the <Image /> component exported by next/image.
Server Side Rendering (SSR)
Performance score:
This SSR version is a minor tweak from the default version. This version handled the API calls and pre-processed the result on the server-side by utilizing the getServerSideProps function. This approach has a slight drawback as the getServerSideProps will cancel the pre-renders behavior.
Server Side Rendering (SSR) + Optimized Image
Performance score:
This version uses the SSR version. Additionally, this version also does an image optimization using the <Image /> component exported by next/image.