Welcome to turbo hybrid Astro on Vercel!
This template project showcases the power of Astro 2.0's hybrid rendering:
-
hybridoutput in terms of per page static pre-rendering (SSG) or dynamic server-side-rendering (SSR). turbo(Turbopack) is used to manage the monorepo-
turbo cacheis used for local and remote caching (even in CI!) -
Vercel Deployis pre-configured with serverless functions for SSR; clone repo and deploy in 1 min (literally!) -
@vercel/analyticshas been integrated correctly for development and production -
Preact 10is pre-configured forpreact-components, read the docs to simply integrate any other supported framework. -
astrojs-serivce-workerto generate aservice-worker.jsusing WorkBox is integrated for caching static resources and offline reading support. -
eslintis used for clean code (even for .astro files!) -
prettieris used to format the code (even for .astro files!) -
astro-sitemapis used for custom sitemap generation -
@astrojs/imagefor image optimization usingsharp -
astro-robots-txtfor customrobots.txtgeneration -
astro-webmanifestfor custom and seamlessmanifest.webmanifestPWA support; generates all necessary icons on-the-fly usingsharp -
vitestunit testing support viayarn test -
c8unit test and code coverage analysis viayarn coverage -
playwrightmodern front-end testing viayarn playwright -
packages/layouts,packages/astro-componentsandpackages/preact-componentsallow for re-using and sharing code. Components can be imported like:@packages/**/*.* -
tsconfigis 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: