Published on

Narrowly Escaping the Need to Remove Giscus

Last Modified on
Last modified on
Authors
Narrowly Escaping the Need to Remove Giscus
Photo by Raphael Biscaldi on Unsplash

Two of my posts, one from several years ago, and one very recent, contain tweets. However, I was not initially able to embed tweets due to the CSP defined in my next.config.js file. Initially, it consisted of the following (and still does):

const ContentSecurityPolicy = `
  script-src 'self' 'unsafe-eval' 'unsafe-inline' plausible.io giscus.app;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app;
`

But I wanted to be able to embed tweets using platform.twitter.com/widjets.js. Because of CSP, I was not able to do so out of the box. I had heard that tweet embeds did not perform well with Next.js (and in general), and I wanted to see for myself what that entailed, before I went down another route.

It took some trial and error to figure out how to enable tweet embeds using platform.twitter.com/widjets.js, but I did end up being successful. This meant, however, that I had to remove Giscus from my site as well. My CSP config ended up (temporarily) being the following:

const ContentSecurityPolicy = `
  script-src 'self' 'unsafe-eval' 'unsafe-inline' plausible.io platform.twitter.com;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src platform.twitter.com;
`

The performance of my Twitter tweet embeds was terrible, just as I had heard. Originally I had styled the text and links with a blockquote, and that is also the markup for the Twitter tweet embeds. So when I would land on a post that contained a tweet embed, it looked like one of my blockquotes and not a Twitter tweet embed! I had to reload the page in order for the embed to render. What was the point in sacrificing Giscus for a tweet embed that looked exactly like my hack?

I reverted back to my original CSP config. Then I went on to research my tweet embed issue further.

After some research, I came across another solution: to add tweets to my mdx posts in the form of static tweets: tweets without the use of JavaScript, or more precisely, inline script tags inside my mdx posts.

First I came across an approach in which I would basically be creating the equivalent of my own static tweet plugin, which also happened to be built with Typescript, which I do NOT use in my Next.js site. I tried to refactor the Typescript React into JavasScript React, but hit a wall at one point. In addition, the structural approach of Maxime Heckel’s site differed somewhat from mine, so it would have taken even longer to decipher. Were authentic looking tweet embeds THAT IMPORTANT to me to spend so much time on at this point in the game? Honestly, no. I also had too many other things on my plate to deal with. I was going to leave that implementation to another and more propitious time.

But then I came across an npm module called ‘react-static-tweets’, and decided to give it a shot. It DOES work. On initial load, in a post that contains only one tweet embed, the tweet takes a half a second to a full second to load. After that, it will always appear during the current site visit. However, on the post in which I have several tweet embeds, for all of them to load, it takes longer on first load. After that, they always appear for the current site visit. The same delayed process occurs with each site visit for multiple tweet embeds on one page.

No, it is not perfect. Yes, I will have to mention something about it in my FAQs page. Will I be revisiting this? Yes. When tweet embedsbecome more predominant/important on my site. But for now, this approach will have to do. And the performance of the single tweet embed in the recent post is quick enough. I am glad, however, that I did not have to give up Giscus for actual Twitter tweet embeds using platform.twitter.com/widgets.js, which have such poor performance!

Note: It will be worth revisiting Maxime’s code, because his tweets are already rendered to the page when you land on it. There is no delay whatsoever. He really did do a beautiful job of creating static tweets.

react-static-tweets also provides an SSR (server side rendering) approach, which might be worth testing out.

View on GitHub