#Cleaner urls

1 messages · Page 1 of 1 (latest)

boreal fossil
ivory helmBOT
#

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

#

To achieve this in Astro using Server-Side Rendering (SSR), you can create a dynamic route that captures the slug from the URL and then use it to fetch the relevant data.

Here's a basic example of how you can do this:

---
const pages = [
 {
 slug: 'productos/categorias/campanas-de-flujo-laminar',
 title: 'Campanas de Flujo Laminar',
 text: 'Information about Campanas de Flujo Laminar',
 },
 // ... other pages
];

const { slug } = Astro.params;
const page = pages.find((page) => page.slug === slug);
if (!page) return Astro.redirect("/404");
const { title, text } = page;
---
<html>
<head>
 <title>{title}</title>
</head>
<body>
 <h1>{title}</h1>
 <p>{text}</p>
</body>
</html>

In this example, the slug parameter is used to look up the page data in an array of page objects. If a page with the matching slug is found, its data is used to render the page. If no matching page is found, the user is redirected to a 404 page.

This code should be placed in a file named [...slug].astro in your src/pages directory. The [...slug] in the filename is a placeholder that matches any route, and the slug parameter in the URL will be passed to your page as Astro.params.slug.

Please note that this is a simplified example and you might need to adjust it to fit your specific needs. For example, if your page data is not static but needs to be fetched from a database or an API, you would replace the array lookup with a data fetching function.

For more information, you can refer to the Astro documentation on routing (https://docs.astro.build/en/core-concepts/routing) and server-side rendering (https://docs.astro.build/en/guides/server-side-rendering/).

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

#

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

boreal fossil
#

@ivory helm whats the difference between [slug].astro and [...slug].astro

ivory helmBOT
#

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

#

The difference between [slug].astro and [...slug].astro lies in the way they handle dynamic routes in Astro.

  • [slug].astro: This is used for simple dynamic routes. It matches a single segment of the URL. For example, if you have a route like /pages/posts/[slug].astro, it will match URLs like /posts/hello-world, where hello-world is the slug.

  • [...slug].astro: This is used for more complex dynamic routes. It matches multiple segments of the URL. This is often referred to as a "catch-all" or "rest" route. For example, if you have a route like /pages/[...slug].astro, it will match URLs like /products/cameras/digital, where products/cameras/digital is the slug.

In both cases, the value of the slug is available in your Astro component as Astro.params.slug.

For more information, you can refer to the Astro documentation on routing (https://docs.astro.build/en/core-concepts/routing).

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

#

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

boreal fossil
#

@ivory helm
custom astro js url ssr

ivory helmBOT
#

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

#

In Astro, you can create custom URLs using Server-Side Rendering (SSR) by defining dynamic routes. Dynamic routes are defined using file names with square brackets, like [slug].astro or [...slug].astro.

Here's a basic example of how you can create a custom URL using SSR:

---
// Example: src/pages/[slug].astro
import { getPageData } from "../api/index.js"

const { slug } = Astro.params;
const pageData = await getPageData(slug);

if (!pageData) {
 return Astro.redirect("/404")
}
---

<html>
<head>
 <title>{pageData.title}</title>
</head>
<body>
 <h1>{pageData.title}</h1>
 <p>{pageData.content}</p>
</body>
</html>

In this example, the slug parameter is used to fetch the page data from an API. If no data is found for the given slug, the user is redirected to a 404 page.

This code should be placed in a file named [slug].astro in your src/pages directory. The [slug] in the filename is a placeholder that matches any route, and the slug parameter in the URL will be passed to your page as Astro.params.slug.

For more complex routes that include multiple segments, you can use a catch-all route like [...slug].astro.

For more information, you can refer to the Astro documentation on routing (https://docs.astro.build/en/core-concepts/routing) and server-side rendering (https://docs.astro.build/en/guides/server-side-rendering/).

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

#

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

boreal fossil
#

@ivory helm what are redirects

ivory helmBOT
#

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

#

Redirects in web development are a way to send users and search engines to a different URL from the one they originally requested. This can be useful in various scenarios, such as when a webpage has been moved to a new location, or when you want to send users to a different page based on certain conditions (like if they are not logged in).

In the context of Astro, there are several ways to implement redirects:

  1. Astro.redirect(): This is a method available on the Astro global object that allows you to redirect to another page. It must be used in a page (not a child component) and the result of Astro.redirect() must be returned for the redirect to occur. This is typically used for dynamic redirects, such as redirecting a user to a login page if they are not authenticated. Source (https://docs.astro.build/en/reference/api-reference#astroredirect)

    Example:

    ---
import { isLoggedIn } from '../utils';

const cookie = Astro.request.headers.get('cookie');

// If the user is not logged in, redirect them to the login page
if (!isLoggedIn(cookie)) {
 return Astro.redirect('/login');
}
---

  2. Configured Redirects: You can specify a mapping of permanent redirects in your Astro config with the redirects value. This is a mapping of an old route to the new route. These redirects follow the same rules as file-based routes. Dynamic routes are allowed as long as both the new and old routes contain the same parameters. Source (https://docs.astro.build/en/core-concepts/routing#configured-redirects)

    Example:

    import { defineConfig } from 'astro/config';

export default defineConfig({
 redirects: {
  '/old-page': '/new-page'
 }
});
#

  1. Endpoint Redirects: The endpoint context exports a redirect() utility similar to Astro.redirect. This is typically used in server endpoints to redirect to another URL based on the result of some server-side logic. Source (https://docs.astro.build/en/core-concepts/endpoints#redirects)

    Example:

    import { getLinkUrl } from '../db';

export async function get({ params, redirect }) {
 const { id } = params;
 const link = await getLinkUrl(id);

 if (!link) {
  return new Response(null, {
   status: 404,
   statusText: 'Not found'
  });
 }

 return redirect(link, 307);
}

Please note that the Astro.redirect function is only available when Server-side rendering is enabled. To redirect on a static website, the meta refresh attribute can be used. Certain hosts also provide config-based redirects. Source (https://docs.astro.build/en/reference/errors/static-redirect-not-available#what-went-wrong)

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