Branch: master
Find file History
#6151 Compare This branch is 7 commits behind canary.
dunglas and timneutkens Add an example using ESI cache (with React ESI) (#6225)
[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.

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.
Latest commit e0896e5 Feb 22, 2019

Deploy to now

Example app where it caches SSR'ed pages in the memory

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example ssr-caching ssr-caching-app
# or
yarn create next-app --example ssr-caching ssr-caching-app

Download manually

Download the example:

curl | tar -xz --strip=2 next.js-canary/examples/ssr-caching
cd ssr-caching

Install it and run:

npm install
npm run dev
# or
yarn dev

Deploy it to the cloud with now (download)


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 already rendered pages. That's what this example demonstrate.

This app uses Next's custom server and routing mode. It also uses express to handle routing and page serving.

Alternatively, see the example using React ESI.