Cloudflare Zaraz adds support for server-side rendering of X and Instagram embeds

Server-side social embeds come to Cloudflare Zaraz

Cloudflare Zaraz now supports server-side rendering of X and Instagram embeds through two new open source Managed Components. The feature lets website owners display social media posts without loading third-party JavaScript or cookies in the browser, and without any direct communication between the user's browser and the social platform's servers.

Traditional embed code from X and Instagram relies on scripts that run in the browser, which raises security, privacy, and performance concerns. When a browser fetches a remote script from a social platform, it can expose sensitive user information such as IP addresses and User Agent strings—a practice that has already created GDPR compliance issues in Europe with other third-party tools like Google Fonts. External scripts also expand the attack surface: a vulnerability in any dependency library of the embed provider could compromise user safety at scale.

Zaraz's approach bypasses these problems entirely. Because the tool runs fully on Cloudflare Workers and can inject HTML before content is served, there is no client-side third-party script, no cookie, and no request from the browser to the social platform. All content is fetched and cached server-side and served from the customer's own domain. That also brings performance gains. In Google PageSpeed Insights tests run from the same environment on two identical HTML pages containing the same tweet, Zaraz's X embed scored a perfect 100 with 0ms Total Blocking Time, one request, and a transfer size of 12.1 KiB. The traditional X embed code, by comparison, scored 27 points lower and required 475 KiB across multiple requests with 1,010 ms of Total Blocking Time.

Adding embeds to your pages

Using the new feature is straightforward: instead of copying the JavaScript embed snippet from X or Instagram, you add a placeholder element to your HTML. For X, that looks like this:

<twitter-post tweet-id="1754336034228171055"></twitter-post>

The tweet-id is the number that appears in the URL of the embedded tweet.

For Instagram:

<instagram-post
  post-url="https://www.instagram.com/p/Ct_qa1ZtmiW/"
  captions="true">
</instagram-post>

The post-url attribute takes the full URL of the post. The captions attribute, when set to true, includes the post's captions in the embed.

After adding the placeholder HTML to your page, you activate the X and Instagram tools in the Zaraz dashboard. Zaraz detects the placeholder elements in your HTML and replaces them with the fully rendered social content.

Two approaches to server-side rendering

The two open source Managed Components—available on GitHub for X and Instagram—demonstrate different techniques for fetching content and generating HTML and CSS.

How the X embed works

The X component fetches JSON from an X endpoint using a server-side request, then populates an HTML template with that data using the Mustache templating library. The component registers an embed via manager.registerEmbed(), which receives the placeholder element's parameters as attributes along with the client object, and returns HTML. Each placeholder variable in the template—fields like {{text}}, {{name}}, and {{username}}—is filled with the relevant tweet data from the fetched JSON.

Caching is handled with the manager.useCache() method, which takes a function and an expiry value. The function uses manager.fetch() to make the server-side request. All images that appear in the post template, including profile pictures, are also fetched server-side and cached via manager.set().

Once all content is fetched and rendered, the Managed Component returns the finished HTML to Zaraz, which replaces the <twitter-post> placeholder element. Because this happens on Cloudflare, the response sent to the end user's browser already contains the complete embed.

How the Instagram embed works

The Instagram component takes a different route: it starts from Instagram's own generated HTML for the post, then modifies it to remove any scripts and stylesheet links. CSS content is fetched and cached server-side so the browser never makes a network request for it. Images are routed through a server endpoint that the component sets up on the customer's own domain, so src and srcset attributes point back to that domain rather than to Instagram.

The component fetches the post HTML server-side with manager.fetch(), manipulates it using the Cheerio library, and caches it with manager.useCache(). Setting up a route endpoint follows the standard Managed Components pattern:

manager.route('/image/', async request => {
// logic to fetch and cache all images
});

This implementation eliminates direct browser-to-Instagram communication, preventing sensitive user information such as IP addresses from being exposed to the platform.

Current limits and next steps

The X embed currently supports text tweets; the Instagram embed supports image posts. Support for additional media types and more tools that can be rendered entirely server-side is on the roadmap. Cloudflare invites users and partners to contribute to the Managed Component open source project to extend server-side rendering to more platforms. The X and Instagram tools are available now from the Zaraz dashboard.