46

A Server-Side Rendering Engine for Professionals

 5 years ago
source link: https://www.tuicool.com/articles/hit/qYFVRzV
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

mQjuQfM.png!web

Introduction

  • Library, not Framework - Gourmet SSR is designed to be used as a view library in your existing project. We worked very hard to make Gourmet SSR unobtrusive.
  • Production First - Small footprint at runtime, chunked transfer, long-term caching, HTTP/2 optimized bundling and much more. Production is always the number one priority of Gourmet SSR.
  • Human Friendly - Developers are humans too. When we a new feature, the first thing we consider is how to make it easy to understand and use - just like we do for the consumer products.
  • Flexible - Gourmet SSR can be deployed as an in-process VM sandbox, a separate process, a remote HTTP cluster or an AWS Lambda function. Your server can be Django or Rails. The view layer is not limited to React.

Quick Overview

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>

Documentation

Learn more about using Gourmet SSR on the official website .

License

Gourmet SSR is open source software licensed as MIT .


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK