Search⌘ K
AI Features

Getting Data After a Page is Loaded

Explore how to fetch data asynchronously after a Next.js page is loaded. Learn to initialize and update state with React hooks, manage user search inputs, and dynamically display new data fetched from the Giphy API to create interactive search experiences.

We will use our index.js page, which is a pre-rendered page with data. We fetched some cat giphy’s from the giphy API in a previous lesson.

NOTE: Any type of page can get data asynchronously after the page is completely loaded on the client.

What you are trying to do is replace the server-side rendered page with data you fetch from your client based on a search term our user will supply.

Storing pre-rendered data in state

Before accomplishing your goal of getting giphys ...