A Next.js snippet and you should check out this tool š„
Welcome to the Frontend Snacks Newsletter. š
Today, we will discuss our favourite topic: Next.js 13 and review a snippet about fetching static data.
With Next.js 13's experimental changes, how we fetch data will change significantly. Today's snippet shows you how you can fetch data statically in Next.js 13. In Next.js 12, we can bring data using getStaticProps if you can pre-build the page and your page is entirely static.
But with Next.js 13, we no longer need to use `getStaticProps` to fetch data statically. We can directly do that using `fetch.`
Fetch API now takes a property called { cache: 'no store' } as a 2nd parameter to the fetch function, allowing you to do this.
In the above snippet, we are fetching data from the Pokemon API, and since `fetch` returns a promise, we are calling `await` so we can wait for the promise to resolve. You don't need to provide this property explicitly, as it's there by default for us.
Latest Frontend Gossip/News š¤«
ICYMI, Remix is bought by Shopify now. You can check out the news here. This is exciting for the Remix team.
Remix vs Next
Remix is similar to Next.js, allowing you to do what Next.js does. You should check out this great article to compare Remix and Next.js.
We have a new Router library now
At Jamstack Conf, Tanner Linsley (creator of React Query) released a new router called "TanStack."
We all know that not many are a big fan of Next.js file-based router, so this router is fully type-safe, framework agnostic (except Next.js), and you can create routes by using the `createRoute` function and its children using `createRoute({ path: '/blog' }).createChildren((createRoute)`. Well, more on this next week!
Snack for Thought šæ
We are building so many different frameworks to make our site faster and moving the responsibility from the client to the server, but if you think about it, isn't that precisely what ASP.net was for? š We are going back to where we started.
Frontend Developers Toolbox š§°
- āKeyframes.app - Make your CSS a little less bad and add whimsy to your sites. I shared a quick demo here.
- āGetForm - Generate API endpoints for FREE to webhook, slack and many more APIs.
- āLearn Git Branching Visually - learn how to visualize your git changes
That's all for today!