Fetching a API, vs using ContextProvider. When should you use just fetching vs a ContextProvider??

I’m using Next for the first time and I’m liking it,
There is a choice tho of… when do i need a “ContextProvider”?

In my Next project i have several files to get data from Airtable:

In Airtable.js

const Airtable = require('airtable');
const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(process.env.AIRTABLE_BASE_ID);
const table = base(process.env.AIRTABLE_TABLE_NAME);
const table2 = base(process.env.AIRTABLE_TABLE_NAME2);
const table3 = base(process.env.AIRTABLE_TABLE_NAME3);

const minifyRecords = (records) => {
    return records.map(record => getMinifiedRecord(record));
}

const getMinifiedRecord = (record) => {
    if(!record.fields.completed) {
        record.fields.completed = false;
    }
    return {
        id: record.id,
        fields: record.fields,
    }
}
export { table, table2, table3, getMinifiedRecord, minifyRecords}

Then in my getCorals.js i have:

import { table, minifyRecords } from './utils/Airtable'

export default async (req, res) => {
    try{
    const records = await table.select({}).firstPage();
    const minifiedRecords = minifyRecords(records);
    res.statusCode = 200;
    res.json(minifiedRecords);
    //console.log(records)
    }catch(err){
    res.statusCode = 500;
    res.json({msg: 'something went wrong'})
}
}

The in my actual page to show my data i have:

import React from 'react'
import { CoralProvider } from '../contexts/CoralContext'
import { table, minifyRecords } from '../pages/api/utils/Airtable'
// im at video 6 in Airtable Nextjs video series....ITS WORKING!!!

export default function Coral({initialCoral}) {
    // console log initialCoral... it logs them out
    //console.log(initialCoral);
    try{
    return (
        <CoralProvider>
            <h1>ZOAS PAGE</h1>
        </CoralProvider>
    )
    }catch(err){
        console.log(err);
        return{
            props: {
                err: "something went wrong"
            }
        }
    }
}

export async function getServerSideProps(context) {
    const coral = await table.select({}).firstPage();
    return {
        props: {
            InitCoral: minifyRecords(coral)
        }
    }
}

OOOOOOOORRRRRR

Do i just fetch my data like this:??????

import React from 'react'
import Coralapi from '../../API/Coralapi'
import { useEffect, useState } from "react";
import Airtable from 'airtable';
require('dotenv').config();

const base = new Airtable({apiKey: `${process.env.REACT_APP_AIRTABLE_API_KEY}` }).base(`${process.env.REACT_APP_AIRTABLE_BASE_ID}`);

function Coralpage() {
   const [coral, setCoral] = useState([]);
   const [care, setCare] = useState([]);
   useEffect(() => {
    base("CORAL")
    .select({view: "Gallery" })
    .eachPage((records, fetchNextPage) => {
        console.log(records);
        setCoral(records);
        fetchNextPage();
    });
    base("CARE")
    .select({view: "Gallery" })
    .eachPage((records, fetchNextPage) => {
        console.log(records);
        setCare(records);
        fetchNextPage();
    });

},[]);
return (
    <>
    <h1>Coral Products</h1>
    {coral.map((coral) => (
        <Coralapi 
        key={coral.id}
        coral={coral}
        care={care.filter(
            (care) => care.coral
        )}
        />
    ))}
    </>
);
}

export default Coralpage