在客户端使用Astro组件

Question

我有这个组件

---
import Siren from '@components/Icons/Siren.astro';
import type { IJob } from '@util/job.interface';

export interface Props extends IJob{}
const Job=Astro.props
const {company, title, email, type, deadline, skills, link, logo,close=false }=Job
const tags=skills.split(",")
---

<div class='transition ease-in-out delay-150 flex overflow-hidden border border-zinc-300 rounded-md ring-slate-800  shadow-md duration-300 hover:border-zinc-500 hover:shadow-lg hover:scale-105'>
        <img src={logo} onerror="this.onerror=null; this.src='/images/joblogo.png'" alt="logo" class=" bg-white w-28 sm:w-32 object-cover object-center">
        <div class="flex flex-col text-[#002838] mx-2 my-2 sm:mx-4 sm:my-4 text-sm w-full">
            <h1 class="font-bold">{title}</h1>
            <div class="text-xs mt-1">
                <h2 class="font-medium mt-1">{company}</h2>
                <p class="mb-1">{type}</p>
                <p class={close && 'text-[#ED0000] flex relative'}>Apply before: {deadline} {close && 
                    <span class="flex">
                        <span class="animate-ping mx-[0.68rem] absolute inline-flex h-3 w-3 rounded-full bg-[#ED0000] opacity-75"></span>
                        <span class="relative mx-2 -my-1"><Siren/></span>
                    </span>
                }
                </p>
            </div>
            <div class="flex mt-6 items-center">
                <ul class="flex flex-wrap gap-2 text-[8px] sm:text-xs font-medium">
                    {tags.map(tag=>{
                        return <li class="rounded-sm bg-[#002838] text-white text-start px-1 hover:bg-[#00283896] duration-150">{tag}</li>
                    })}
                </ul>
            </div>
            {
                link && <button 
            type="button" class="self-end mt-4 rounded-lg bg-[#0374E2] text-white w-16 sm:w-20 item-center text-md h-6 hover:text-zinc-800 hover:bg-accent duration-150 hover:shadow-md">
                <a href={link} target="_blank">Apply</a>
            </button>
            }
            {
                email && 
            <button 
            type="button" onclick={`openModal("${email}")`} class="self-end mt-4 rounded-lg bg-[#0374E2] text-white w-16 sm:w-20 item-center text-md h-6 hover:text-zinc-800 hover:bg-accent duration-150 hover:shadow-md">
                Apply
            </button>
            
            }
            
        </div>
</div>

我想从 api 获取数据，并使用 vanilla js 渲染此组件

我知道我可以从服务器端执行此操作，但我正在尝试启用搜索，因此我必须再次调用 api 并渲染新数据，然后返回，并且无法像 astro 一样再次与服务器交互只需在构建时运行此代码

那么有什么解决办法吗？

我正在尝试扩展我的 astro 组件，但我不知道如何通过 HTML 自定义元素传递我的 props

Answer 1

Astro 组件不会渲染客户端，如其文档中所述：

了解 Astro 组件最重要的一点是它们不会在客户端上渲染。它们在构建时或按需使用服务器端渲染 (SSR) 渲染为 HTML。您可以在组件 frontmatter 中包含 JavaScript 代码，所有这些代码都将从发送到用户浏览器的最终页面中删除。结果是网站速度更快，默认添加的 JavaScript 占用量为零。

另一种方法是使用客户端 js 手动创建组件，但它不能是

.astro

组件。在此处了解有关 SSR 的更多信息：

https://docs.astro.build/en/guides/server-side-rendering/#configure-server-or-hybrid

。 您的某些页面仍然可以静态呈现。 我还没有研究过

可能

可能的一件事是使用React集成中的服务器组件之类的东西，但我认为如果可能的话，这会比它的价值更麻烦。 我希望这对你有帮助。