e0896e5dbe
[React ESI](https://github.com/dunglas/react-esi) is a brand new cache library for vanilla React and Next.js applications, that can make highly dynamic applications as fast as static sites by leveraging the open Edge Server Include specification. https://github.com/dunglas/react-esi Because this spec is widespread, React ESI natively supports most of the well-known cloud cache providers including Cloudflare Workers, Akamai and Fastly. Of course, React ESI also supports the open source Varnish cache server that you can use in your own infrastructure for free (configuration provided). This PR shows how to integrate React ESI with Next.js. |
||
|---|---|---|
| .. | ||
| docker/varnish | ||
| src | ||
| .babelrc | ||
| .gitignore | ||
| docker-compose.yml | ||
| Dockerfile | ||
| package.json | ||
| README.md | ||
React ESI example
Example app with prefetching pages
How to use
Using create-next-app
Execute create-next-app with Yarn or npx to bootstrap the example:
npx create-next-app --example with-react-esi with-react-esi-app
# or
yarn create next-app --example with-react-esi with-react-esi-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-esi
cd with-react-esi
Starting the Varnish cache server
A Docker setup containing Varnish with the appropriate config and Node is provided. Run the following command to start the project:
docker-compose up
The idea behind the example
React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache fragments of rendered pages, each fragment corresponding to a component subtree. This example shows how to leverage React ESI and the Varnish HTTP accelerator to improve dramatically the performance of an app.
The example (and the underlying lib) can work with any ESI implementation, including Akamai, Fastly and Cloudflare Workers.