Server islands (#11305)

* Spike * Server Islands * Remove extra stuff * Fix build, a little * Fix build * astro metadata can be undefined * Add server:defer type * Add support for the build to Server Islands (#11372) * Add support for the build to Server Islands * Use command instead * editor tips * Add comment about defaultRoutes * Use renderChunk instead of generateBundle * Server islands tests (#11405) * Add support for the build to Server Islands * Use command instead * editor tips * Add comment about defaultRoutes * Use renderChunk instead of generateBundle * Adds tests for server islands * linting * Pass slots to server islands (#11431) * Require the experimental flag to use server islands (#11432) * Require the experimental flag to use server islands * Add flag to tests/examples * Protect SSR against SI not being enabled * Update the docs in the API ref * Upgrade to compiler 2.9.0 * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <[email protected]> * Fix lockfile * Add a changeset * Update .changeset/five-rocks-vanish.md Co-authored-by: Sarah Rainsberger <[email protected]> * Update .changeset/five-rocks-vanish.md Co-authored-by: Sarah Rainsberger <[email protected]> * Update .changeset/five-rocks-vanish.md Co-authored-by: Sarah Rainsberger <[email protected]> * Update .changeset/five-rocks-vanish.md Co-authored-by: Sarah Rainsberger <[email protected]> * Update lockfile * Update .changeset/five-rocks-vanish.md Co-authored-by: Sarah Rainsberger <[email protected]> --------- Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · Jul 17, 2024 · d495df5 · d495df5
1 parent 17d2eed
commit d495df5
Show file tree

Hide file tree

Showing 103 changed files with 3,746 additions and 98 deletions.
diff --git a/.changeset/five-rocks-vanish.md b/.changeset/five-rocks-vanish.md
@@ -0,0 +1,42 @@
+---
+'astro': minor
+---
+
+Experimental Server Islands
+
+Server Islands allow you to specify components that should run on the server, allowing the rest of the page to be more aggressively cached, or even generated statically. Turn any `.astro` component into a server island by adding the `server:defer` directive and optionally, fallback placeholder content:
+
+```astro
+---
+import Avatar from '../components/Avatar.astro';
+import GenericUser from '../components/GenericUser.astro';
+---
+
+<header>
+  <h1>Page Title</h1>
+  <div class="header-right">
+    <Avatar server:defer>
+      <GenericUser slot="fallback" />
+    </Avatar>
+  </div>
+</header>
+```
+
+The `server:defer` directive can be used on any Astro component in a project using `hybrid` or `server` mode with an adapter. There are no special APIs needed inside of the island.
+
+Enable server islands by adding the experimental flag to your Astro config with an appropriate `output` mode and adatper:
+
+```js
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  output: 'hybrid',
+  adapter: netlify(),
+  experimental {
+    serverIslands: true,
+  },
+});
+```
+
+For more information, see the [server islands documentation](https://docs.astro.build/en/reference/configuration-reference/#experimentalserverislands).
diff --git a/examples/server-islands/astro.config.mjs b/examples/server-islands/astro.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig } from 'astro/config';
+import nodejs from '@astrojs/node';
+import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+	output: 'server',
+	adapter: nodejs({ mode: 'standalone' }),
+	integrations: [
+		react(),
+		tailwind({ applyBaseStyles: false })
+	],
+	devToolbar: { enabled: false },
+	experimental: {
+		serverIslands: true,
+	}
+});
diff --git a/examples/server-islands/package.json b/examples/server-islands/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@example/server-islands",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "@astrojs/node": "^8.2.6",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/tailwind": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "workspace:*",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3"
+  }
+}