@astrojs/ solid-js

이 Astro 통합 을 통해 SolidJS 컴포넌트에 대한 서버 측 렌더링 및 클라이언트 측 하이드레이션이 가능해졌습니다.

설치

Astro에는 공식 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다. 원하는 경우 대신 통합을 수동으로 설치할 수 있습니다.

@astrojs/solid-js를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

npx astro add solid

pnpm astro add solid

yarn astro add solid

문제가 발생하면 GitHub에서 언제든지 보고하고 아래 수동 설치 단계를 시도해 보세요.

수동 설치

먼저 @astrojs/solid-js 패키지를 설치하세요.

npm install @astrojs/solid-js

pnpm add @astrojs/solid-js

yarn add @astrojs/solid-js

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. Astro를 시작할 때 Cannot find package 'solid-js' (또는 이와 유사한) 경고가 표시되면 SolidJS를 설치해야 합니다.

npm install solid-js

pnpm add solid-js

yarn add solid-js

그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.

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

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

시작하기

Astro에서 첫 번째 SolidJS 컴포넌트를 사용하려면 UI 프레임워크 문서로 이동하세요. 다음을 탐색하게 됩니다.

📦 프레임워크 구성요소가 로드되는 방식,
💧 클라이언트 측 하이드레이션 옵션
🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회

구성

devtools

Added in: @astrojs/solid-js@4.2.0

devtools: true가 포함된 객체를 solid() 통합 구성에 전달하고 프로젝트 종속성에 solid-devtools를 추가하여 개발 모드에서 Solid DevTools를 활성화할 수 있습니다.

npm install solid-devtools

pnpm add solid-devtools

yarn add solid-devtools

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

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

옵션

여러 JSX 프레임워크 결합

동일한 프로젝트에서 여러 JSX 프레임워크 (React, Preact, Solid)를 사용하는 경우 Astro는 각 컴포넌트에 어떤 JSX 프레임워크별 변환을 사용해야 하는지 결정해야 합니다. 프로젝트에 하나의 JSX 프레임워크 통합만 추가한 경우 추가 구성이 필요하지 않습니다.

어떤 파일이 어떤 프레임워크에 속하는지 지정하려면 include (필수) 및 exclude (선택 사항) 구성 옵션을 사용하세요. 사용 중인 각 프레임워크에 포함할 파일 및/또는 폴더 배열을 제공하세요. 와일드카드를 사용하여 여러 파일 경로를 포함할 수 있습니다.

포함을 더 쉽게 지정할 수 있도록 공통 프레임워크 컴포넌트를 동일한 폴더 (예: /components/react/ 및 /components/solid/)에 배치하는 것이 좋지만 필수는 아닙니다.

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // 다양한 종류의 컴포넌트를 지원하기 위해 많은 프레임워크를 활성화합니다.
  // 단일 JSX 프레임워크만 사용하는 경우 `include`가 필요하지 않습니다!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*', '**/node_modules/@suid/material/**'],
    }),
  ],
});

사용하기

UI 프레임워크 컴포넌트와 마찬가지로 SolidJS 컴포넌트를 사용하세요.

Suspense Boundaries

과도한 구성 없이 Solid Resources 및 Lazy Components를 지원하기 위해 서버 전용 및 하이드레이션되는 컴포넌트는 자동으로 최상위 Suspense boundaries에 래핑되고 renderToStringAsync 함수를 사용하여 서버에서 렌더링됩니다. 따라서 비동기 컴포넌트 주위에 최상위 Suspense boundary를 추가할 필요가 없습니다.

예를 들어, Solid의 createResource를 사용하여 서버에서 비동기 원격 데이터를 가져올 수 있습니다. 원격 데이터는 Astro의 초기 서버 렌더링 HTML에 포함됩니다.

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>
    </>
  );
}