<span id='activityNumberLength'>{activities.length}</span>
#does this array.length run server side or client side
vernal idol
forest zincBOT
Hi @vernal idol. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Astro, the code {activities.length} inside your HTML template runs server-side by default.
Astro is a server-first framework that leverages server rendering over client-side rendering as much as possible [Server-first]. Unless this code is placed inside a client-side <script> tag or belongs to a framework component (like React or Svelte) that has been hydrated with a client:* directive, it will execute on the server during the build process or at request time [Troubleshooting].
How to verify
You can verify where your code is running by using console.log():
- Server-side: If you place a log in the component frontmatter (between the
---fences), the output will appear in your terminal [Troubleshooting]. - Client-side: If you place a log inside a
<script>tag, the output will appear in the browser dev console [Troubleshooting].
---
// This runs on the SERVER
const activities = ['run', 'swim'];
console.log(activities.length);
---
<!-- This template expression also runs on the SERVER -->
<span id='activityNumberLength'>{activities.length}</span>
<script>
// Code here runs on the CLIENT (browser)
console.log('I am running in the browser');
</script>