Where to fetch site wide data? #227

augustomallmann · 2022-03-23T16:18:51Z

augustomallmann
Mar 23, 2022

Hello,

What's the best practice on fetching site wide data such as header and footer content? I tried to make a getEdgeProps on the app page, but it returns undefined no matter what I do.

Should I fetch the same content on every page? Wouldn't it cause unnecessary data fetching on every page load as it'd fetch data already consumed?

What I tried to do under app page was:

export async function getEdgeProps() {
    const endpoint = 'https://endpoint.com/data.json';

   const data =  await fetch(endpoint).then((res) => res.json());

    return {
        props: {
            data
        }
    };
}

traffisco · 2022-03-23T16:32:44Z

traffisco
Mar 23, 2022

You can fetch the data and put it a context in the App then consume it in the head/footer/whatever section.
Take a look at
flareact.com.
You can even use cloudflare cache to cache the response for faster serving.

1 reply

tj-kev Mar 23, 2022
Maintainer

Agree with using the Cloudflare cache. Also the KV store is available for storing the data to start with.

augustomallmann · 2022-03-23T17:21:43Z

augustomallmann
Mar 23, 2022
Author

I thought about using react context to spread the data, but when you say fetch the data you mean in which page? The link you sent it only imports static CSS.

6 replies

augustomallmann Mar 23, 2022
Author

Ok, but that's where I've tried and it returns undefined:

In the following example I'm using https://jsonplaceholder.typicode.com/todos/1 as the data source, just a sample for testing purposes only.

When I console.log, it returns undefined.

import '../src/styles/main.scss';

import { AnimatePresence } from 'framer-motion';
import Footer from '../src/components/Footer';
import { GlobalContextProvider } from '../src/contexts/GlobalContext';
import Head from 'flareact/head';
import { Header } from '../src/components/Header';
import { globalStyle } from '../src/styles/stitches.config';

// eslint-disable-next-line react/prop-types
export default function MyApp({ Component, pageProps, data }) {
    console.log('data', data)
    globalStyle();
    return (
        <>
            <Head>
                <meta name="robots" content="noindex" />
                <link
                    rel="icon"
                    type="image/png"
                    href="https://assets.azion.com/static/images/favicon/favicon.png"
                />
            </Head>

            <GlobalContextProvider>
                <AnimatePresence exitBeforeEnter>
                    <Header />
                    <Component {...pageProps} />
                    <Footer />
                </AnimatePresence>
            </GlobalContextProvider>
        </>
    );
}
export async function getEdgeProps() {
    const data = fetch('https://jsonplaceholder.typicode.com/todos/1').then(
        (response) => response.json()
    );

    return {
        props: {
            data
        }
    };
}

traffisco Mar 23, 2022

try this:

export default async function MyApp({ Component, pageProps }) {
    const init = {
        cf: {
            // Always cache this fetch regardless of content type
            // for a max of 5 seconds before revalidating the resource
            // For time-to-live (TTL), Cloudflare will still rely on headers set by the origin.
            cacheTtl: 5,
            cacheEverything: true,
        },
    }
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/1', init).then(res => res.json());

    return (
        <GlobalContextProvider value={data}>
            <Component {...pageProps} />
        </GlobalContextProvider>
    );
}

augustomallmann Mar 23, 2022
Author

but doing this way it wont be statically render into the initial HTML, right? So that's actually not good for seo I think

traffisco Mar 23, 2022

Should be rendered on the edge. Confirm by looking at the page source

augustomallmann Mar 24, 2022
Author

It didn't work. When I change MyApp function to async, it crashes: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Component')

I'm trying to follow the NextJs getInitialProps example, but it's not working too. Now in document.js, I'm fetching the json and trying to render it, but it doesn't even log in the console 😢

import Document, { FlareactScript, Head, Html, Main } from 'flareact/document';

import { getCssText } from '../src/styles/stitches.config';

class MyDocument extends Document {
    static async getEdgeProps(ctx: any) {
        try {
            const initialProps = await Document.getEdgeProps(ctx);
            const data = await fetch(
                'https://jsonplaceholder.typicode.com/todos/1'
            ).then((res) => res.json());
            return {
                ...initialProps,
                data,
                styles: (
                    <>
                        {initialProps.styles}

                        <style
                            id="stitches"
                            dangerouslySetInnerHTML={{ __html: getCssText() }}
                        />
                    </>
                )
            };
        } catch (e) {
            console.error(e.message);
        } finally {
            null;
        }
    }

    render() {
        console.log(this.props.data);
        console.log(this.props, 'props');
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <FlareactScript />
                 
                    {JSON.stringify(this.props.data)}
                </body>
            </Html>
        );
    }
}

export default MyDocument;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where to fetch site wide data? #227

{{title}}

Replies: 2 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Where to fetch site wide data? #227

augustomallmann Mar 23, 2022

Replies: 2 comments · 7 replies

traffisco Mar 23, 2022

tj-kev Mar 23, 2022 Maintainer

augustomallmann Mar 23, 2022 Author

augustomallmann Mar 23, 2022 Author

traffisco Mar 23, 2022

augustomallmann Mar 23, 2022 Author

traffisco Mar 23, 2022

augustomallmann Mar 24, 2022 Author

augustomallmann
Mar 23, 2022

Replies: 2 comments 7 replies

traffisco
Mar 23, 2022

tj-kev Mar 23, 2022
Maintainer

augustomallmann
Mar 23, 2022
Author

augustomallmann Mar 23, 2022
Author

augustomallmann Mar 23, 2022
Author

augustomallmann Mar 24, 2022
Author