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

What is the process for including a static file on an http server?

Encountering the error message "Uncaught TypeError: $.ajax is undefined"

How to fetch a single document from a nested array using Mongoose

Whenever I click on a button, I want to modify the background color of my react-modal

Converting a decimal Unicode to a string in Javascript/Node: a beginner's guide

Obtaining the IP address of the client's request

What is preventing me from generating a string for transform:translate within Angular.js?

How to efficiently initialize a Next.js app with Phusion Passenger while triggering the production build using a specific file?

What is the best way to incorporate lottiefiles for a loading animation on a Next.js project's landing

Ways to restrict the number of times elements are iterated in a `v-for`

Removing leading zeros from numeric strings in JSON data

Is there a way to interact with a DOM element through clicking and then pass it as a variable using PHP?

Iterate through HTML content and utilize JavaScript along with Regular Expressions to substitute specific strings

Invoke a router inside Node.js once a route has been triggered

What is the best way to access query string values using JavaScript?

Jquery double-click Event Not Functioning Properly

Angular - the utilization of expressions in view templates

Creating objects in Angular 2 through HTTP GET calls

Using ng-value does not trigger any updates to the Ng-model

Upon calling the createModalAddPost() function, a single window is triggered to open