Search code examples
javascriptastrojs

Astro.js dynamic import

so i have a bit of an issue, i am making a website, that changes content depending on API, right now the API request is only made during build, but i need for the site to dynamically update, so that when the price of the product is changed for example, the price automatically updates

---
import "../styles/bootstrap.css";
import "../styles/fontawesome-all.css";
import "../styles/magnific-popup.css";
import "../styles/styles.css";
import "../styles/swiper.css";
import Layout from "../layouts/Layout.astro";
import Nav from "../layouts/Nav.astro";
import Content from "../layouts/Content.astro";
import Hero from "../layouts/Hero.astro";
import Footer from "../layouts/Foorter.astro";
import { appName, shortDesc, link, price, img, desc, copyright, tags} from "../scripts/getFromApi";

---

<Layout title={appName} desc={shortDesc} favIcon={img} tags={[appName, tags]}>
    <Nav href={link} name={appName} />
    <Hero
        appName={appName}
        appShortDesc={shortDesc}
        price={price}
        href={link}
        imageHref={img}
    />
    <Content price={price} appName={appName} appDesc={desc} appLink={link} />
    <Footer copyRight={copyright} />
    <script
        src="https://kit.fontawesome.com/1a466070cf.js"
        crossorigin="anonymous"
    ></script>
</Layout>
Solution

  • You may have these options.

    • Do SSR to render your template with the latest data at request time. Your page won't need any additional javascript to render the dynamic content.
    • Do SSG using vanilla javascript or framework components with the client:only directive to fetch and render the dynamic content on the client. This option will require more javascript to be loaded and SEO won't be great.
    • Do SSG and set up a webhook that triggers a build every time the dynamic content changes. This is won't be useful if the content changes too frequently