#[Solved] getStaticProps is not invoked when loading page

20 messages · Page 1 of 1 (latest)

frail helm
#

this is a file in /pages/ correct

twin tinsel
frail helm
#

is triggered being called

twin tinsel
#

no printout at all

frail helm
#

prob has nothing to do with it

#

but try putting getStaticprops below the render of the page

twin tinsel
#

yeah does not change anything

frail helm
# 
import {
    Box,
    Flex,
    Heading, Stack, StackDivider
} from "@chakra-ui/react";

export const getStaticProps = async () => {

    console.log('triggered')
    const res = await fetch('http://localhost:3000/restaurants/get');
    const data = await res.json();
    console.log(data)

    return {
        props: { restaurants: data}
    }
}

const viewPage = ({restaurants}) => {
    return (
        <Flex height={'100vh'} alignItems={'center'} justifyContent={'center'}>
            <Flex direction={'column'} background={'gray.100'} p={6} rounded={6} alignItems={'center'}>
                <Heading mb={3}>Available Restaurant</Heading>
                <Stack divider={<StackDivider />} spacing='4'>
                    {
                        restaurants.map((restaurant) => (
                            <Box>
                                <Heading size='xs' textTransform='uppercase'>
                                    {restaurant.name}
                                </Heading>
                                Lorem Ipsum Dolor.
                            </Box>
                        ))
                    }
                </Stack>

            </Flex>
        </Flex>
    )
}

export default viewPage
#

puting it here for syntax highlighting

# 
import {
    Box,
    Flex,
    Heading, Stack, StackDivider
} from "@chakra-ui/react";

export async function getStaticProps() {

    console.log('triggered')
    const res = await fetch('http://localhost:3000/restaurants/get');
    const data = await res.json();
    console.log(data)

    return {
        props: { restaurants: data}
    }
}

const viewPage = ({restaurants}) => {
    return (
        <Flex height={'100vh'} alignItems={'center'} justifyContent={'center'}>
            <Flex direction={'column'} background={'gray.100'} p={6} rounded={6} alignItems={'center'}>
                <Heading mb={3}>Available Restaurant</Heading>
                <Stack divider={<StackDivider />} spacing='4'>
                    {
                        restaurants.map((restaurant) => (
                            <Box>
                                <Heading size='xs' textTransform='uppercase'>
                                    {restaurant.name}
                                </Heading>
                                Lorem Ipsum Dolor.
                            </Box>
                        ))
                    }
                </Stack>

            </Flex>
        </Flex>
    )
}

export default viewPage
#

prob wont change anything

#

but try this?

twin tinsel
#

Oh okay my bad, this is due to my misunderstanding. getStaticProps() runs on serverside so I should have read the output from the server instead of the client 😅 . And the reason why no props being 'passed' is due to backend bug (empty list passed resulting no changes in visual).

#

Sorry for the trouble, thanks for sparing some time to look at my post @frail helm

frail helm
#

np !

twin tinsel
#

Oh but I have a question, If I am about to pass variables for this page (fetching with parameter) but still allow the page to run default parameter on standalone load, should I change the getStaticProps to getStaticProps(VariableObject)?

frail helm
#

getStaticProps variable if i remember correctly is only passed via getStaticPaths

twin tinsel
#

Hmmm I see, Ill look into that a bit more, thanks for the help! Ill mark this as solved