Another difference that I’ve just discovered is the way prefetching links works.
Gatsby prefetches the content for the next page when you hover over a link, which is one of the things that makes it so fast.
Next (also Nuxt and Gridsome) prefetch all the content for all the links that are within the viewport, not just links that the user will visit.
It seems like a waste of users’ bandwith to load the content of every page when the users don’t intend to click anything. If a user scrolls through lists of blog posts, they will download your entire blog, even if they don’t visit the blog posts.
Prefetching can be turned off, but then you don’t get the performance benefits.
If you open nextjs.org in a browser and hard-reload the page with the browser’s network tab open, you can see all the files that are downloaded as you scroll down the page (including images on pages that aren’t visited). The right side shows an example payload.
Gatsby 3 was released today. The tutorial above still work without changes, because it will pull in Gatsby 2.
I’d wait to use Gatsby 3 until there is more information about which plugins are compatible. It might take a little while before they are all updated. In the meantime, here is information about the new version:
It still looks the same, but it’s easier to configure some things (like RSS feeds).
It’s a quick way to launch new projects. Here’s an example site I made with the Gatsby 2 version in just a few hours yesterday. My music blog also uses the Gatsby starter without much modification.
I’m going to switch the starter from plain markdown to MDX. MDX lets you import React components into Markdown files, so you can add dynamic content to things like blog posts. I just tried it on a site, and it’s pretty interesting.
I added MDX support and made some other improvements, like adding a spinner component.
You can now import React components right into the markdown files (blog posts or whatever content types you create) like this:
---
title: "Now with mdx Support!"
date: "2021-05-15T22:39:34.433-07:00"
author: "Bob"
slug: "mdx-support"
description: "This Gatsby starter now has support for .mdx files."
---
import Example from "../../../components/example/example";
Blog posts can be written in `.mdx` format. Both `.md` and `.mdx` files
will be processed as MDX.
<Example title="JSX in Markdown Files!" />
It opens up the door to embedding small web apps in blog posts without much effort.
I moved the content directory into src to make it easier to import components.
Edit: you can also write pages/components in markdown like this:
import Layout from "../components/layout/Layout";
import SEO from "../components/seo/SEO";
# A Markdown Page
This is an example of writing a page in markdown.
- A list item
- Another list item
export default ({ children }) => (
<Layout>
<SEO title="An MDX Page" />
{children}
</Layout>
);
I published a react-text-spinners package to NPM and included that in the Gatsby starter. All of these are available out of the box. I tend to use “dots2”`.
I’m in the middle of a large rewrite of my main site (Gatsby), and I found some improved ways to do things, including full TypeScript support even for Gatsby’s configuration files:
I think I’m going to make a new Gatsby starter using some of those ideas. In the meantime, the Gatsby starter in this thread still works, or you can start a new Gatsby site with this command:
$ npm init gatsby
That command now has options to add various features by answering questions when you initialize the project.
If using my starter as a guide, I’d change the SEO component to a Metadata component, something like this.
Gatsby now warns about components that aren’t CamelCased, so naming it Metadata gets around that.
Gatsby is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
Gatsby 3 has only been out for about 7 months, but Gatsby 4 is in beta already. I hope there isn’t an upgrade process every year, because old plugin versions probably won’t be maintained for long.
I just updated a site directly from Gatsby 2 to 4 and it worked. The site wasn’t very complex though. I deleted node_modules and package-lock.json. Then I cut all the dependencies out of the package.json file and ran npm install for all of them to get the latest versions. I replaced the older image plugin for the new one and removed a couple of npm packages that the site didn’t need. There were some errors when I ran npm start, but I fixed them and then it worked.
I just updated a second Gatsby site from v2 to v4, and it wasn’t difficult. For basic sites, I think it’s easy to do the process mentioned in the post above. There’s no need to upgrade to version 3.
Some of the errors that might appear can be fixed by running gatsby clean after updating the npm packages.
I’m running multiple Gatsby and Next sites now. They both have pros and cons.
For a static-only site I’d still go with Gatsby, because I prefer the way it loads data, but I don’t use any of the server-side features because they are linked to proprietary hosting platforms (expensive). For sites that need server-rendering, I’d consider Next. Next can export to a static site, but image optimization doesn’t work with their static sites.
