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 }
}

Example

yarn example:server

yarn example:wds