This template contains our essential recommendations for a modern Vue Single Page App optimal for both productivity and performance.
Next.js | The premier React Jamstack framework, commercially backed by Vercel |
Tailwindcss | Productive responsive-first utility-based css framework with growing rich component ecosystem |
TypeScript | Advanced type-safety, static analysis and richer IDE tooling |
Iconify | Unified registry to access 100k+ high quality SVG icons from 100+ icon sets |
Markdown | Native mdx Markdown integration with advanced featureset supporting embedded HTML & React JSX Components |
SWR | stale-while-revalidate library utilizing React's hooks API enabling optimal end-user UX for API integrations |
App Features
Stale While Revalidate
stale-while-revalidate is a popular UI pattern helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
This template includes a swrClient
that provides a typed wrapper around Vercel's SWR
library for making typed API Requests with ServiceStack's typed
JsonServiceClient.
import { swrClient } from "../lib/gateway"
import { Hello } from "../lib/dtos"
const HelloApi = ({ name }) => {
const {data, error} = swrClient.get(() =>
new Hello({ name }))
if (error) return <div>{error.message}</div>
return <div>{data?data.result:'loading...'}</div>
}
This reactively sets up the UI to handle multiple states:
loading
- displays loading... message whilst API request is in transitdata
- when completed, populated with aHelloResponse
and displayederror
- when failed, populated withResponseStatus
and displayed
The primary UX benefits are realized when re-making an existing request in which a locally-cached stale version is immediately returned and displayed whilst a new API Request is made behind the scenes, which updates the UI when completed.
Ultimately this provides the optimal end-user UX with the UI being immediately updated with stale results initially, before being re-updated with the latest UI when the new API Request is completed.