2 files changed, 91 insertions, 0 deletions
diff --git a/examples/ssr/src/pages/index.astro b/examples/ssr/src/pages/index.astro
new file mode 100644
index 000000000..ea2c6c2f6
--- /dev/null
+++ b/examples/ssr/src/pages/index.astro
@@ -0,0 +1,36 @@
+---
+import Header from '../components/Header.astro';
+import Container from '../components/Container.astro';
+import ProductListing from '../components/ProductListing.astro';
+import { getProducts } from '../api';
+import '../styles/common.css';
+
+const products = await getProducts();
+---
+<html>
+<head>
+	<title>Online Store</title>
+	<style>
+		h1 {
+			font-size: 36px;
+		}
+
+		.product-listing-title {
+			text-align: center;
+		}
+
+		.product-listing {
+
+		}
+	</style>
+</head>
+<body>
+	<Header />
+
+	<Container tag="main">
+		<ProductListing products={products} class="product-listing">
+			<h2 class="product-listing-title" slot="title">Product Listing</h2>
+		</ProductListing>
+	</Container>
+</body>
+</html>
diff --git a/examples/ssr/src/pages/products/[id].astro b/examples/ssr/src/pages/products/[id].astro
new file mode 100644
index 000000000..943f2ab84
--- /dev/null
+++ b/examples/ssr/src/pages/products/[id].astro
@@ -0,0 +1,55 @@
+---
+import Header from '../../components/Header.astro';
+import Container from '../../components/Container.astro';
+import AddToCart from '../../components/AddToCart.svelte';
+import { getProducts, getProduct } from '../../api';
+import '../../styles/common.css';
+
+export async function getStaticPaths() {
+	const products = await getProducts();
+	return products.map(product => {
+		return {
+			params: { id: product.id.toString() }
+		}
+	});
+}
+
+const id = Number(Astro.request.params.id);
+const product = await getProduct(id);
+---
+
+<html lang="en">
+<head>
+	<title>{product.name} | Online Store</title>
+	<style>
+		h2 {
+			text-align: center;
+			font-size: 3.5rem;
+		}
+
+		figure {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+		}
+
+		img {
+			width: 400px;
+		}
+	</style>
+</head>
+<body>
+	<Header />
+	
+	<Container tag="article">
+		<h2>{product.name}</h2>
+		<figure>
+				<img src={product.image} />
+			<figcaption>
+				<AddToCart id={id} client:idle />
+				<p>Description here...</p>
+			</figcaption>
+		</figure>
+
+	</Container>
+</body>
+</html>