Rerendering errorpage

[keen urchin]

Hi @north plank. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the provided code and the information from the extracts, it's not immediately clear why your error page is re-rendering every 3 seconds. However, there are a few things you might want to check:

1. Error Propagation: Ensure that the error being passed to the Error component is not changing every 3 seconds. If the error prop changes, it will trigger a re-render of the component due to the useEffect hook.

2. Reset Function: Check the implementation of the reset function that's being passed as a prop to the Error component. If this function is causing a state change or a re-render of a parent component, it could be causing the Error component to re-render as well.

3. Parent Component: Check the parent component that is rendering the Error component. If the parent component is re-rendering for some reason, it would cause all child components, including the Error component, to re-render as well.

Remember, the reset function in the Error component is used to attempt to recover from an error without a full page reload. When executed, the function will try to re-render the Error boundary's contents. If successful, the fallback error component is replaced with the result of the re-render (source (https://nextjs.org/docs/app/api-reference/file-conventions/error)).

If none of the above points help, you might need to debug your application further to identify the cause of the re-renders.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@north plank kapa.ai is still learning and improving, please let us know how it did by reacting below

[north plank]

@keen urchin
How can i separate components here to use serverside rendering? Currently its impossible because of useState:

'use client'
const images = [
  '/img/landing/webp/Pigeons.webp',
  '/img/landing/webp/Dashboard.webp',
  '/img/landing/webp/Pedigree.webp',
]

const periods = [
  { label: 'Moje gołębie', value: '0' },
  { label: 'Dashboard', value: '1' },
  { label: 'Generator rodowodu', value: '2' },
]
export const LandingAppPreview = () => {
  const [currentSelectedImage, setSelectedImage] = useState(1)

  const largeScreen = useMediaQuery(cssVars.smallerThan('xs'))

  return (
    <Stack justify="center" ta={'center'}>
      <Title order={2} designColor={'textPrimary'}>
        Jak <AccentedSpan>wygląda</AccentedSpan> aplikacja?
      </Title>

      <Box mt={24} mb={0}>
        <SegmentedControl
          value={currentSelectedImage.toString()}
          onChange={(value) => setSelectedImage(parseInt(value))}
          data={periods}
          name="CurrentPreviewItem"
          defaultValue="1"
          w={{ base: '100%', xs: 'auto' }}
          mx={'auto'}
          // size={largeScreen ? 'sm' : 'md'}
        />
      </Box>

      <Group gap={4} className={classes.imageGallery} wrap="nowrap">
        <PreviewImageCard selectedImage={currentSelectedImage} index={0} />
        <PreviewImageCard selectedImage={currentSelectedImage} index={1} />
        <PreviewImageCard selectedImage={currentSelectedImage} index={2} />
        <div className={classes.mask}></div>
      </Group>
    </Stack>
  )
}

[keen urchin]

Let me check the knowledge base for you. One moment! :books:

---

In your current setup, you're using useState which is a client-side feature, and this is preventing you from using server-side rendering (SSR). To use SSR, you need to fetch data in a special function called getServerSideProps and pass it to your page as props. However, getServerSideProps can't be used inside a component, it can only be exported from a page.

Here's a general idea of how you can modify your code to use SSR:

1. Move the data fetching logic to getServerSideProps in your page file.
2. Pass the fetched data to your component as props.

However, in your case, it seems like you're not fetching any data from an external source, but rather you're managing local state within your component. If you're not fetching any data from an external source, you might not need SSR for this component.

If you still want to use SSR, you might need to rethink your component structure or the way you're managing state. Remember, with SSR, the page is rendered on the server, and the rendered HTML is sent to the client. So, any state that's managed on the client with useState won't exist until the JavaScript is downloaded and executed on the client.

If you need to manage state on the client, you might want to consider using a hybrid approach where some parts of your page are rendered on the server (using SSR) and others are rendered on the client (using CSR). This can be achieved with Next.js by using a combination of getServerSideProps for SSR and React's useEffect hook for CSR (source (https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering)).

Remember, SSR and CSR are different rendering strategies, and the best one to use depends on the specific needs of your application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: