- Published on
Narrowly Escaping the Need to Remove Giscus
- Authors
- Name
- interglobalmedia
- @letsbsocial1
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 embeds
become 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.
Related Resources
Static Tweets with MDX and Next.js: by Maxime Heckel
react-static-tweets: on the NPM Registry
Why You Should Use the NPKill Node Module: by interglobalmedia
Specialization and the Importance of Not Spreading Oneself Too Thin: by interglobalmedia