Welcome to turbo hybrid Astro on Vercel!
This template project showcases the power of Astro 2.0's hybrid rendering:
-
hybrid
output in terms of per page static pre-rendering (SSG) or dynamic server-side-rendering (SSR). turbo
(Turbopack) is used to manage the monorepo-
turbo cache
is used for local and remote caching (even in CI!) -
Vercel Deploy
is pre-configured with serverless functions for SSR; clone repo and deploy in 1 min (literally!) -
@vercel/analytics
has been integrated correctly for development and production -
Preact 10
is pre-configured forpreact-components
, read the docs to simply integrate any other supported framework. -
astrojs-serivce-worker
to generate aservice-worker.js
using WorkBox is integrated for caching static resources and offline reading support. -
eslint
is used for clean code (even for .astro files!) -
prettier
is used to format the code (even for .astro files!) -
astro-sitemap
is used for custom sitemap generation -
@astrojs/image
for image optimization usingsharp
-
astro-robots-txt
for customrobots.txt
generation -
astro-webmanifest
for custom and seamlessmanifest.webmanifest
PWA support; generates all necessary icons on-the-fly usingsharp
-
vitest
unit testing support viayarn test
-
c8
unit test and code coverage analysis viayarn coverage
-
playwright
modern front-end testing viayarn playwright
-
packages/layouts
,packages/astro-components
andpackages/preact-components
allow for re-using and sharing code. Components can be imported like:@packages/**/*.*
-
tsconfig
is pre-configured and unified inpackages/tsconfig
Great developer experience (DX) and
extra performance is unlocked when you use this template as a foundation for your
Astro project.
Note: Just make sure to set the Vercel root directory to apps/server
.
See:
README.md
Please note: The build output is located at apps/server/.vercel/output/*
and is available after you called yarn build
for the first time.
Performance stats
Collected from this very deployment on Vercel:
Re-run this test to verify the results
This is the statically prerendered (SSG) index page in apps/server/src/pages/index.astro
.
Tech demo pages (SSR, SSG)
-
Homepage →
Homepage (SSG)
-
Welcome page →
Welcome page (getStaticPaths(); SSG)
-
CV page →
Resume page (getStaticPaths(); SSG)
-
Dynamic page →
SSR rendered page, uses query params (SSR)
-
Admin login API endpoint →
API endpoint, uses env vars, returns JSON. Play with the query params.
-
Static API endpoint →
Statically pre-generated data output. API endpoint, using getStaticPaths().
Testing @astrojs/image
: