HTTP Caching

• Why re-render content that does not change?
• Scaling and response time
• Less servers, more users

What is a reverse proxy again?

What about the real live?

Caching content that is not the same for all users

• Avoid Sessions, remove when no longer needed
• Build information in the frontend:
  "Cheating" with Javascript
• Cache despite cookies / cache per user
• User Context: Cache by relevant group

Avoid Sessions

Avoid Session

• Delete cookie as soon as no longer needed
• Watch out for autostarted PHP sessions

{% if app.request.hasPreviousSession %}
    {% for message in app.flashes('notice') %}
        <div class="flash-notice">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}
            

Cleanup Cookies: Remove all but session cookie

sub vcl_recv {
    # using a capturing sub pattern, extract the continuous string of
    # alphanumerics that immediately follows "PHPSESSID="
    set req.http.X-Varnish-PHP_SID = regsuball(req.http.Cookie,
                        ";? ?PHPSESSID=([a-zA-Z0-9]+)( |;| ;).*","\1");
    if (req.X-Varnish-PHP_SID != "") {
        set req.http.Cookie = req.X-Varnish-PHP_SID;
    } else {
        unset req.http.Cookie;
    }
    unset req.X-Varnish-PHP_SID;
}
            

https://www.varnish-cache.org/docs/4.1/users-guide/increasing-your-hitrate.html

Logic in the Frontend

Render varying parts in Javascript

• User state is communicated to Javascript in cookie
• Alter page when loaded:

$(document).ready(function () {
    if (is_editor()) {
        $("#labels-edit").show();
        $("#milestone-edit").show();
        $("#assignee-edit").show();
    }
});
            

Logic in the Frontend

• Pro
  • Fine grained control
  • No network overhead, easy on backend
  • Can handle complex user interfaces
• Con
  • Templating in frontend and backend?
  • Development effort and hard to maintain
  • Additional data needs to be fetched separately

Ajax for User Specific Parts

Ajax

• Separate endpoint in application for each fragment
• Do request when page loaded:

$(document).ready(function () {
    $.ajax({
        url: "/sidebar.html"
    }).done(function( html ) {
        $( "#sidebar" ).append( html );
    });
});
            

Ajax

• Pro
  • Can be executed after page already displayed
  • Good for slow, non-critical information
• Con
  • Network overhead (mobile...)
  • Lots of requests to the backend
  • Additional logic in the backend
  • Complicated to maintain

Caching despite cookies

Caching despite cookies

• Very easy to shoot yourself in the foot!
• The backend must send correct cache headers
  • Not cacheable:

    Cache-Control: no-cache

  • Depends on session:

    Vary: Cookie

  • Static:

    Cache-Control: public, s-maxage: ...

Make Symfony keep the cache headers

// Symfony overwrites caching headers when session was used.
// Need to explicitly tell it we intend to cache the response

use Symfony\Component\HttpKernel\EventListener\AbstractSessionListener;
...
$response->headers->set(
    AbstractSessionListener::NO_AUTO_CACHE_CONTROL_HEADER, 'true');

builtin.vcl

sub vcl_recv {
    // ...
    if (req.method != "GET" && req.method != "HEAD") {
        /* We only deal with GET and HEAD by default */
        return (pass);
    }
    if (req.http.Authorization || req.http.Cookie) {
        /* Not cacheable by default */
        return (pass);
    }

    return (hash);
}
            

Cache lookup despite cookies

// default.vcl
sub vcl_recv {
    // ...
    if (req.method != "GET" && req.method != "HEAD") {
        /* We only deal with GET and HEAD by default */
        return (pass);
    }

    // Cache lookup even with Cookie or Authorization header
    // Not adjusting vcl_cache to use Cookie in cache key
    return (hash);
}
            

Edge Side Includes

Use Edge Side Includes

Like server side include, but on Varnish:

• Content embeds URLs to sub-parts of the content
• Varnish fetches and caches elements separatly
• Individual caching rules per fragment. E.g. some elements vary on cookie, different TTL, ...

ESI HTML

<html>
    <body>
        Main body.
        <esi:include src="fragment.php" />
    </body>
</html>
            

And activate ESI in Varnish

ESI

• Pro
  • Separate caching for fragments
  • Server side, makes search engines happy
  • Simple to use in the application
• Con
  • Each include must be resolved before response can be sent

Symfony has built-in ESI support

# app/config/config.yml
framework:
  esi: { enabled: true }
  fragments: { path: /_fragment }
            

{# index.html.twig #}
{% render_esi(controller( 'AppBundle:Comments:comments', {'param': 42 })) %}
            

Cache still either global or individual

User Context

Introducing the User Context Hash

• Groups with the same permissions
• Transparent (reverse proxy does most of the job)
• Computed for every user of application
• Hash generation can be customized
• Cached by session ID, using HTTP cache

User Context

sub vcl_recv { ...
  // Copy client request headers to auth request
  curl.header_add_all();
  // We go through varnish itself to cache
  curl.header_add("Host: auth");
  curl.get("http://localhost/");

  if (200 != curl.status()) {
      return (synth(curl.status()));
  }
  set req.http.X-User-Context =
        curl.header("X-User-Context");
  curl.free();
... }

sub vcl_recv {
    // Cache auth lookup
    if ("auth" == req.http.Host)
    {
        if (!client.ip ~ self) {
            return (synth(405, "Not allowed"));
        }

        set req.backend_hint = auth;
        // force caching despite auth headers
        return (hash);
    }
    ...
}
            

class RoleProvider implements ContextProvider
{
  public function updateUserContext(
    UserContext $context
  ) {
    ...
    $roles = array_map(function (Role $role) {
        return $role->getRole();
    }, $token->getRoles());

    // Order should not change hash
    sort($roles);
    $context->addParameter('roles', $roles);
  }
}

Wrap Up

Mix solutions

• Edge side includes
• Ajax
• Move logic to frontend
• User context

Write your own context hash provider

• Other sources for user groups
• Geographical region
• User agent / client capabilities
• A/B testing
• ...

Symfony FOSHttpCacheBundle

• Cache tagging
• Invalidation service for active invalidation
• Annotations for caching headers and invalidation
• Request matcher for caching headers
• Listener for user context