Using Astro, React, and Svelte Together in One Project

Components

First of all, how is it possible to create a project with different frameworks simultaneously? The answer is Astro. Astro is a static site generator that allows you to mix different technologies within a single project. In this case, it enables me to use Svelte and React at the same time, allowing me to leverage the strengths of each.

Let me show you my Index.astro file:

import Layout from '@layout/Layout.astro';
import { SkillsDashboard } from '@components/React/skills/SkillsDashboard';
import Hero from '@components/Svelte/Hero/Hero.svelte';

<Layout title="Skills">
  <Hero client:load />
  <SkillsDashboard client:load showMain />
  <SkillsDashboard client:load />
</Layout>

Why use Astro, Svelte, and React together?

Since this project is dedicated to my portfolio, I want to demonstrate to visitors that I have strong flexibility and knowledge in various technologies. Additionally, by incorporating libraries like Tailwind CSS, I can speed up the development process and make the project more scalable.

One particularly interesting feature of Astro is the client directives added to components. These allow us to make optimizations like "hydrating" a component only when it becomes visible, thereby saving resources and improving the user experience. It is also important to mention that if we do not "hydrate" a component, it will remain static, meaning it cannot be interacted with, or at least the state cannot be interacted with.

import Layout from '@layout/Layout.astro';
---
<Layout title="Home">
  <!-- Static — no JS shipped -->
  <StaticComponent />

  <!-- Hydrated only when visible -->
  <DynamicComponent client:visible />

  <!-- Hydrated immediately -->
  <CriticalComponent client:load />
</Layout>

So... is it worth the trouble to use different technologies in a single project?

In my opinion, the answer is a resounding yes. By using different technologies in a single project, you can leverage the strengths of each. For example, we could fully utilize Svelte's reactivity to listen to real-time changes without the need for useEffect. On the other hand, React's useState can offer stricter state management.

Each technology brings its own strengths. Additionally, I would argue that you could achieve something with one tool that might be difficult or impossible with another.

In summary, having different technologies in a single project can be very beneficial. What do you think?