tag server-side,
52 | * and rendering the wrapped component client-side.
53 | */
54 | export default function withESI(
55 | WrappedComponent: ComponentType
,
56 | fragmentID: string
57 | ): ComponentClass {
58 | return class WithESI extends React.Component {
59 | public static WrappedComponent = WrappedComponent;
60 | public static displayName = `WithESI(${
61 | WrappedComponent.displayName || WrappedComponent.name || "Component"
62 | })`;
63 | public static propTypes = {
64 | esi: PropTypes.shape({
65 | attrs: PropTypes.objectOf(PropTypes.string), // extra attributes to add to the tag
66 | }),
67 | } as unknown as WeakValidationMap;
68 | public state: State = {
69 | childProps: {},
70 | initialChildPropsLoaded: true,
71 | };
72 | private esi = {};
73 |
74 | constructor(props: P & IWithESIProps) {
75 | super(props);
76 | const { esi, ...childProps } = props;
77 | this.esi = esi || {};
78 | this.state.childProps = childProps;
79 |
80 | if (isServer()) {
81 | return;
82 | }
83 |
84 | if (window.__REACT_ESI__?.[fragmentID]) {
85 | // Inject server-side computed initial props
86 | this.state.childProps = {
87 | ...window.__REACT_ESI__[fragmentID],
88 | ...this.state.childProps,
89 | };
90 | return;
91 | }
92 |
93 | // TODO: add support for getServerSideProps
94 | if ("getInitialProps" in WrappedComponent) {
95 | // No server-side rendering for this component, getInitialProps will be called during componentDidMount
96 | this.state.initialChildPropsLoaded = false;
97 | }
98 | }
99 |
100 | public componentDidMount() {
101 | if (this.state.initialChildPropsLoaded) {
102 | return;
103 | }
104 |
105 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
106 | (WrappedComponent as any)
107 | .getInitialProps({ props: this.state.childProps })
108 | .then((initialProps: object) =>
109 | this.setState({
110 | childProps: initialProps,
111 | initialChildPropsLoaded: true,
112 | })
113 | );
114 | }
115 |
116 | public render() {
117 | if (isClient()) {
118 | return (
119 |
122 | );
123 | }
124 |
125 | const server = safeRequireServer();
126 |
127 | return server.createIncludeElement(fragmentID, this.props, this.esi);
128 | }
129 | };
130 | }
131 |
--------------------------------------------------------------------------------
/lib/src/__tests__/server/server.test.tsx:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import Stream from "stream";
3 | import request from "supertest";
4 |
5 | process.env.REACT_ESI_SECRET = "dummy";
6 | process.env.REACT_ESI_PATH = "/_custom";
7 |
8 | import { createIncludeElement, path, serveFragment } from "../../server";
9 |
10 | test("path", () => {
11 | expect(path).toBe("/_custom");
12 | });
13 |
14 | test("createIncludeElement", () => {
15 | const elem = createIncludeElement(
16 | "fragmentID",
17 | { name: "Kévin" },
18 | { attrs: { alt: `"'<&Alt>'"` } }
19 | );
20 | expect(elem).toMatchSnapshot();
21 | });
22 |
23 | const fragmentURL =
24 | "/_custom?fragment=fragmentID&props=%7B%22name%22%3A%22K%C3%A9vin%22%7D&sign=f7ddf06659aadbcba0cdad4c927ac5bf38167d714e1a15cad13115e7e9d21a9d";
25 | test("serveFragment", async () => {
26 | const app = express();
27 | const resolver = (
28 | fragmentID: string,
29 | props: object,
30 | req: express.Request,
31 | res: express.Response
32 | ) => {
33 | expect(fragmentID).toBe("fragmentID");
34 | expect(props).toMatchObject({ name: "Kévin" });
35 | expect(req.header("user-agent")).toBe("test");
36 | expect(res).toBeDefined();
37 |
38 | return (p: { name: string }) => Hello {p.name}
;
39 | };
40 |
41 | app.get(path, (req: express.Request, res: express.Response) =>
42 | serveFragment(req, res, resolver)
43 | );
44 |
45 | const response = await request(app)
46 | .get(fragmentURL)
47 | .set("user-agent", "test")
48 | .expect(200);
49 | expect(response.text).toMatchSnapshot();
50 | });
51 |
52 | test("serveFragment with pipeStream option", async () => {
53 | const app = express();
54 | const resolver = (
55 | fragmentID: string,
56 | props: object,
57 | req: express.Request,
58 | res: express.Response
59 | ) => {
60 | expect(fragmentID).toBe("fragmentID");
61 | expect(props).toMatchObject({ name: "Kévin" });
62 | expect(req.header("user-agent")).toBe("test");
63 | expect(res).toBeDefined();
64 |
65 | return (p: { name: string }) => Hello {p.name}
;
66 | };
67 |
68 | app.get(path, (req: express.Request, res: express.Response) =>
69 | serveFragment(req, res, resolver, {
70 | pipeStream: (input) => {
71 | const transformer = new Stream.Transform({
72 | transform: (chunk, encoding, callback) => {
73 | callback();
74 | },
75 | flush: (callback) => {
76 | callback(null, "hi there
");
77 | },
78 | });
79 | input.pipe(transformer);
80 | return transformer;
81 | },
82 | })
83 | );
84 |
85 | const response = await request(app)
86 | .get(fragmentURL)
87 | .set("user-agent", "test")
88 | .expect(200);
89 | const addedScript =
90 | '';
91 | expect(response.text).toEqual(`${addedScript}hi there
`);
92 | });
93 |
94 | test("initial props", async () => {
95 | const app = express();
96 | const resolver = (
97 | fragmentID: string,
98 | props: object,
99 | req: express.Request,
100 | res: express.Response
101 | ) => {
102 | expect(fragmentID).toBe("fragmentID");
103 | expect(props).toMatchObject({ name: "Kévin" });
104 | expect(req.header("user-agent")).toBe("test");
105 | expect(res).toBeDefined();
106 |
107 | interface IPropsType {
108 | name: string;
109 | }
110 | const Component = (p: IPropsType) => Hello {p.name}
;
111 | Component.getInitialProps = async () => {
112 | return { name: "Anne" };
113 | };
114 |
115 | return Component;
116 | };
117 |
118 | app.get(path, (req: express.Request, res: express.Response) =>
119 | serveFragment(req, res, resolver)
120 | );
121 |
122 | const response = await request(app)
123 | .get(fragmentURL)
124 | .set("user-agent", "test")
125 | .expect(200);
126 | expect(response.text).toMatchSnapshot();
127 | });
128 |
129 | test("invalid signature", async () => {
130 | const app = express();
131 | const resolver = () => () => ;
132 |
133 | app.get(path, (req: express.Request, res: express.Response) =>
134 | serveFragment(req, res, resolver)
135 | );
136 |
137 | const response = await request(app)
138 | .get(
139 | "/_custom?fragment=fragmentID&props=%7B%22foo%22%3A%22bar%22%7D&sign=invalid"
140 | )
141 | .expect(400);
142 | expect(response.text).toMatchSnapshot();
143 | });
144 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React ESI: Blazing-fast Server-Side Rendering for React and Next.js
2 |
3 | 
4 | [](https://coveralls.io/github/dunglas/react-esi?branch=master)
5 | [](https://badge.fury.io/js/react-esi)
6 | [](https://opensource.org/licenses/mit-license.php)
7 |
8 | React ESI is a super powerful cache library for vanilla [React](https://reactjs.org/) and [Next.js](https://nextjs.org/) applications, that can make highly dynamic applications as fast as static sites.
9 |
10 | It provides a straightforward way to boost your application's performance by storing **fragments** of server-side rendered pages in **edge cache servers**.
11 | It means that after the first rendering, fragments of your pages will be served in a few milliseconds by servers close to your end users!
12 | It's a very efficient way to improve the performance and the SEO of your websites and to dramatically reduce both your hosting costs and the energy consumption of these applications. Help the planet, use React ESI!
13 |
14 | Because it is built on top of the [Edge Side Includes (ESI)](https://www.w3.org/TR/esi-lang) W3C specification,
15 | React ESI natively supports most of the well-known cloud cache providers including [Cloudflare Workers](https://blog.cloudflare.com/edge-side-includes-with-cloudflare-workers/), [Akamai](https://www.akamai.com/us/en/support/esi.jsp) and [Fastly](https://docs.fastly.com/guides/performance-tuning/using-edge-side-includes).
16 | Of course, React ESI also supports the open source [Varnish cache server](https://varnish-cache.org/intro/index.html#intro) that you can use in your own infrastructure for free ([configuration example](https://github.com/zeit/next.js/blob/canary/examples/with-react-esi/docker/varnish/default.vcl)).
17 |
18 | Also, React ESI allows the specification of different Time To Live (TTL) per React component and generates the corresponding HTML asynchronously using a secure (signed) URL.
19 | The cache server fetches and stores in the cache all the needed fragments (the HTML corresponding to every React component), builds the final page and sends it to the browser.
20 | React ESI also allows components to (re-)render client-side without any specific configuration.
21 |
22 | 
23 |
24 | > Schema from [The Varnish Book](https://info.varnish-software.com/resources/varnish-6-by-example-book)
25 |
26 | **[Discover React ESI in depth with this presentation](https://dunglas.fr/2019/04/react-esi-blazing-fast-ssr/)**
27 |
28 | ## Examples
29 |
30 | - [Next.js, Express, and Varnish](https://github.com/dunglas/react-esi/tree/main/examples/next)
31 | - [React, Express, and Varnish](https://github.com/dunglas/react-esi/tree/main/examples/express)
32 |
33 | ## Install
34 |
35 | Using NPM:
36 |
37 | $ npm install react-esi
38 |
39 | Or using Yarn:
40 |
41 | $ yarn add react-esi
42 |
43 | Or using PNPM:
44 |
45 | $ pnpm add react-esi
46 |
47 | ## Usage
48 |
49 | React ESI provides a convenient [Higher Order Component](https://reactjs.org/docs/higher-order-components.html) that will:
50 |
51 | - replace the wrapped component with an ESI tag server-side (don't worry React ESI also provides the tooling to generate the corresponding fragment);
52 | - render the wrapped component client-side, and feed it with the server-side computed props (if any).
53 |
54 | React ESI automatically calls a `static async` method named `getInitialProps()` to populate the initial props of the component. Server-side, this method can access to the HTTP request and response, for instance, to set the `Cache-Control` header, or some [cache tags](https://api-platform.com/docs/core/performance/#enabling-the-built-in-http-cache-invalidation-system).
55 |
56 | These props returned by `getInitialProps()` will also be injected in the server-side generated HTML (in a `