Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SSR runtime #2

Closed
aleclarson opened this issue Oct 3, 2021 · 3 comments
Closed

SSR runtime #2

aleclarson opened this issue Oct 3, 2021 · 3 comments
Labels
roadmap runtime On-demand page generation
Milestone
v0.5

Comments

@aleclarson
Copy link
Contributor

aleclarson commented Oct 3, 2021 •
edited
Loading

Allow saus build to emit a SSR module that renders on-demand routes.

# saus.yaml
runtime: ../server/saus.ts

The configuration above tells Saus where to emit its TypeScript runtime, which can be used in your Node server code.

// ../server/index.ts
import { renderMiddleware } from './saus'
import express from 'express'

const app = express()
app.use(renderMiddleware)

Unfortunately, Vite SSR is not in a good position to provide an SSR runtime without extra baggage, like a websocket server and file watcher. But it shouldn't be terribly difficult to implement this when the time comes.
@aleclarson
Copy link
Contributor Author

state.json

Every route has a generated state.json module. For example, you can fetch /foo/state.json to get the client state for the /foo page. This client state contains the routeModuleId and routeParams by default, in addition to any state set by the renderer that generated the page's HTML.

Similar to #1, there will be fetchClientState and applyClientState helpers exported by saus/client, which can be used in your client-side router.

head.json

Similarly, there exists a head.json module for every page. This contains <head> tags, which can be applied with the applyHeadTags helper from saus/client once #1 is implemented.

partial.html + hydrate.js

Every route has a generated partial.html file, which can be loaded alongside the route module for pre-rendered pages with SPA-style navigation. There will be a fetchFragment helper exported by saus/client. The hydration client is loaded in parallel from the hydrate.js file. So the /foo page will have /foo/partial.html and /foo/hydrate.js URLs.

@aleclarson aleclarson mentioned this issue Oct 3, 2021
Closed
@aleclarson aleclarson added the runtime On-demand page generation label Oct 3, 2021
@aleclarson aleclarson mentioned this issue Oct 24, 2021
Closed
@aleclarson aleclarson mentioned this issue Nov 16, 2021
Closed
@aleclarson
Copy link
Contributor Author

I'm hesitant about the partial.html + hydrate.js idea, as it's probably too much work for just a little performance boost, though I haven't actually put that theory to the test.

@aleclarson aleclarson added the in progress Actively being worked on label Jan 2, 2022
@aleclarson aleclarson added this to the v0.5 milestone Jan 3, 2022
@aleclarson
Copy link
Contributor Author

The SSR runtime is fully implemented in the next branch, albeit not exactly as this issue described.

Documentation will be added before v0.5 is officially released.

@aleclarson aleclarson removed the in progress Actively being worked on label Mar 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
roadmap runtime On-demand page generation
Projects
None yet
Milestone
v0.5
Development

No branches or pull requests
1 participant
@aleclarson