Next.js: Prop drilling a ton of data recieved from getStaticProps or using Context API?

Question

I'm building an app with a mini forum using Next.js with Incremental Static Regeneration for my school project but have ran into some trouble regarding prop drilling. I have this prop flow that goes getStaticProps => backgroundLayout => mainPage => other page components

I'm thinking of using context API to solve the issue but the I'm worried that the context API will get overwhelmed and possibly slow down the app as the forum grows. I have learned to use the context API just for global context and the forum is just a small part of the app. However, there are many more times that I need to implement prop drilling (like the code below) with tons of data using SSR and ISR so again, context API might bottleneck. What should one opt to do? Keep with prop drilling or use Context API?

import React from "react";
import styles from "./index.module.css";
import Layout from "../../components/_layout";
import { GetStaticProps } from "next";
import dbExecute from "../../_operations/db/db";
import OuterForumLeft from "../../components/school-forum/left";
import OuterForumRight from "../../components/school-forum/right";
interface Props {
    data: {
        question_id: number;
        question_header: string;
        question_body: string;
        question_timestamp: string;
        account_first_name: string;
        account_last_name: string;
        section_grade: string;
        section_strand: string;
    };
}
export const SchoolForum: React.FC<Props> = ({ data }) => {
    return (
        <>
            <section className={styles.outermostForumSection}>
                // passes again
                <OuterForumLeft />
                <OuterForumRight />
            </section>
        </>
    );
};

const SchoolForumPage: React.FC<Props> = ({ data }) => {
    return (
        <>
            <Layout page={<SchoolForum data={data} />} />
        </>
    );
};
export default SchoolForumPage;

export const getStaticProps: GetStaticProps = async () => {

    const sql: string = `SELECT * FROM account_table`;
    const [sqlData] = await dbExecute(sql);
    return {
        props: {
            data: sqlData,
        },
    };
};

score 0 · Answer 1 · answered May 24 '22 at 00:01

You can use context api + swr as global state management. I explained here in detail:

Global state management and Next.js

SWR gets its name from stale-while-revalidate , a caching strategy that is gaining popularity in the frontend realm. It allows us to load cached content right away, while at the same time refreshing that content so that the updated content is served in the future.

score 0 · Answer 2 · answered Jun 16 '22 at 17:20

We have a library available now, i.e

next-common-props will let you access data inside any page nested component. You just have to declare a configuration file.

Working example is here.

Using same library, you don't have to do any prop drilling of a ton of data.

Next.js: Prop drilling a ton of data recieved from getStaticProps or using Context API?

2 Answers2