Add an example using ESI cache (with React ESI)

examples/ssr-caching/README.md

@@ -45,3 +45,5 @@ React Server Side rendering is very costly and takes a lot of server's CPU power
 That's what this example demonstrate.
 
 This app uses Next's [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) mode. It also uses [express](https://expressjs.com/) to handle routing and page serving.
+
+Alternatively, see [the example using React ESI](../with-react-esi/).

examples/with-react-esi/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "next/babel"
+    ]
+}

examples/with-react-esi/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+.next

examples/with-react-esi/Dockerfile

@@ -0,0 +1,13 @@
+FROM cooptilleuls/varnish:6.0-alpine AS varnish
+
+COPY docker/varnish/default.vcl /usr/local/etc/varnish/default.vcl
+
+FROM node:11.5-alpine as node
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+COPY . ./
+RUN yarn install
+RUN yarn build
+CMD yarn start

examples/with-react-esi/README.md

@@ -0,0 +1,42 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-esi)
+# React ESI example
+
+# Example app with prefetching pages
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+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:
+
+```bash
+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](docker/varnish/default.vcl) and Node is provided.
+Run the following command to start the project:
+
+```bash
+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](https://github.com/dunglas/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.

examples/with-react-esi/docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.4'
+
+services:
+  node:
+    build:
+      context: .
+      target: node
+    ports:
+      - "8080:80" # To debug
+
+  varnish:
+    build:
+      context: .
+      target: varnish
+    depends_on:
+      - node
+    volumes:
+      - ./docker/varnish/:/usr/local/etc/varnish:ro
+    tmpfs:
+      - /usr/local/var/varnish:exec
+    ports:
+      - "80:80"

examples/with-react-esi/docker/varnish/default.vcl

@@ -0,0 +1,24 @@
+vcl 4.0;
+
+import std;
+
+backend node {
+  .host = "node";
+  .port = "80";
+}
+
+sub vcl_backend_response {
+  # Enable ESI support
+  if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
+    unset beresp.http.Surrogate-Control;
+    set beresp.do_esi = true;
+  }
+}
+
+sub vcl_recv {
+  # Remove cookies to prevent a cache miss, you maybe don't want to do this!
+  unset req.http.cookie;
+
+  # Announce ESI support to Node (optional)
+  set req.http.Surrogate-Capability = "key=ESI/1.0";
+}

examples/with-react-esi/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-react-esi",
+  "author": "Kévin Dunglas <dunglas@gmail.com>",
+  "main": "dist/server.js",
+  "dependencies": {
+    "express": "^4.16.4",
+    "next": "^7.0.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-esi": "^0.1"
+  },
+  "scripts": {
+    "build": "babel src -d dist && next build dist",
+    "start": "NODE_ENV=production node dist/server.js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/node": "^7.2.2"
+  }
+}

examples/with-react-esi/src/components/BreakingNews.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+// functional component
+const BreakingNews = props => (
+  <section>
+    <h1>Breaking News</h1>
+    {props.news &&
+      props.news.map((breaking, i) => (
+        <article key={i}>
+          <h1>{breaking.title}</h1>
+          <p>{breaking.body}</p>
+        </article>
+      ))}
+    We are <b>{process.browser ? 'client-side' : 'server-side'}</b> (now, check
+    the source of this page)
+    <div>
+      <small>generated at {new Date().toISOString()}</small>
+    </div>
+  </section>
+)
+
+BreakingNews.getInitialProps = async ({ props, req, res }) => {
+  if (res) {
+    // server-side, we always want to serve fresh data for this block!
+    res.set('Cache-Control', 's-maxage=0, maxage=0')
+  }
+
+  return new Promise(resolve =>
+    // Simulate a delay (slow network, huge computation...)
+    setTimeout(
+      () =>
+        resolve({
+          ...props, // Props from the main page, passed through the internal fragment URL server-side
+          news: [
+            {
+              title: 'Aenean eleifend ex',
+              body: 'Proin commodo ullamcorper cursus.'
+            },
+            {
+              title: 'Morbi rutrum tortor nec eros vestibulum',
+              body: 'Maecenas gravida eu sapien quis sollicitudin.'
+            }
+          ]
+        }),
+      5000
+    )
+  )
+}
+
+export default BreakingNews

examples/with-react-esi/src/components/TopArticles.js

@@ -0,0 +1,55 @@
+import React from 'react'
+
+/**
+ * Return the top articles of the month. Can be cached 1 hour.
+ */
+export default class TopArticles extends React.Component {
+  static async getInitialProps ({ props, req, res }) {
+    if (res) {
+      // server side, cache this fragment for 1 hour
+      res.set('Cache-Control', 'public, s-maxage=3600')
+    }
+
+    // Fetch the articles from a remote API, it may take some time...
+    return new Promise(resolve => {
+      // Simulate a delay (slow network, huge computation...)
+      setTimeout(
+        () =>
+          resolve({
+            ...props, // Props from the main page, passed through the internal fragment URL server-side
+            articles: [
+              {
+                title: 'Lorem ipsum dolor',
+                body: 'Phasellus aliquet pellentesque dolor nec volutpat.'
+              },
+              {
+                title: 'Donec ut porttitor nisl',
+                body: 'Praesent vel odio vel dui pellentesque sodales.'
+              }
+            ]
+          }),
+        2000
+      )
+    })
+  }
+
+  render () {
+    return (
+      <section>
+        <h1>Top articles</h1>
+        {this.props.articles &&
+          this.props.articles.map((article, i) => (
+            <article key={i}>
+              <h1>{article.title}</h1>
+              <p>{article.body}</p>
+            </article>
+          ))}
+        This block has been generated the first time as an include of{' '}
+        <b>{this.props.from}</b>.
+        <div>
+          <small>generated at {new Date().toISOString()}</small>
+        </div>
+      </section>
+    )
+  }
+}

examples/with-react-esi/src/components/Weather.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+/**
+ * Return the weather. This component is not loaded on the homepage, to test that getInitialProps works client-side too.
+ */
+export default class TopArticles extends React.Component {
+  static async getInitialProps ({ props, req, res }) {
+    // Fetch the weather from a remote API, it may take some time...
+    return new Promise(resolve => {
+      console.log(process.browser ? 'client-side' : 'server-side')
+      // Simulate a delay (slow network, huge computation...)
+      setTimeout(
+        () =>
+          resolve({
+            ...props, // Props from the main page, passed through the internal fragment URL server-side
+            weather: 'sunny ☀️'
+          }),
+        2000
+      )
+    })
+  }
+
+  render () {
+    console.log(process.browser ? 'client-side' : 'server-side')
+
+    return (
+      <section>
+        <h1>Weather</h1>
+        {this.props.weather}
+
+        <div>
+          <small>generated at {new Date().toISOString()}</small>
+        </div>
+      </section>
+    )
+  }
+}

examples/with-react-esi/src/pages/article.js

@@ -0,0 +1,33 @@
+import withESI from 'react-esi'
+import React from 'react'
+import Link from 'next/link'
+import BreakingNews from '../components/BreakingNews'
+import TopArticles from '../components/TopArticles'
+import Weather from '../components/Weather'
+
+const BreakingNewsESI = withESI(BreakingNews, 'BreakingNews')
+const TopArticlesESI = withESI(TopArticles, 'TopArticles')
+const WeatherESI = withESI(Weather, 'Weather')
+
+const Article = () => (
+  <div>
+    <h1>An article</h1>
+    <main>This a specific article of the website!</main>
+
+    {/* TODO: introduce a layout */}
+    <TopArticlesESI from='the article page' />
+    <BreakingNewsESI />
+    <WeatherESI />
+
+    <Link href='/'>
+      <a>Go back to the homepage</a>
+    </Link>
+  </div>
+)
+
+Article.getInitialProps = async function ({ res }) {
+  if (res) res.set('Cache-Control', 's-maxage: 10, maxage: 0')
+  return {}
+}
+
+export default Article

examples/with-react-esi/src/pages/index.js

@@ -0,0 +1,31 @@
+import withESI from 'react-esi'
+import React from 'react'
+import Link from 'next/link'
+import BreakingNews from '../components/BreakingNews'
+import TopArticles from '../components/TopArticles'
+
+const BreakingNewsESI = withESI(BreakingNews, 'BreakingNews')
+const TopArticlesESI = withESI(TopArticles, 'TopArticles')
+
+const Index = () => (
+  <div>
+    <h1>React ESI demo app</h1>
+    <main>
+      <p>Welcome to my news website!</p>
+      <Link href='/article'>
+        <a>Go to an article</a>
+      </Link>
+    </main>
+
+    {/* TODO: introduce a layout */}
+    <TopArticlesESI from='the main page' />
+    <BreakingNewsESI />
+  </div>
+)
+
+Index.getInitialProps = async function ({ res }) {
+  if (res) res.set('Cache-Control', 's-maxage: 10')
+  return {}
+}
+
+export default Index

examples/with-react-esi/src/server.js

@@ -0,0 +1,32 @@
+import express from 'express'
+import next from 'next'
+import { path, serveFragment } from 'react-esi/lib/server'
+
+const dev = process.env.NODE_ENV !== 'production'
+const port = parseInt(process.env.PORT, 10) || (dev ? 3000 : 80)
+const app = next({ dev, dir: dev ? 'src/' : 'dist/' })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  const server = express()
+
+  server.use((req, res, next) => {
+    // Send the Surrogate-Control header to announce ESI support to proxies (optional with Varnish)
+    res.set('Surrogate-Control', 'content="ESI/1.0"')
+    next()
+  })
+
+  server.get(path, (req, res) =>
+    serveFragment(
+      req,
+      res,
+      fragmentID => require(`./components/${fragmentID}`).default
+    )
+  )
+  server.get('*', handle)
+
+  server.listen(port, err => {
+    if (err) throw err
+    console.log(`> Ready on http://localhost:${port}`)
+  })
+})