There are various rendering approaches available in NextJs. To determine which one to use for a particular page, you can incorporate a method in your page file.
The getStaticProps method pre-renders an HTML file at build time, allowing you to still utilize useEffect to populate the content of the page.
Similarly, getStaticPath functions in a similar manner, enabling you to pre-render different pages for specific routes or upon request for non-existent paths with the fallback: 'blocking' option.
Another option is ISR (Incremental Static Regeneration), blending aspects of static and SSR, where pages are generated on demand and cached based on a designated revalidation period.
getServerSideProps renders the page dynamically as needed.
Each of these rendering strategies comes with its own advantages and disadvantages. While static pages are efficient for initial loading, they may require additional requests to fully hydrate the content. Server-side rendering is beneficial for SEO but can lead to increased server CPU usage.
The flexibility lies in being able to choose the most suitable strategy depending on the specific requirements of the page being rendered.
Note: Although not explicitly mentioned, the fundamental concept behind these methods involves fetching data and performing certain actions within them, with their return values serving as input parameters for the corresponding page.