Reactjs – How can I fetch data and display it in NextJs 13 or above?

There are two ways to render a page:

• Client Side – client gets page & it makes api call & then sets data
  in page.

• Server side – server gets data & generates page & then sends it to
  the client.

  Two solutions :

• Client side rendering, make a component with 'use client' at top of
  it & import it in your page.

• Server side rendering (make page on server & then send to client)

By default Next.js considers a component as Server Component.
Hence it throws a error when u remove 'use client' from a component which uses (useEffect,useState etc. as this are hydrated/calculated on client side)

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

https://nextjs.org/docs/app/building-your-application/rendering/server-components#using-server-components-in-nextjs

When you use use client you make it as client component.
https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs

Read more about Rendering : https://nextjs.org/docs/app/building-your-application/rendering

Here is code with both implementations.

Folder Structure :

projectName
├── .gitignore
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── images
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── src
│   └── app
│       ├── api
│       ├── comp
│       │   └── ProductsList.js
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── products
│       │   └── page.js
│       └── products_clientside
│           └── page.js
└── tailwind.config.js

• Server side rendering

locsrcappproductspage.js

import axios from "axios";

async function GetProducts() {
    let { data } = await axios.get('https://dummyjson.com/products')
    return data
}

export default async function ProductsPage() {


    let Products = await GetProducts();
    console.log("Data from API on Serverside :", Object.keys(Products));
    // console.log("Products on Serverside :", Products.products);

    return (
        <div>
            <h1>Products Page (Serverside Fetching)</h1>
            {
                Products

                    ?
                    Products.products.map((p, i) => {
                        return (
                            <p key={i}>{p.title}</p>
                        )
                    })
                    :

                    "Getting Products ...."


                // THIS LOADING STATE WILL NOT BE VISIBLE BECAUSE SERVER LOADS THIS WHOLE PAGE
            }
        </div>
    )
}

Output :

• Go on route http://localhost:3000/products
• you will see data console.log() in terminal (there 2 console logs 1 is to show keys present in data, other is commented out )

—————————————————————————–

Client side rendering:

• Make a component in comp folder.

ProductsList Component locsrcappcompProductsList.js

'use client'
import axios from 'axios'
import React, { useEffect, useState } from 'react'

const ProductsList = () => {

    async function GetProducts() {
        let { data } = await axios.get('https://dummyjson.com/products')
        console.log(data);
        SetProducts(data)
    }

    const [Products, SetProducts] = useState(null)

    useEffect(() => {
        GetProducts()
    }, [])

    return (
        <div>
            <h1>Products Page</h1>
            {
                Products

                    ?
                    Products.products.map((p, i) => {
                        return (
                            <p key={i}>{p.title}</p>
                        )
                    })
                    :

                    "Getting Products ...."

                // THIS LOADING STATE WILL  BE VISIBLE BECAUSE CLIENT LOADS A SECTION OF PAGE 

            }
        </div>
    )
}

export default ProductsList

Now make a page locsrcappproducts_clientsidepage.js & import ProductsList

import ProductsList from "../comp/ProductsList"
const page = () => {
    return (
        <div>
            <h1> Product Page Other Way (Client Side Fetching)</h1>
            <ProductsList />
        </div>
    )
}
export default page

Output :

• Go to url http://localhost:3000/products_clientside
• You will see "Getting Products ...." & also in console the data recieved from api