#Dynamic Routing without SSR

1 messages · Page 1 of 1 (latest)

wicked abyss
#

I would like to have a at a page such as /user/12345678 where i can grab the 12345678 of the url and use it within the js of my page, but i dont want to have to use SSR in order to do this. however, im not sure how to handle routing to this page as when i use SSG, it just shows a 404 not found error.

normal gobletBOT
#

Hi @wicked abyss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, you can achieve dynamic routing without using Server-Side Rendering (SSR) by using the getStaticPaths() function in Static Site Generation (SSG) mode. This function allows you to generate pages for dynamic routes at build time.

Here's how you can do it:

  1. Create a dynamic route by specifying a parameter in the filename of your Astro page. For example, if you want to create a page for each user, you might create a file named [id].astro in the src/pages/user directory.

  2. In this file, export a getStaticPaths() function that returns an array of objects, each with a params property that includes the dynamic parameter (id in this case). This function will be called at build time to determine the list of pages to generate.

Here's an example:

---export function getStaticPaths() {
  // Replace this with your actual data
  const users = ['12345678', '87654321', '11223344'];

  return users.map((id) => {
    return { params: { id } };
  });
}

const { id } = Astro.params;---
<div>User ID: {id}</div>

In this example, getStaticPaths() returns an array of objects, each representing a user page to generate. The id parameter is then accessible within the page through Astro.params.

Remember, all routes must be determined at build time in SSG mode. Therefore, you need to ensure that you have all the possible ids at build time.

For more information, you can refer to the Astro documentation on dynamic routes in SSG mode (https://docs.astro.build/en/guides/routing/#static-ssg-mode).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wicked abyss kapa.ai is still learning and improving, please let us know how it did by reacting below

wicked abyss
#

@normal goblet i dont know all the ids at build time though. is it possible to do for example /user?id=12345678 instead?

normal gobletBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can use query parameters like ?id=12345678 in the URL to pass data to your pages. However, unlike dynamic routes, query parameters are not part of the page's path and therefore do not affect which pages are generated at build time.

To access query parameters in an Astro component, you can use the Astro.request.url object, which is a built-in URL (https://developer.mozilla.org/en-US/docs/Web/API/URL) instance. You can use its searchParams property to get the values of query parameters.

Here's an example:

---
const url = new URL(Astro.request.url);
const id = url.searchParams.get('id');
---
<div>User ID: {id}</div>

In this example, Astro.request.url gives you the current URL, and searchParams.get('id') retrieves the value of the id query parameter.

Please note that this approach does not involve dynamic routing or generating multiple pages for different IDs. Instead, it allows you to handle different IDs on the client side by reading the query parameter from the URL.

For more information, you can refer to the Astro documentation on the Astro.request object (https://docs.astro.build/en/reference/api-reference/#astrorequest).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: