jamesknelson
commented
5 years ago I'm actually building a Navi app with SSR right now, which I'll probably be open sourcing in a month or two. I'm using universal-react-scripts for the build system, but the process should be pretty similar regardless. Here's how it works.
I have an index.node.js file which is compiled along with the rest of the source into a commonjs module that can be require()d in the server. This exports the app's routes (which are also imported in the web bundle and used the usual way.
Then, in the server, you create a navigation object using createMemoryNavigation(), wait for it to be ready, and then synchronously render the app using it. This is basically how navi-scripts works internally, except that with SSR you don't need a list of all of your app's URLs, so the whole process is much simpler.
Instead of using express, my app works with plain (request, response) => { /*...*/ } functions (which are rendered by lambda functions), but the idea is basically the same with Express. Here's the gist:
import fs from 'fs'
import { createMemoryNavigation, NotFoundError } from 'navi'
import { renderToString } from 'react-dom/server'
import { NaviProvider, View } from 'react-navi'
import HelmetProvider from 'react-navi-helmet-async'
import routes from './routes'
const renderer = async (request, response) => {
let backend, navigation, sheet
// Read in a HTML template, into which we'll substitute React's rendered
// content, styles, and Navi's route state.
let template = fs.readFileSync(process.env.HTML_TEMPLATE_PATH, 'utf8')
let [header, footer] = template.split('<div id="root">%RENDERED_CONTENT%')
try {
// Create a `backend` object through which routes and the React app can
// access the API.
backend = new Backend({ ssr: true })
navigation = createMemoryNavigation({
context: {
backend,
// We'll handle authentication in the client so that all rendered
// pages are identical regardless of who views them. This allows for
// anything we render to be cached, at least for a short while.
currentUser: undefined,
// Some thing don't need rendering when doing SSR.
ssr: true,
},
request,
routes,
})
sheet = new ServerStyleSheet()
// Wait for Navi to get the page's data and route, so that everything can
// be synchronously rendered with `renderToString`.
let route = await navigation.getRoute()
let body = renderToString(
sheet.collectStyles(
<HelmetProvider>
<BackendContext.Provider value={backend}>
{/* Our provider makes stripe available within hooks, while the
stripe library's provider is required for its card form */}
<StripeContext.Provider value={null}>
<StripeProvider stripe={null}>
<ThemeProvider theme={theme}>
<NaviProvider navigation={navigation}>
{/*
Putting the global styles any deeper in the tree causes
them to re-render on each navigation, even on production.
Unfortunately this means they have to be repeated across
the server and the client code.
*/}
<GlobalResetStyle />
<GlobalIconFontStyle />
<View />
</NaviProvider>
</ThemeProvider>
</StripeProvider>
</StripeContext.Provider>
</BackendContext.Provider>
</HelmetProvider>,
),
)
// Extract the navigation state into a script tag so that data doesn't need
// to be fetched twice across server and client.
let state = `<script>window.__NAVI_STATE__=${JSON.stringify(
navigation.extractState() || {},
).replace(/</g, '\\u003c')};</script>`
// Generate stylesheets containing the minimal CSS necessary to render the
// page. The rest of the CSS will be loaded at runtime.
let styleTags = sheet.getStyleTags()
// Generate the complete HTML
let html = header + state + styleTags + '<div id="root">' + body + footer
// The route status defaults to `200`, but can be set to other statuses by
// passing a `status` option to `route()`
response.status(route.status).send(html)
} catch (error) {
// Render an empty page, letting the client actually generate the 404
// message.
if (error instanceof NotFoundError) {
let html = header + '<div id="root">' + footer
response.status(404).send(html)
return
}
// Log an error, but only render it in development mode.
let html
console.error(error)
if (process.env.NODE_ENV === 'production') {
html = `<h1>500 Error - Something went wrong.</h1>`
} else {
html = `<h1>500 Error</h1><pre>${String(error)}</pre>` + header + footer
}
response.status(500).send(html)
} finally {
sheet.seal()
backend.dispose()
navigation.dispose()
}
}I mean to write some docs on this one day, but if you can get to it first I'm sure it'd help a lot of people out :-)
chinds185a
I am working on a universal react app, that uses express and react-router, the first request is rendered server side and then hydrates on the client side.
Is there an example of how navi could work with express for this application? I cant quite see how it works from looking at the static rendering docs. I am also not using CRA so wouldn't need navi-scripts?