Next.js is a framework built on top of the React.js library and provides the best development experience with a host of features like SSR and SSG, Image optimization, support for TypeScript, i18n and many more.
Learn more about the fundamentals o Next.js as we disect the features offered by the framework.
Static Site Generation (SSG)
Static Site Generation (SSG) is useful when you want to generate the HTML when the site builds. This can increase the build time but ensures that no data fetching happens when a page loads.
Play with the component below to visually understand how SSG works in a Next.js application.
Server-side Rendering (SSR)
Server-side Rendering (SSR) is useful when you want to generate the HTML on every request.
Use SSR when the content of your site changes frequently based on the user. If the pages of your site requires authentication or authorization. you can use SSR. In SSR, the HTML of a page is generated per request.
Play with the component below to visually understand how SSG works in a Next.js application.
Data Fetching
Next.js provides several methods for data fetching such as getStaticProps, getServerSideProps and getInitialProps. These methods allow you to fetch data for your page and make it available for the page to render.
-
getStaticProps is used to fetch the data at build time, which is useful for static websites.
-
getServerSideProps is used to fetch the data on each request, which is useful for dynamic websites.
-
getInitialProps is a legacy method that is used to fetch the data on the server and pass it to the client.
Each of these data fetching methods can be used to fetch data for your page and make it available for the page to render. For example, you can use getStaticProps to fetch the data at build time for a static website, or use getServerSideProps to fetch the data on each request for a dynamic website. Additionally, getInitialProps is a legacy method that can be used to fetch the data on the server and pass it to the client.
Once data has been fetched, it can be used to render the page. For example, you can use the data to display a list of items on your page, or to create a form. Additionally, Next.js provides several tools that can be used to simplify the process of data fetching, such as the swr library. With these tools, you can easily fetch data and use it to render your page.