Skip to content
+91-7795206615
|
info@habilelabs.io

  • Home
  • About
  • Services
    • Custom Application Development
    • UI/UX Designing
    • Web Application Development
    • Offshore Product Services
    • Technical Outsourcing
    • ERP Services
  • Company
    • Careers
    • Case Studies
  • Specialization
    • Frontend Frameworks
      • Angular
      • ReactJS
      • VueJS
      • HTML / CSS
      • Javascript /Jquery
      • Bootstrap
      • Material design
    • Backend Frameworks
      • NodeJS
      • Meteor
      • GraphQL
      • Loopback
      • Salesforce
      • Spring Boot
      • Odoo
      • Laravel
    • Database / ORM
      • MySQL
      • PostgreSQL
      • Oracle
      • MongoDB
      • Google Firebase
      • Mongoose
      • Sequelize
      • Hibernate / JPA
    • Languages
      • Java Script
      • Dot Net
      • Java
      • Python
      • C / C++
      • PHP
      • AI / ML
      • Type Script
    • Mobile Frameworks
      • Ionic
      • Native Script
      • Native Android App
      • Native iOS App
      • Google Flutter
      • React Native
  • Blog
  • Hire Us

Data Fetching in Next.js – Pre-rendering Types

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • VAPT
  • Visualforce
  • Web Development
  • Web Security
data-fetching-in-nextjs

While I was focused on building client-side React applications, Next.js became very popular. I kept hearing good things about it so, I decided to give it a try. Now, I can myself using it in several projects or for my potential future business endeavors.

If it’s your first time too with Next.js or you need a quick go-through of its features, this blog is for you-

Pre-rendering Types in Next.js

Next.js, by-default, pre-renders every page which means without having to go with client-side rendering, it generates HTML for every page in advance. Pre-rendering is preferred because it offers better performance and SEO.

Next.js provides support for Static-Site Generation and Server-Side Rendering, which are both pre-rendering types.

#Server-Side Rendering

The HTML pages are generated on each request which means the website will run over a server that is dependent on code, not static files.

Server-Side Rendering

#Static Generation

The HTML pages are generated at build time. Once you’re done with the building; the result is a set of static files. This method is useful because it allows caching the website on CDN and gives better performance.

Static-Site Generation

The interesting thing here is that you can choose which one of the two types you want to use for every page. In fact, you’ll end up creating a ‘hybrid next.js app’ by using static-site generation for most of the pages and server-side rendering for others.

Now, we’ll talk about some functions used for fetching data in these pre-rendering types-

Data Fetching Functions in Next.js

There are three unique functions in next.js for fetching data in pre-rendering –

  • getStaticProps()
  • getStaticPaths()
  • getServerSideProps()

Let’s understand these functions in detail-

getStaticProps() –

It’s an asynchronous function that fetches data at build time which means, we use it in server-side-generation pre-rendering type.

It takes a context as an argument and will return an object with a props field. This props field contains all the props we end up passing down to a page.

Let’s take an example to use getStaticProps() for todos API –

We can use function to:

  • Get public data from the cloud function.
  • Retrieve data from an API or external endpoint.
  • Read a local file.
  • Query a database.

Let’s move to another function –

getStaticPaths() –

Next.js gives a wonderful feature of creating statically generated dynamic routes, e.g., /articles/:id.

This is an asynchronous function that returns an object with a path field. There is another field called fallback. When we use fallback setting it as false and the user tries to access path which has not been returned by getStaticPaths, it will throw ‘404 error’.

Let’s see an example where we consider a static product page with a dynamic route –

We can use this function for –

  • Displaying a detailed page of an entity such as a product, documentation entry, or blog post.
  • Client-side fetching that requires one of the parameters of the path.

getServerSideProps() –

Sometimes static-side generation is not what we need. If we need to fetch data and render dynamic content on the server, then we use getServerSideProps.

This asynchronous function allows us to fetch data and returns an object with a props field that will be passed down to a page. However, the main difference is that it allows the pre-rendering of a page on each request, so we can consider that this is a use case for server-side rendering. This function can fetch some non-static data that is tied to a request.

Let’s take an example to use getServerSideProps() for todos API –

We use this function to:

  • Fetch complex data.
  • Fetch sensitive data that will not be fetched at build time.
  • To prevent creating a bottleneck and decreasing your Time to First Byte.
  • Fetch user-related specific data such as permissions or revoked.

Wrap Up:

In this blog, we described how to fetch data in Next.js during the pre-rendering of pages. There are several use-cases of Static-site Generation and Server-side Rendering that I got to learn while working with Next.js. It’s an amazing tool for website building, you all should definitely try it sometime.

If you have any doubts, you can ask your queries in the comment section.

Thanks for reading! You can check out some similar tech blogs here.

Posted byPushpendra SinghJanuary 8, 2021January 11, 2021Posted inJavascript, Mobile development, Node JS, Web DevelopmentTags: Data Fetching in Next.js, Next.js, node.js, Server-side Rendering, Static-site Generation, Website Development

Post navigation


:

Leave a comment

Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • What is Docker- Reasons to Learn Docker in 2021?

    What is Docker- Reasons to Learn Docker in 2021?

  • This is Why You Should Choose React.js for IoT Applications

    This is Why You Should Choose React.js for IoT Applications

  • Useful Chrome Extensions for Testing

    Useful Chrome Extensions for Testing

  • Node.js – Blocking & Non-Blocking and Asynchronous Operations

    Node.js – Blocking & Non-Blocking and Asynchronous Operations

  • Reporting for JMeter – Listeners & Result Analysis

    Reporting for JMeter – Listeners & Result Analysis

  • How to Solve Pagination and Filter Issue in Sequelize?

    How to Solve Pagination and Filter Issue in Sequelize?

Talk to our experts now

Have a project or looking for development team? Contact us.

Get a quote

About Us

Habilelabs Private Limited is the ISO 9001:2015 certified IT company, which has marked its flagship in 20+ countries with 100+ projects successfully

Company

  • About Us
  • Blog
  • Careers
  • Hire Us
  • Privacy Policy

Contact Us

  • +91-9828247415
  • +91-9887992695
  • info@habilelabs.io

Follow Us

Office

  • Habilelabs Private Limited
    4th Floor, I.G.M. School Campus,
    Sec-93 Agarwal Farm, Mansarovar,
    Jaipur, Rajasthan India
    Pin:302020