I want to access the url's search params on a SSG page. Is there anyway to achieve this?
#I want to access the url's search params on a SSG page. Is there anyway to achieve this?
mental hamlet
jaunty condorBOT
Hi @mental hamlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You generally cannot access URL search parameters on a prerendered (SSG) page at build time.
Astro’s request object on prerendered pages does not include search params, because they can’t be known ahead of time during a static build. [request]
“On prerendered pages,
request.urldoes not contain search parameters, like?type=new, as it’s not possible to determine them ahead of time during static builds.” [request]
To work with search params, you must render the route on demand (SSR / server mode or export const prerender = false) so that Astro.request.url (and therefore Astro.url) includes the query string. [Request]
So on a pure SSG page: no, there’s no built‑in way to read search params on the server side. You’d need either:
- On-demand rendering (server mode /
prerender = false), or - Client-side JavaScript to read
window.location.searchin the browser. (This second option is not described in the provided docs, but follows from normal browser behavior.)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
mental hamlet
@jaunty condor when are script tags evaluated in the component lifecycle of astro+react?
jaunty condorBOT
Let me check the knowledge base for you again. One moment! :books:
Astro evaluates scripts in two distinct places, separate from React’s own lifecycle:
1. Astro frontmatter (server-side, before render)
Code in the frontmatter fence (--- ... ---) runs on the server only, at build time or on-demand render. It never runs in the browser. [Astro components]
---
console.log('Server only');
import MyReact from '../components/MyReact.jsx';
---
<MyReact client:load />
This happens before any HTML is sent and before any React hydration.
2. <script> tags in .astro templates (client-side, after HTML is in the DOM)
Code inside <script> tags in an .astro file is sent to the browser and runs there. [Client-side scripts]
<MyReact client:load />
<script>
// Runs in the browser after the page loads and the script is executed
const el = document.querySelector('[data-something]');
</script>
How and when these scripts run depends on the kind of script:
- Bundled module scripts (no attributes other than
src):- Processed by Astro/Vite (TypeScript, bundling,
type="module", deduplication). [Script processing] - With view transitions, they are executed once per visit; they are not re-run on subsequent navigations if the same module is already loaded. [Script re-execution]
- Processed by Astro/Vite (TypeScript, bundling,
- Inline/unprocessed scripts (
is:inlineor any extra attribute):- Rendered exactly as written and can re-execute when the page is revisited or when using client-side routing, depending on navigation. [Unprocessed scripts; Script re-execution]
Astro v5 renders <script> tags where you declare them instead of hoisting them to <head>, so their execution timing is tied to their position in the HTML and normal browser behavior. [Script tags in v5]
3. React component lifecycle vs. Astro scripts
The knowledge sources do not describe a precise ordering between React lifecycle (e.g. useEffect) and Astro <script> execution. They only state:
- React components become interactive when hydrated via
client:*directives likeclient:load,client:visible, etc. [Hydrating components] - Astro’s own scripts are just normal browser scripts/modules, executed according to where they appear and how they’re processed.
So, from the docs we can say:
- Server frontmatter runs first (build/server render).
- Then the HTML is delivered.
- In the browser, Astro’s bundled/inline scripts and React hydration code both run as normal client-side JavaScript; the exact interleaving with React’s internal lifecycle is not specified in the provided docs.