Astro SSR: Framework components render only once | Astro Lounge | Page 1

grand thicket Apr 12, 2023, 2:32 PM

#

Hi. This might be a basic question, but I can't figure out what I'm missing.
I have enabled SSR. However, the following React component does not re-render when I refresh the page.
The equivalent astro component works through.

const nameQueryResult = Date.now();

export default function MyNameComponent() {
    return <div>Hello {nameQueryResult}!</div>;
}

Seems like Astro is serving a static version of the component.
How can I make this component re-render on every request?
Thanks in advance!

#

Astro SSR: Framework components render only once

modest nexus Apr 12, 2023, 2:33 PM

#

Hi. Are you reloading with the reload icon, CTRL+r or CTRL+shift+r?

grand thicket Apr 12, 2023, 2:35 PM

#

@modest nexus Tried both. It just render the component once and servers the same thing again and again 🤔

modest nexus Apr 12, 2023, 2:36 PM

#

With CTRL+shift+r too?

grand thicket Apr 12, 2023, 2:38 PM

#

No luck 😭 When I refresh, all the Astro components update. Only the react one stays static.

modest nexus Apr 12, 2023, 2:39 PM

#

Interesting. I’m not very familiar with react so I can’t really help you. Hopefully someone with more react knowledge sees this

grand thicket Apr 12, 2023, 2:51 PM

#

Attaching a reproduction of the issue

📎 astro-test.zip

quick atlas Apr 12, 2023, 5:24 PM

#

grand thicket Attaching a reproduction of the issue

Please upload it to github. (I won't be able to help though, I don't know react)

rocky drift Apr 12, 2023, 6:14 PM

#

https://docs.astro.build/en/guides/server-side-rendering/

Astro Documentation

Server-side Rendering

Build faster websites with less client-side JavaScript.

#

If ‘export const prerender = true;’ or ‘const prerender = true’ set? I’m on mobile device so couldn’t check your code.

fierce arch Apr 12, 2023, 6:50 PM

#

FYI i can't reproduce what you're showing!

#

https://stackblitz.com/edit/github-z7pqlj?file=src%2Fcomponents%2FCounter.tsx&on=stackblitz

#

when I refresh the page, the UI updates

grand thicket Apr 12, 2023, 8:00 PM

#

@fierce arch The issue is there in your example. You barely see it because client rendering kicks in so fast.
@rocky drift Tried what you suggested, but no luck

Reproduced in stackblitz: https://stackblitz.com/edit/github-z7pqlj-4vghuw?file=src/pages/index.astro

StackBlitz

Astro React Render Issue - StackBlitz

fierce arch Apr 12, 2023, 8:16 PM

#

ah, thank you!

#

i completely missed this

#

my guess is that because it is global in the file, that value doesn't get updated on every render. In React, there is nothing saying that that FILE re-runs when you refresh the code, only the component.

#

this is different from Astro, where the frontmatter always re-runs on every page

grand thicket Apr 13, 2023, 6:56 AM

#

Thank you guys! Please let me know if there is a way to make react re-render.

south galleon Apr 13, 2023, 4:56 PM

#

grand thicket Thank you guys! Please let me know if there is a way to make react re-render.

Moving the nameQueryResult variable declaration inside the react component should be enough

grand thicket Apr 13, 2023, 6:41 PM

#

@south galleon That implies an async call, which does not work when moved into the component.
Can someone confirm if this is a bug or the design?

south galleon Apr 13, 2023, 6:43 PM

#

Definitely not a bug, that's just how JavaScript modules work

#

The body of an imported module only runs once

south galleon Apr 13, 2023, 6:48 PM

#

grand thicket <@997896914014048256> That implies an async call, which does not work when moved...

I don't think Astro has a mechanism for data fetching in react components server side

#Astro SSR: Framework components render only once