ASRO SSR

[livid needle]

what's the best way to build the following with Astro SSR.

A small app with a input box on the UI. All i need is the query ( user input) to pass to the backend.

Make the network request on the server given the query and send the fully generated HTML to the client.

I've tried the Astro.url.searchParams to get the query from the UI but i had to do location.reload() for it to work.

SERVER index.astro

const searchQuery: string = Astro.url.searchParams.get("q") ?? "";
const query: string = searchQuery.toLowerCase();
result = await getRecipeInfo(query);

CLIENT somefile.ts
const searchQuery = inputBox.value.trim();
const formattedQuery = searchQuery.replace(/\s+/g, "+");
const newURL = ${window.location.origin}/?q=${formattedQuery};
window.history.pushState({ q: formattedQuery }, "", newURL);
location.reload();

[sacred depot]

Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[wind junco]

I would use a form to do something like this, here is a good example in the docs: https://docs.astro.build/en/recipes/build-forms/

[livid needle]

@wind junco here is the finished product without using a form but I know it's not optimal esp. with the location.reload() but it works. I'll have to rewrite it to use a form as suggested

https://recipem.vercel.app/?q=roasted+italian+plum

[wind junco]

Cool website! It works great, reloading the page is required for this to work (a form would also reload the page) so location.reload() is ok!