Astro JS - Solid.js Integration

What is Solid.js?

Solid.js is a declarative JavaScript library for building user interfaces. It is a simple and efficient library that allows you to build fast and reactive web applications. Solid is inspired by React and Svelte, and it provides a simple API to create reactive components. Solid.js uses fine-grained reactivity to optimize the performance of web applications. Astro allows us to integrate solid js components in astro applications.

Solid Integration in Astro

Astro provides built-in support for Solid.js by using Solid adapter to render Solid components. You can write your favorite UI components in Solid and optimize them for performance using Astro. Let's see how to integrate Solid.js with Astro.

Get Started With Solid in Astro

Follow the steps below to integrate Solid.js with Astro:

Step 1: Install Solid Adapter

First, you need to install the Solid adapter for Astro. You can do this using the following command:

>> npm install @astrojs/solid

Step 2: Configure Solid in Astro

Next step is to apply the integration to your astro.config.ts and tsconfig.json files using the integrations property:

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid';

export default defineConfig({
  // ...
  integrations: [solid()],
});

Now, Add following code to your typescript configuration file (tsconfig.json)

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

Step 3: Create a Solid Component

Now, you can create a Solid component in your Astro project. You can keep your components in the '/src/components' directory. Here is an example of a simple Solid component:

// src/components/Counter.jsx

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
        <h1>Counter: {count()}</h1>
        <button onClick={() => setCount(count() + 1)}>
            Increment
        </button>
    </div>
  );
}

Step 4: Use the Solid Component in Astro Page

Now, you can use the Solid component in your Astro page. The code below defines an Astro page at 'src/pages/index.astro'. The page imports the Counter component and renders it in the page.

<!-- File: src/pages/index.astro -->

---
    import Layout from '../layouts/Layout.astro';
    import Counter from "../components/Counter.jsx";
---

<Layout>
    <h1>Welcome to Astro</h1>
    <Counter />

That's it! You have successfully integrated Solid.js with Astro. You can now build fast and reactive web applications using Solid.js components in Astro.

Solid JS Suspense Boundaries

In order to support Solid Resources and Lazy Components without excessive configuration, server-only and hydrating components are automatically wrapped in top-level Suspense boundaries and rendered on the server using the renderToStringAsync function. Therefore, you do not need to add a top-level Suspense boundary around async components.

For example, you can use Solid’s createResource to fetch async remote data on the server. The remote data will be included in the initial server-rendered HTML from Astro:

function CharacterName() {
    const [name] = createResource(() =>
        fetch('https://swapi.dev/api/people/1')
        .then((result) => result.json())
        .then((data) => data.name)
    );

    return (
        <>
        <h2>Name:</h2>
        {/* Luke Skywalker */}
        <div>{name()}</div>
        </>
    );
}