A zero-script way for embedding tweets in your SvelteKit app
- sveltekit
- Software Development
Published on
In this blog post, I will provide you with a better way to embed tweets in your SvelteKit app, The tweet will be generated statically on the server. Without any additional scripts or iframe elements, and without sacrificing performance or having layout shifts anymore.
In the last month, Vercel announced the new react-tweet package for rendering statically generated tweets in your Next.js app. In the pages directory, it works by requesting the Twitter syndication API server-side before the page load. For React Server Components, the tweet is fetched and rendered server-side in the relevant component.
I thought making a SvelteKit version would be cool! And I wanted to use the same on my blog, hence, I made the sveltekit-tweet package.
Let’s dive into the implementation details to get it running on your website. We will begin with the most basic example, then we will head into adding tweets to your markdown files.
Begin by installing the `sveltekit-tweet`` package via pnpm - or npm/yarn, depending on your flavor of choice.
pnpm add sveltekit-tweet@latest
And in +page.server.ts
, we import the getTweet
function from sveltekit-tweet/server
import type { PageServerLoad } from './$types';
import { getTweet } from 'sveltekit-tweet/server';
export const load = (async () => {
const tweetId = '1694201062717034868'; // You'll find it in the tweet URL
const tweet = await getTweet(tweetId);
return { tweet };
}) satisfies PageServerLoad;
The tweetId could be directly extracted from the URL you want to embed, and the getTweet
function will fetch the tweet info using Twitter’s / X’s API. This function is a server-only function, it won’t be imported into your client-side script (which is a good thing).
The last step is to render what you get in your +page.svelte component:
<script lang="ts">
import { Tweet } from 'sveltekit-tweet';
import type { PageData } from './$types';
export let data: PageData;
const tweet = data.tweet;
</script>
<Tweet {tweet} />
Result:
SvelteKit is amazing!