MyApp logo

This template contains our essential recommendations for a modern Vue Single Page App optimal for both productivity and performance.

Next.jsThe premier React Jamstack framework, commercially backed by Vercel
TailwindcssProductive responsive-first utility-based css framework with growing rich component ecosystem
TypeScriptAdvanced type-safety, static analysis and richer IDE tooling
IconifyUnified registry to access 100k+ high quality SVG icons from 100+ icon sets
MarkdownNative mdx Markdown integration with advanced featureset supporting embedded HTML & React JSX Components
SWRstale-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 transit
  • data - when completed, populated with a HelloResponse and displayed
  • error - when failed, populated with ResponseStatus 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.