Discovering the process of retrieving API data upon a button click within Next.js using server-side rendering

Question

Discovering the process of retrieving API data upon a button click within Next.js using server-side rendering

Hi there, I'm fairly new to working with next.js and would greatly appreciate some assistance.

I am trying to figure out how to fetch data from an API upon clicking a button in next.js on the server side.

I understand that using onClick directly is not possible without making it client-side, but I want to avoid doing that.

Below is the code snippet where I am retrieving data straight from the server:

import Button from "@/components/button/Button";
import { get } from "@/services/ApiService";
import React from "react";

const getData = async() => {

    console.log("data from server")
    const response = await get(`posts`)
    return response?.data
}


async function About() {

  const data = await getData();
  
  return ( 
    <div>
      Welcome to About test
      <Button data="posts" />
      {data &&
        data.map((item, index) => {
          return (
            <div key={index}>
              <div>{item.id}</div>
              <div>{item.title}</div>
            </div>
          );
        })}
    </div>
  );
}

export default About;

javascript next.js

Answer 1

Answer №1

It seems like the task you are attempting is akin to this scenario:

You must attach a button handler to initiate the function upon clicking, which will then enable you to set an internal component state for rendering the data.

import Button from "@/components/button/Button";
import { get } from "@/services/ApiService";
import React, {useState} from "react";

const fetchData = async() => {
    console.log("retrieving data from server")
    const response = await get(`posts`)
    return response?.data
}

const About = () => {
    const [data, setData] = useState(null)

    const handleClick = async() => {
        const endpointData = await fetchData()
        setData(endpointData)
    }

  return ( 
    <div>
      Welcome to the About page test
      <Button onClick={handleClick} />
      {data &&
        data.map((item, index) => {
          return (
            <div key={index}>
              <div>{item.id}</div>
              <div>{item.title}</div>
            </div>
          );
        })}
    </div>
  );
}

export default About;

However, there is another approach suggested in the comments where you can fetch the data from the server before the page loads and display it without requiring a button click. Optionally, you could store it in a separate state value and load the pre-fetched data on click, functioning as an isVisible state.

import Button from "@/components/button/Button";
import { get } from "@/services/ApiService";
import React from "react";

const fetchData = async () => {
  console.log("retrieving data from server");
  const response = await get(`posts`);
  return response?.data;
};

export async function getServerSideProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
  };
}

const About = ({ data }) => {
  return (
    <div>
      Welcome to the About page test
      <Button />
      {data &&
        data.map((item, index) => {
          return (
            <div key={index}>
              <div>{item.id}</div>
              <div>{item.title}</div>
            </div>
          );
        })}
    </div>
  );
};

export default About;

Answer 2

It seems like the task you are attempting is akin to this scenario:

You must attach a button handler to initiate the function upon clicking, which will then enable you to set an internal component state for rendering the data.

import Button from "@/components/button/Button";
import { get } from "@/services/ApiService";
import React, {useState} from "react";

const fetchData = async() => {
    console.log("retrieving data from server")
    const response = await get(`posts`)
    return response?.data
}

const About = () => {
    const [data, setData] = useState(null)

    const handleClick = async() => {
        const endpointData = await fetchData()
        setData(endpointData)
    }

  return ( 
    <div>
      Welcome to the About page test
      <Button onClick={handleClick} />
      {data &&
        data.map((item, index) => {
          return (
            <div key={index}>
              <div>{item.id}</div>
              <div>{item.title}</div>
            </div>
          );
        })}
    </div>
  );
}

export default About;

However, there is another approach suggested in the comments where you can fetch the data from the server before the page loads and display it without requiring a button click. Optionally, you could store it in a separate state value and load the pre-fetched data on click, functioning as an isVisible state.

import Button from "@/components/button/Button";
import { get } from "@/services/ApiService";
import React from "react";

const fetchData = async () => {
  console.log("retrieving data from server");
  const response = await get(`posts`);
  return response?.data;
};

export async function getServerSideProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
  };
}

const About = ({ data }) => {
  return (
    <div>
      Welcome to the About page test
      <Button />
      {data &&
        data.map((item, index) => {
          return (
            <div key={index}>
              <div>{item.id}</div>
              <div>{item.title}</div>
            </div>
          );
        })}
    </div>
  );
};

export default About;

Discovering the process of retrieving API data upon a button click within Next.js using server-side rendering

Answer №1

Similar questions

Creating a JSON hierarchy from an adjacency list

Tips for manipulating fixed elements while navigating through the window's content

The table headers in the second table do not match the queryAllSelector

Iterate through each key in the response JSON object using a variable named "a

The use of script src with vue.js is causing issues

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Error during live-server npm installation: symlink issue persists even with root/admin privileges

How to ensure that the iframe is completely loaded before proceeding with Selenium JavaScript

Organizing HTML elements based on their class names, especially when an element has multiple classes assigned

Hinting the type for the puppeteer page

Creating multiple child processes simultaneously can be achieved by spawning five child processes in parallel

How to Retrieve a Remote File in Angular using $http.get() with OAuth Authentication

There seems to be a syntax error lurking within npm.js, and for some reason npm insists on utilizing version 10.19.0 of Node.js despite my attempts to update it. The reason behind this behavior

Develop a solid foundation for your web application with the perfect combination of ReactJS, Next.js

Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

Managing authentication within getStaticProps requests

Capturing mouse clicks in Javascript: a guide to detecting when the mouse moves between mousedown and mouseup events

Exploring the possibilities of accessing Vue.prototype within an .addEventListener function

Utilizing Highcharts/Highstock for handling large volumes of data efficiently

Tips for Elevating State with React Router Version 6