Question Regarding JavaScript in Astro

[hallow otter]

Hello everyone,

I have a quick question about using JavaScript in Astro. As I understand it, a .astro file does not allow JavaScript to run by default at runtime. If I include JavaScript in the designated area within the ---, this code is utilized and processed during build time, but is no longer available at runtime.

However, this assumption seems to conflict with the information found here: https://docs.astro.build/en/recipes/build-forms/. In this guide, JavaScript is used on an Astro page to validate and handle forms.

If a written explanation is too cumbersome, I'm also open to a quick call.

Thank you in advance!

Best regards,
Henkel

[dim raven]

The linked article is using HTTP form requests to submit data from the client to the server

And you can use variables from your frontmatter within your HTML templating

The barrier is more server/client meaning you wont be able to directly access a frontmatter variable in a script tag for example (as the frontmatter runs on the server with the script tag running on the client)

[hallow otter]

Thanks for your quick response.

When we talk about build time, do we mean the time when the server renders the website and not when we build the project itself, correct?

So, the code in the frontmatter should only be used by the server. The errors variable is then converted into HTML by the server along with the template and sent to the client. The client does not receive any JavaScript in this process.

During a POST request, the server handles validation, etc., and returns new HTML to the client with the variables inserted.

Is that correct?

[dim raven]

Ngl my knowledge of the entire process is a bit lacking but yes that does sound correct

The HTTP request bypasses the server/client boundary because it's sending a request from the client to the server and a response back

And as far as the frontmatter code it depends on your rendering solution

For SSG yes it's run at build time and thats it

For SSR it's run on request

[hallow otter]

Okay, that makes sense, thank you very much!

[tall river]

If your issue is resolved, please help by doing the following two steps:

1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
2. From the same ellipses, select Close Post.
   Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
   Thank you for your help!

[hallow otter]

Sorry, I have a follow-up question.
Does Astro always use SSR (Server-Side Rendering)?

Or how does it distinguish between SSR, CSR, and SSG?

[dim raven]

Astro defaults to SSG, you need to opt in to SSR which has two options hybrid and server

Hybrid is basically SSG accept you can have pages opt in to being server side rendered (theres a PR to make this the default behavior and remove SSG)

Server is bascially the opposite, everything is rendered SSR and you can opt in pages to be statically rendered

https://docs.astro.build/en/basics/rendering-modes/