Exploring Next.js: Comparing data fetching in getInitialProps(): server-side versus client-side

Question

Exploring Next.js: Comparing data fetching in getInitialProps(): server-side versus client-side

Currently, I'm working with Next.js and have set up a custom server using Express. One of my pages needs to retrieve data from the database.

When getInitialProps() is executed on the server side, it easily retrieves the necessary data from the database without any complications. However, when getInitialProps() runs on the client side (like when a user navigates directly to the page), fetching data from the database isn't an option since we are on the client side. In this scenario, AJAX must be used to communicate with the server and ask it to provide the required information.

Setting up a new Express route on the server to handle this request becomes necessary, but duplicating the server-side logic of getInitialProps() in this route is far from ideal.

How can I best address this issue?

javascript ajax express next.js

Answer 1

Answer №1

The getInitialProps() function always takes the request and response as arguments, which are only defined on the server side:

static async getInitialProps({req}){
 if(req){
   // executed on the server
 } else {
   // executed on the client
 }
}

Learn more at: https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

Answer 2

The getInitialProps() function always takes the request and response as arguments, which are only defined on the server side:

static async getInitialProps({req}){
 if(req){
   // executed on the server
 } else {
   // executed on the client
 }
}

Learn more at: https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

Answer 3

Answer №2

After finding no satisfactory solution, I took matters into my own hands and developed a library that offers a straightforward and sophisticated fix for this issue. Check out next-express.

Answer 4

After finding no satisfactory solution, I took matters into my own hands and developed a library that offers a straightforward and sophisticated fix for this issue. Check out next-express.

Answer 5

Answer №3

It is important to separate your UI logic from your server-side database fetching logic in Next.js applications. In your getInitialProps method, you should make an HTTP request to a new express route dedicated to handling database queries.

This approach ensures that your database fetching logic remains centralized and does not clutter the UI layer. Regardless of whether the application is running on the client or the server side, this express route should be called without needing any conditional code branching.

Answer 6

It is important to separate your UI logic from your server-side database fetching logic in Next.js applications. In your getInitialProps method, you should make an HTTP request to a new express route dedicated to handling database queries.

This approach ensures that your database fetching logic remains centralized and does not clutter the UI layer. Regardless of whether the application is running on the client or the server side, this express route should be called without needing any conditional code branching.

Answer 7

Answer №4

Create a separate API for your next.js application. Consider the next app as a frontend interface that is capable of server-side rendering

Answer 8

Create a separate API for your next.js application. Consider the next app as a frontend interface that is capable of server-side rendering

Answer 9

Answer №5

As time passes, innovative solutions emerge.
Nextjs has recently unveiled a new approach getServerSideProps specifically designed for such scenarios.

The function getServerSideProps is executed exclusively on the server side and does not run on the client's browser.

Answer 10

As time passes, innovative solutions emerge.
Nextjs has recently unveiled a new approach getServerSideProps specifically designed for such scenarios.

The function getServerSideProps is executed exclusively on the server side and does not run on the client's browser.

Answer 11

Answer №6

One of the quickest methods I've discovered is extracting data from __NEXT_DATA__

MyApp.getInitialProps = async (): Promise<AppCustomProps> => {
  const isInBroswer = typeof window !== 'undefined';
  if (isInBroswer) {
    const appCustomPropsString =
      document.getElementById('__NEXT_DATA__')?.innerHTML;

    if (!appCustomPropsString) {
      throw new Error(`__NEXT_DATA__ script was not found`);
    }

    const appCustomProps = JSON.parse(appCustomPropsString).props;
    return appCustomProps;
  }

// Here, on the server side, is where the actual data fetching from the db/cms takes place
}

Answer 12

One of the quickest methods I've discovered is extracting data from __NEXT_DATA__

MyApp.getInitialProps = async (): Promise<AppCustomProps> => {
  const isInBroswer = typeof window !== 'undefined';
  if (isInBroswer) {
    const appCustomPropsString =
      document.getElementById('__NEXT_DATA__')?.innerHTML;

    if (!appCustomPropsString) {
      throw new Error(`__NEXT_DATA__ script was not found`);
    }

    const appCustomProps = JSON.parse(appCustomPropsString).props;
    return appCustomProps;
  }

// Here, on the server side, is where the actual data fetching from the db/cms takes place
}

Exploring Next.js: Comparing data fetching in getInitialProps(): server-side versus client-side

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a way to merge the .load function and the document.referrer function together?

Nextjs does not allow for loading different pages within a Shopify embedded app

Is it necessary to remove the request object parameter from the callback if it is not being utilized?

Getting request parameters within Model in Loopback can be done by accessing the `ctx`

Trigger the Material UI DatePicker to open upon clicking the input field

What steps can be taken to resolve the issue of Spring Boot not supporting the 'POST' request method?

Share the Angular library distribution folder on a new git repository

A chart using JavaScript that displays text values instead of a traditional website

Can anyone recommend a tutorial for learning how to achieve this task using jQuery?

Navigating the loop in Vue using JavaScript

Tips for extracting only key-value pairs with true values from an array of objects

Utilize emit to distribute / allocate a variable

Guide to update the source of several images simultaneously based on the chosen list item

Subscribing to real-time updates using Next JS and Supabase sets the state to "closed"

Tips for successfully loading data into a table and mapping it to a ViewModel class in .NET Core MVC without the need to refresh the page

What alternatives does jQuery offer instead of using setInterval for timing events?

Dynamically setting the height of elements using jQuery with incremental values

JavaScript appends a backslash character to a CSS class

An unexpected error occurred with React JS stating: "Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row}"

Transferring data from Javascript/JQuery to PHP