In short, because CloudFlare isn’t a typical CDN.
The gray cloud means that CloudFlare is only serving DNS for that address.
If you turn on the orange cloud, it alters the IP address shown to the outside world and proxies all traffic across its network, which allows it to both ‘protect’ the server and cache assets such as images and javascript.
The template is necessary because once CloudFlare sits between your site and the outside world, your server will only see CloudFlare IPs as connecting to it. By using the template your site will once again see the client IPs which CloudFlare forward in the CF-Connecting-IP header.
Without this configured correctly you will see connection limit errors and encounter errors regarding registration IP addresses, as all user traffic appears to come from a handful of addresses.
If you decide to enable the CloudFlare CDN (orange cloud) you need to take one more step and establish a page rule for the address of your Discourse instance. The rule needs to ‘Disable Performance’ which will turn off the CloudFlare features which are well documented to interfere with Discourse.
Note that if you’re using CloudFlare to front your site, rather than an S3 bucket, that you’ve added additional network hops between your server and clients across the internet. Remember that Discourse isn’t a website, it’s a JavaScript application. Once Discourse has loaded in the browser it isn’t downloading pages when users click links. Adding those additional network hops will add a small but not entirely unnoticeable delay to every click.
Unless your site is under attack the smart way to use CloudFlare is to migrate your assets into S3 (object storage, rather than a CDN) and then use CloudFlare in front of that S3 storage. That way client communications remain snappy, asset download bandwidth is reduced and best of all you free up local storage on your Discourse server.