score:6

Accepted answer

getserversideprops is for getting data to be used for the first render. unlike that, your "load more" button needs to work on the client-side.

i will try to summarize the steps you should take:

  1. in order to be able to manipulate the posts that will be displayed, you need to store your items in the state, not props. so, create a state using usestate and fill it with the data coming from the props, something like this:

    const [posts, setposts] = usestate(props.posts);
    

    from now on, you will use this posts variable instead of the one from the props.

  2. add the "load more" button. all loading more posts business logic should go to its onclick handler. something like this:

    <button
      onclick={async () => {
         const newposts = await getnewpostsfromapi();
    
         setposts(...posts, ...newposts);
      }}
      type="button"
    >
    load more
    </button>
    

Related Query

More Query from same tag