Server islands - Githubissues

matthewp commented 1 week ago

API Bashing

Create a new Astro project as normal:

npm create astro@latest

After that has been created, install the preview release:

npm install astro@experimental--server-islands

To use server islands you need to set your output to 'hybrid' or 'server':

export default defineConfig({
  output: 'hybrid'
});

Then add server:defer to any component. You can provide fallback HTML that will be rendered on the initial request with slot="fallback":

<PersonalBar server:defer>
  <div slot="fallback">Loading</div>
</PersonalBar>

Changes

Adds a server:defer directive to allow deferred islands that are loaded from the server after the page loads.

Testing

TODO

Docs

TODO

changeset-bot[bot] commented 1 week ago

⚠️ No Changeset found

Latest commit: 324f74e55d13fe8b91d0d5c4eef830fe849a38a6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

matthewp commented 1 week ago

!preview server-islands

github-actions[bot] commented 1 week ago

Snapshots have been released for the following packages:

@astrojs/markdown-remark@experimental--server-islands
@astrojs/underscore-redirects@experimental--server-islands
astro@experimental--server-islands
@astrojs/vercel@experimental--server-islands
@astrojs/node@experimental--server-islands
@astrojs/rss@experimental--server-islands
@astrojs/markdoc@experimental--server-islands
@astrojs/mdx@experimental--server-islands
Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--server-islands tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/db
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/web-vitals
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/studio
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info npm info @astrojs/upgrade
🦋  info astro is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn @astrojs/prism is not being published because version 3.1.0 is already published on npm
🦋  info @astrojs/rss is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn create-astro is not being published because version 4.8.0 is already published on npm
🦋  warn @astrojs/db is not being published because version 0.11.6 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/lit is not being published because version 4.3.0 is already published on npm
🦋  info @astrojs/markdoc is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  info @astrojs/mdx is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  info @astrojs/node is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn @astrojs/partytown is not being published because version 2.1.1 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.5.0 is already published on npm
🦋  warn @astrojs/react is not being published because version 3.6.0 is already published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.1.6 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 4.4.0 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 5.6.0 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  info @astrojs/vercel is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn @astrojs/vue is not being published because version 4.5.0 is already published on npm
🦋  warn @astrojs/web-vitals is not being published because version 0.2.1 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.4.0 is already published on npm
🦋  info @astrojs/markdown-remark is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn @astrojs/studio is not being published because version 0.1.0 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.1.0 is already published on npm
🦋  info @astrojs/underscore-redirects is being published because our local version (0.0.0-server-islands-20240621194657) has not been published on npm
🦋  warn @astrojs/upgrade is not being published because version 0.3.1 is already published on npm
🦋  info Publishing "astro" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/rss" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/markdoc" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/mdx" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/node" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/vercel" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/markdown-remark" at "0.0.0-server-islands-20240621194657"
🦋  info Publishing "@astrojs/underscore-redirects" at "0.0.0-server-islands-20240621194657"
🦋  success packages published successfully:
🦋  astro@0.0.0-server-islands-20240621194657
🦋  @astrojs/rss@0.0.0-server-islands-20240621194657
🦋  @astrojs/markdoc@0.0.0-server-islands-20240621194657
🦋  @astrojs/mdx@0.0.0-server-islands-20240621194657
🦋  @astrojs/node@0.0.0-server-islands-20240621194657
🦋  @astrojs/vercel@0.0.0-server-islands-20240621194657
🦋  @astrojs/markdown-remark@0.0.0-server-islands-20240621194657
🦋  @astrojs/underscore-redirects@0.0.0-server-islands-20240621194657
🦋  Creating git tags...
🦋  New tag:  astro@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/rss@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/markdoc@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/mdx@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/node@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/vercel@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/markdown-remark@0.0.0-server-islands-20240621194657
🦋  New tag:  @astrojs/underscore-redirects@0.0.0-server-islands-20240621194657

Build Log

``` > root@0.0.0 build /home/runner/work/astro/astro > turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*" • Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/db, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/studio, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/upgrade, @astrojs/vercel, @astrojs/vue, @astrojs/web-vitals, @benchmark/timer, astro, create-astro • Running build in 29 packages • Remote caching enabled ::group::@astrojs/telemetry:build cache miss, executing 4be50575ed7cb189 > @astrojs/telemetry@3.1.0 build /home/runner/work/astro/astro/packages/telemetry > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/internal-helpers:build cache miss, executing 18e3cc17afd46e2c > @astrojs/internal-helpers@0.4.0 build /home/runner/work/astro/astro/packages/internal-helpers > astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json > @astrojs/internal-helpers@0.4.0 postbuild /home/runner/work/astro/astro/packages/internal-helpers > astro-scripts copy "src/**/*.js" ::endgroup:: ::group::@astrojs/upgrade:build cache miss, executing c9c29891ecc45e55 > @astrojs/upgrade@0.3.1 build /home/runner/work/astro/astro/packages/upgrade > astro-scripts build "src/index.ts" --bundle && tsc ::endgroup:: ::group::@astrojs/prism:build cache miss, executing 07d34a42b62af751 > @astrojs/prism@3.1.0 build /home/runner/work/astro/astro/packages/astro-prism > astro-scripts build "src/**/*.ts" && tsc -p ./tsconfig.json ::endgroup:: ::group::create-astro:build cache miss, executing a97fcbb089c59091 > create-astro@4.8.0 build /home/runner/work/astro/astro/packages/create-astro > astro-scripts build "src/index.ts" --bundle && tsc ::endgroup:: ::group::@astrojs/markdown-remark:build cache miss, executing c99eae8875242790 > @astrojs/markdown-remark@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/markdown/remark > astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json > @astrojs/markdown-remark@0.0.0-server-islands-20240621194657 postbuild /home/runner/work/astro/astro/packages/markdown/remark > astro-scripts copy "src/**/*.js" ::endgroup:: ::group::astro:build cache miss, executing 37472f06da709b17 > astro@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/astro > pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild > astro@0.0.0-server-islands-20240621194657 prebuild /home/runner/work/astro/astro/packages/astro > astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts" > astro@0.0.0-server-islands-20240621194657 postbuild /home/runner/work/astro/astro/packages/astro > astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm" ::endgroup:: ::group::@astrojs/studio:build cache miss, executing f8da3be51b2fde41 > @astrojs/studio@0.1.0 build /home/runner/work/astro/astro/packages/studio > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@benchmark/timer:build cache miss, executing df8e98e3d7484853 > @benchmark/timer@0.0.0 build /home/runner/work/astro/astro/benchmark/packages/timer > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/partytown:build cache miss, executing 5c09bdaa72561292 > @astrojs/partytown@2.1.1 build /home/runner/work/astro/astro/packages/integrations/partytown > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/react:build cache miss, executing df6797c217421193 > @astrojs/react@3.6.0 build /home/runner/work/astro/astro/packages/integrations/react > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/node:build cache miss, executing 1d2fd87798902d06 > @astrojs/node@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/integrations/node > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/tailwind:build cache miss, executing 1b40813ec37952d5 > @astrojs/tailwind@5.1.0 build /home/runner/work/astro/astro/packages/integrations/tailwind > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/solid-js:build cache miss, executing 376b09937d02e2b3 > @astrojs/solid-js@4.4.0 build /home/runner/work/astro/astro/packages/integrations/solid > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/vercel:build cache miss, executing 832adde3894fdac9 > @astrojs/vercel@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/integrations/vercel > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/preact:build cache miss, executing ab26f06249731707 > @astrojs/preact@3.5.0 build /home/runner/work/astro/astro/packages/integrations/preact > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/vue:build cache miss, executing 65256b136068712e > @astrojs/vue@4.5.0 build /home/runner/work/astro/astro/packages/integrations/vue > astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc ::endgroup:: ::group::@astrojs/rss:build cache miss, executing 97f1f04e921d88ff > @astrojs/rss@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/astro-rss > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/lit:build cache miss, executing 1230fa80b5c49b67 > @astrojs/lit@4.3.0 build /home/runner/work/astro/astro/packages/integrations/lit > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/alpinejs:build cache miss, executing 2aec458d3c5d818f > @astrojs/alpinejs@0.4.0 build /home/runner/work/astro/astro/packages/integrations/alpinejs > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/markdoc:build cache miss, executing 77b00c603471e771 > @astrojs/markdoc@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/integrations/markdoc > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/underscore-redirects:build cache miss, executing 8be90d23b7df6e24 > @astrojs/underscore-redirects@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/underscore-redirects > astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json > @astrojs/underscore-redirects@0.0.0-server-islands-20240621194657 postbuild /home/runner/work/astro/astro/packages/underscore-redirects > astro-scripts copy "src/**/*.js" ::endgroup:: ::group::@astrojs/sitemap:build cache miss, executing c39e4237bcf26331 > @astrojs/sitemap@3.1.6 build /home/runner/work/astro/astro/packages/integrations/sitemap > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/mdx:build cache miss, executing 3fdaab21fcad1ecf > @astrojs/mdx@0.0.0-server-islands-20240621194657 build /home/runner/work/astro/astro/packages/integrations/mdx > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/svelte:build cache miss, executing f8ad6a40d39ed935 > @astrojs/svelte@5.6.0 build /home/runner/work/astro/astro/packages/integrations/svelte > astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc ::endgroup:: ::group::@astrojs/db:build cache miss, executing 2c5d1d2f07248bff > @astrojs/db@0.11.6 build /home/runner/work/astro/astro/packages/db > astro-scripts build "src/**/*.ts" && tsc && pnpm types:virtual > @astrojs/db@0.11.6 types:virtual /home/runner/work/astro/astro/packages/db > tsc -p ./tsconfig.virtual.json ::endgroup:: ::group::@astrojs/web-vitals:build cache miss, executing 3a16668716ba452d > @astrojs/web-vitals@0.2.1 build /home/runner/work/astro/astro/packages/integrations/web-vitals > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: Tasks: 27 successful, 27 total Cached: 0 cached, 27 total Time: 57.856s ```

Fryuni commented 3 days ago

Astro.self is failing with the following error:

Error: Could not find server component name
    at Object.render (/project/node_modules/.pnpm/astro@0.0.0-server-islands-20240621194657_@types+node@20.14.8_typescript@5.5.2/node_modules/astro/dist/runtime/server/render/server-islands.js:19:15)
    at Module.renderChild (/project/node_modules/.pnpm/astro@0.0.0-server-islands-20240621194657_@types+node@20.14.8_typescript@5.5.2/node_modules/astro/dist/runtime/server/render/any.js:31:17)

This alternative gives the expected result for a recursive component:

---
import Self from './Foo.astro'; // Name of the file where this is on
import * as timers from 'node:timers/promises';

await timers.setTimeout(1000);

const now = Date();
---
<p>
  {now}
</p>
{!Astro.props.stop && <Self stop server:defer />}

matthewp commented 3 days ago

Does that work normally? I was trying to use Astro.self but you are importing yourself (if I understand correctly). I have never done that before, that works in normal code?

Fryuni commented 3 days ago

Yes, without server:defer both using Astro.self and importing yourself works.

Fryuni commented 3 days ago

Server island is not triggered if it is added to the document from a client island:

---
import Foo from '../components/Foo.astro';
import Preact from '../components/Preact.tsx';
---
<Preact client:only="preact">
    <Foo server:defer />
</Preact>

The script is added to the page but nothing happens:

(Haven't tested with other frameworks, only preact)

The inverse, a client:only inside of a server:defer, works fine

misl-smlz commented 2 days ago

Can the example be extended to several pages (e.g. online shop items 1, 2 and 3)? This would allow you to see how the server-islands behave when changing pages and consider how you could eliminate the (probable) flickering, e.g. at the count.

Mouaz commented 16 hours ago

Great work here! however it would be better if there's some sort of client persistence/caching mechanism. It'd be too server consuming to load the server island on every navigation.

I suggest adding a client:persist directive.

matthewp commented 11 hours ago

@Mouaz that will work if you use the <ViewTransitions /> router already, I believe.

withastro / astro

Server islands #11305

API Bashing

Changes

Testing

Docs

⚠️ No Changeset found