A React Server-Side Rendering Engine for Production
You write the user interface without complicated bootstrapping or boilerplate. It is just a plain tree of React components.
// hello.js
import React from "react";
export default function Hello({greeting}) {
return <div>{greeting}</div>;
}
Configuration is designed to be minimal, but not to the level of "magic". Here, we specify the above React component as a root component of the
main
page.
// gourmet_config.js
module.exports = {
pages: {
main: "./hello.js"
}
};
Gourmet SSR is just a view library in your server. This is how you render and serve the
main
page.
// server.js
const express = require("express");
const gourmet = require("@gourmet/client-lib");
const app = express();
app.use(gourmet.middleware());
app.get("/", (req, res) => {
res.serve("main", {greeting: "Hello, world!"});
});
app.listen(3000, () => {
console.log("Server is listening on port 3000");
});
The content is rendered on the server-side and rehydrated on the client-side. Required assets are also linked statically.
The HTML output has all the elements it needs to render the initial user interface - which is great for SEO and user experience.
$ curl http://localhost:3000
<!doctype html>
<html lang="en">
<head>
<script defer src="/s/vendors~main.js"></script>
<script defer src="/s/main.js"></script>
</head>
<body>
<div id="__gourmet_content__"><div id="__gourmet_react__"><div>Hello, world!</div></div></div>
<script>window.__gourmet_data__={"renderedLoadables":[],"clientProps":{"greeting":"Hello, world!"},"reactClientRender":"hydrate"};</script>
</body>
</html>
Learn more about using Gourmet SSR on the official website.
Gourmet SSR is open source software licensed as MIT.