Add support for SSR

.changeset/six-phones-boil.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Add support for server side components inside of Starlight pages.

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
           cache: 'pnpm'
       - run: pnpm i
       - name: Test packages
-        run: pnpm -r test:coverage
+        run: pnpm -r test:coverage:all
 
   e2e-test:
     name: Run E2E tests

docs/astro.config.mjs

@@ -208,7 +208,7 @@ export default defineConfig({
 							errorOnFallbackPages: false,
 							errorOnInconsistentLocale: true,
 						}),
-				  ]
+					]
 				: [],
 		}),
 	],

docs/src/content/docs/manual-setup.mdx

@@ -125,6 +125,6 @@ In the future, we plan to support this use case better to avoid the need for the
 
 ### Use Starlight with SSR
 
-You can use Starlight alongside custom on-demand rendered pages in your project by following the [“On-demand Rendering Adapters”](https://docs.astro.build/en/guides/server-side-rendering/) guide in Astro’s docs.
+Starlight supports [SSR](https://docs.astro.build/en/guides/server-side-rendering/) out of the box using Astro's server adapters.
 
-Currently, documentation pages generated by Starlight are always prerendered regardless of your project's output mode. We hope to be able to support on-demand rendering for Starlight pages soon.
+Contrary to your own pages, documentation pages generated by Starlight are always prerendered by default regardless of your project's output mode. To opt-out of prerendering your Starlight pages, set the [`prerender` config option](/reference/configuration/#prerender) to `false`.

docs/src/content/docs/reference/configuration.mdx

@@ -433,6 +433,18 @@ Define whether Starlight’s default site search provider [Pagefind](https://pag
 Set to `false` to disable indexing your site with Pagefind.
 This will also hide the default search UI if in use.
 
+Pagefind cannot be enabled when the [`prerender`](#prerender) option is set to `false`.
+
+### `prerender`
+
+**type:** `boolean`
+**default:**: `true`
+
+Define whether Starlight pages should be prerendered or handled using SSR.
+This option behave just like the [`export const prerender`](https://docs.astro.build/en/guides/server-side-rendering/#enable-on-demand-server-rendering) from Astro pages and allow overriding the default prerendering behavior of the selected output mode.
+
+Starlight pages are prerendeered by default regardless of the output mode of the Astro project. This differs from the default behavior of Astro pages, which are prerendered by default on `output: 'hybrid'` but not `output: 'server'`.
+
 ### `head`
 
 **type:** [`HeadConfig[]`](#headconfig)

examples/ssr/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/ssr/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/ssr/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/ssr/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

examples/ssr/astro.config.mjs

@@ -0,0 +1,40 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import node from '@astrojs/node';
+
+// https://astro.build/config
+export default defineConfig({
+	output: 'server',
+	integrations: [
+		starlight({
+			title: 'My Docs',
+			prerender: false,
+			lastUpdated: true,
+			social: {
+				github: 'https://github.com/withastro/starlight',
+			},
+			sidebar: [
+				{
+					label: 'SSR Demo',
+					link: '/demo',
+				},
+				{
+					label: 'Guides',
+					items: [
+						{
+							label: 'Example Guide',
+							link: '/guides/example/',
+						},
+					],
+				},
+				{
+					label: 'Reference',
+					autogenerate: {
+						directory: 'reference',
+					},
+				},
+			],
+		}),
+	],
+	adapter: node({ mode: 'standalone' }),
+});

examples/ssr/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@example/starlight-ssr",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/node": "^7.0.0",
+    "@astrojs/starlight": "workspace:*",
+    "astro": "^4.0.1",
+    "sharp": "^0.32.5"
+  }
+}

examples/ssr/src/components/RenderTime.astro

@@ -0,0 +1,7 @@
+---
+const now = Date();
+---
+
+<p>
+	Page was rendered on {now}
+</p>

examples/ssr/src/content/config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+	docs: defineCollection({ schema: docsSchema() }),
+	i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
+};

examples/ssr/src/content/docs/404.mdx

@@ -0,0 +1,13 @@
+---
+title: '404'
+template: 'splash'
+editUrl: false
+head: []
+hero: { tagline: 'Not found', actions: [] }
+pagefind: false
+sidebar: { hidden: false, attrs: {} }
+---
+
+import RenderTime from '../../components/RenderTime.astro';
+
+<RenderTime />

examples/ssr/src/content/docs/demo.mdx

@@ -0,0 +1,9 @@
+---
+title: Demonstrating SSR
+prev: false
+next: false
+---
+
+import RenderTime from '../../components/RenderTime.astro';
+
+<RenderTime />

examples/ssr/src/content/docs/guides/example.md

@@ -0,0 +1,11 @@
+---
+title: Example Guide
+description: A guide in my new Starlight docs site.
+---
+
+Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
+Writing a good guide requires thinking about what your users are trying to do.
+
+## Further reading
+
+- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework

examples/ssr/src/content/docs/index.mdx

@@ -0,0 +1,36 @@
+---
+title: Welcome to Starlight
+description: Get started building your docs site with Starlight.
+template: splash
+hero:
+  tagline: Congrats on setting up a new Starlight project!
+  image:
+    file: ../../assets/houston.webp
+  actions:
+    - text: Example Guide
+      link: /demo
+      icon: right-arrow
+      variant: primary
+    - text: Read the Starlight docs
+      link: https://starlight.astro.build
+      icon: external
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+## Next steps
+
+<CardGrid stagger>
+	<Card title="Update content" icon="pencil">
+		Edit `src/content/docs/index.mdx` to see this page change.
+	</Card>
+	<Card title="Add new content" icon="add-document">
+		Add Markdown or MDX files to `src/content/docs` to create new pages.
+	</Card>
+	<Card title="Configure your site" icon="setting">
+		Edit your `sidebar` and other config in `astro.config.mjs`.
+	</Card>
+	<Card title="Read the docs" icon="open-book">
+		Learn more in [the Starlight Docs](https://starlight.astro.build/).
+	</Card>
+</CardGrid>

examples/ssr/src/content/docs/reference/example.md

@@ -0,0 +1,11 @@
+---
+title: Example Reference
+description: A reference page in my new Starlight docs site.
+---
+
+Reference pages are ideal for outlining how things work in terse and clear terms.
+Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what your documenting.
+
+## Further reading
+
+- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework

examples/ssr/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

examples/ssr/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}

packages/starlight/.gitignore

@@ -1,2 +1,3 @@
 # Astro generates this during tests, but we want to ignore it.
-src/env.d.ts
+env.d.ts
+.astro

packages/starlight/404SSR.astro

@@ -0,0 +1,50 @@
+---
+import { getEntry } from 'astro:content';
+import config from 'virtual:starlight/user-config';
+import EmptyContent from './components/EmptyMarkdown.md';
+import Page from './components/Page.astro';
+import { generateRouteData } from './utils/route-data';
+import type { StarlightDocsEntry } from './utils/routing';
+import { useTranslations } from './utils/translations';
+
+export const prerender = false;
+
+const { lang = 'en', dir = 'ltr' } = config.defaultLocale || {};
+let locale = config.defaultLocale?.locale;
+if (locale === 'root') locale = undefined;
+
+const entryMeta = { dir, lang, locale };
+const t = useTranslations(locale);
+
+const fallbackEntry: StarlightDocsEntry = {
+	slug: '404',
+	id: '404.md' as StarlightDocsEntry['id'],
+	body: '',
+	collection: 'docs',
+	data: {
+		title: '404',
+		template: 'splash',
+		draft: false,
+		editUrl: false,
+		head: [],
+		hero: { tagline: t('404.text'), actions: [] },
+		pagefind: false,
+		sidebar: { hidden: false, attrs: {} },
+	},
+	render: async () => ({
+		Content: EmptyContent,
+		headings: [],
+		remarkPluginFrontmatter: {},
+	}),
+};
+
+const userEntry = await getEntry('docs', '404');
+const entry = userEntry || fallbackEntry;
+const { Content, headings } = await entry.render();
+const route = generateRouteData({
+	props: { ...entryMeta, entryMeta, headings, entry, id: entry.id, slug: entry.slug },
+	url: Astro.url,
+});
+---
+
+<Page {...route}><Content /></Page>

packages/starlight/__tests__/basics/config-errors.test.ts

@@ -63,6 +63,7 @@ test('parses valid config successfully', () => {
 		  "locales": undefined,
 		  "pagefind": true,
 		  "pagination": true,
+		  "prerender": true,
 		  "tableOfContents": {
 		    "maxHeadingLevel": 3,
 		    "minHeadingLevel": 2,