chyk

Chyk is a microframework to build universal SPAs with React.

Features

preload route data
code splitting via async components
passing SSR data to the browser for the immediate hydration
aborting data load using AbortController if switched to another route
404 and other status pages

Bonus

Written in TypeScript
Zero dependencies
Only peer dependencies: react, react-dom, react-router, react-router-dom, react-router-config, history
2.4kB gzipped

Install

yarn add chyk

Usage

Example

Server

createServer(async (request, response) => {
  try {
    const pathname = request.url || ""
    const chyk = new Chyk({ routes, deps: { apiSdk: new DbClient() } })
    await chyk.loadData(pathname)
    const html = renderToString(createElement(ChykStaticComponent, { chyk }))
    const { data, statusCode } = chyk.locationState
    response.statusCode = statusCode
    response.end(template({ html, data, statusCode }))
  } catch (e) {
    logger(e)
    response.end(e)
  }
})

Browser

new Chyk({
  routes,
  deps: { apiSdk: new DbClient() },
  data: window.ssr_data,
  statusCode: window.ssr_statusCode,
  el: document.getElementById("app"),
})

Routes

export const routes = [
  {
    component: Layout,
    dataKey: "layout",
    loadData: layoutLoader,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home,
        dataKey: "home",
        loadData: homeLoader,
      },
      {
        path: "/:slug",
        component: Article,
        exact: true,
        dataKey: "article",
        loadData: articleLoader,
      },
      {
        component: NotFound,
        loadData: async ({ chyk }) => chyk.set404(),
      },
    ],
  },
]

Loaders

const layoutLoader = async ({ abortController }, { apiClient }) => {
  const [year, articles] = await Promise.all([
    apiClient.getYear(abortController.signal),
    apiClient.getArticles(abortController.signal),
  ])
  return { year, articles }
}