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

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}

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'})}}

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)        }    }}

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