Skip to content

RFC: Render context/data. #20

@eirikurn

Description

@eirikurn

Currently, it's hard to explain what the Session object is for. It may be handling too many use cases.

I think session is a good name considering its lifecycle, i.e. it's a place to store stuff for the duration of a browser session (or server request), and it includes methods related to that (hooks, refresh).

But there is one use case in particular which doesn't quite fit. Passing data between middlewares during a single page render.

The most obvious example is using a middleware for the Layout component and another for the actual page. How can a particular page modify (pass a prop to) the layout component?

Another open question is where document properties live, e.g. page title, meta tags. Is that a property of the session, or a specific render.

My proposal is to pass a new page object as the second argument to each middleware's inner function.

// Not using page data.
const basic = session => next => <Element />

// Using page data.
const layout = session => async (next, page) => {
  const element = await next()
  const theme = page.theme || 'red'

  return <Layout theme={theme}>{element}</Layout>
}

// Adding page data
const page = session => (next, page) => {
  page.theme = 'blue'
  return <Page />
}

If we decide to put document properties there, it can be sent to render hooks as well:

const helmet = session => {
  session.on('server', (render, page) => {
    render()
    page.headProps.helmet = Helmet.rewind()
  }
}

I would like to return this object from renderServer so it can be used to render the Document, but I'm not sure how.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions