Contexts

Frontend

Here is where "one framework for backend and frontend" stops being a slogan. The browser is just another context: the same kernel, the same routing, the same dependency injection, now producing views. This very site is built with it.

#Pages are handlers that render

The principle

A page is a request that resolves into a view. It has the same shape as any other handler: it can load data, respond to context, and return a result. The only difference is that the result is UI.

In Stone.js

In Stone.js a page is a class with @Page(path) and a render(). It may add handle() to load data and head() for the document head. Layouts wrap pages through @PageLayout and a StoneOutlet.

app/pages/TasksPage.tsxts

@Page('/tasks')
export class TasksPage {
  handle ({ tasks }) { return tasks.all() }        // load data (server or client)

  render ({ data }) {
    return <ul>{data.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
  }
}

#Collapse it into the browser

app/Application.tsdeclarativeimperative

import { StoneApp } from '@stone-js/core'
import { Routing } from '@stone-js/router'
import { UseReact } from '@stone-js/use-react'
import { Browser } from '@stone-js/browser-adapter'

@Browser()   // run in the browser
@UseReact()  // render with React
@Routing()
@StoneApp()
export class Application {}
import { defineStoneApp } from '@stone-js/core'
import { routerBlueprint } from '@stone-js/router'
import { useReactBlueprint } from '@stone-js/use-react'
import { browserAdapterBlueprint } from '@stone-js/browser-adapter'

export const App = defineStoneApp(
  { name: 'tasks-ui' },
  [routerBlueprint, useReactBlueprint, browserAdapterBlueprint]
)

#One code, three rendering strategies

CSR, SSR and SSG are not three ways to write your app. They are three ways to resolve the same pages. You choose in configuration; the pages do not change.

stone.config.mjsjs

export default defineConfig({
  rendering: 'ssg'   // or 'ssr', or 'csr'
})

#Which one when

CSR: a pure SPA, rendered in the browser. Add the Browser adapter.
SSR: rendered on a server per request, then hydrated. Stack a backend or edge adapter with the Browser adapter.
SSG: pre-rendered to static HTML at build, hydrated on load. This site.