loading...
Cover image for Personal portfolio: Gatsby vs Next?

Personal portfolio: Gatsby vs Next?

madza profile image Madza ใƒป1 min read

When it comes to the tech stack for personal portfolios many devs decide to go with static site generators due to SEO, speed, performance, security, version control, hosting, maintainability and other concerns.

What's your take on this?
Do you prefer Gatsby, Next or some others like Jekyll, Hugo and Nuxt? Or none of them and use your own approach?

Discussion

markdown guide
 

I loved my experience using Gatsby! Re-did my site using it in just a few short weeks on the weekends. Highly recommend it!

 

We are big fans of 11Ty or Eleventy - however, you want to call it. ๐Ÿ˜€

We got over a 35% performance boost compared to WordPress.

11ty was super simple to learn, build, and extend. Only took us 1.5 days to code and deploy to Firebase. The more popular site generators had more 'stuff', more 'plugins' - seemed too much for our needs. Even Google's web.dev platform runs on 11ty.

Gatsby, Jekyll, Hogo - I am sure they are all good. It all depends on the size and complexity of your needs.

Bottom line: Use any open Static Site Generator, with a bias towards Open Source.
They are way better than WordPress (or any old school CMS). You will enjoy a faster site, more security, and much more freedom.

 

Static Site Generator does not obliviate the need for CMS. Actually,

  • too many people are trying to sell headless CMS
  • Headful CMS, like WordPress can also be both made static, and made headless.
  • I do think CMS might be helpful, if you have a lot of content.
 

I switched from Gatsby, to Gridsome (Vue), and then finally to Eleventy. I am really loving the experience. I actually understand almost everything under the hood. It's really nice.

 

Can you elaborate on the "35% performance boost", what metrics does that apply to, how did you measure it?

 

We measured based on Google PageSpeed Insights, Google LightHouse, GTMetrix, and various tools.

If you run Google PSI - you can see for yourself.

  1. Our old - Wordpress site - srclogixwp.tk/
  2. Our new live site - srclogix.com

Run PSI few times on both. To get the median score. Also note that the new site has more images, more SVG, and more JS.

We still managed to get a lot better performance using 11ty ๐Ÿ‘

Cool ... however, I just checked out your old site and your new site and my impression is that the 35% is a gross underestimation! Every link I click takes seconds to load with the old site, and loads in a fraction of a second with the new site. The difference feels more like 350% than like 35%.

No wonder if all pages are simply statically generated and don't need to be loaded from a database and then dynamically generated (although I wouldn't expect the improvement to be that large).

Glad you see the BIG IMPROVEMENT Leob. CDN cache may make it better but if you truly compare apples-to-apples, Static Site is WAY faster - no doubt! ๐Ÿ‘๐Ÿš€

 

AFAIK, there is no alternative to Server-Side Rendered SPA in ones that take more traditional approaches, e.g. Jekyll, Hugo. -- Is there something analogous to <Link/> for other SSG?

I prefer Nuxt.js, but that is because it is convenient, not necessary because it is perfect for SEO. Also, fully static generated mode is relatively new.. Want some components in Markdown (MDX)? That is also relatively new.

Actually, I am looking at Next.js for stark simplicity, of folder structures, at the same level of Nuxt. (Nuxt is much more fully featured, though.)

Gatsby might be a better choice, for exactly that it is not truly simple, but has lots of useful plugin, including lazy image loading and MDX. However,

  • It highly wants you to use GraphQL, rather than REST API.
  • I generally like working from scratch, rather than from templates.
  • Folder structure isn't as perfect as Next.js
 
  • I initially went with Jekyll as the most mature community, but felt sort of hamstrung by the fact that I don't know Ruby ๐Ÿ˜…. I decided to try a JS-based one.
  • I looked hard at Gatsby, but it seemed like a bit much for what I wanted to do.
  • I downloaded a Hexo example and played with it a little, but the whole theming thing was sort of a turnoff--for me it's easier to just write my own CSS (not that you can't turn off the theming in Hexo; it just seemed like most of the documentation/tooling was geared toward someone who likes their default theming system).
  • I settled on Eleventy. The documentation is a little light because it's a young community (you won't find as many StackOverflow answers, for example, compared to something like Jekyll), but it's dead simple to use and it seems like they've done a good job of establishing simple, sensible defaults while allowing as much customization as you want.
 

You got me thinking, I was inclined to believe that Gatsby was the greatest thing since sliced bread but in many cases it's just overkill, I've heard good things about Eleventy so I definitely want to check it out as a plausible alternative.

 

I use Hugo for my personal blog. I think it's fairly simple. I deploy to netlify anytime I push to master. The generation of new articles and configuration is pretty good. I've been hearing great things about Next.

 

I read an article recently about Gatsby (I think it was on dev.to) which pointed out that even though Gatsby renders static pages, by default it then proceeds to download a big fat JS bundle to do the "hydration" thing. In many cases (a portfolio site comes to mind) that's just overkill and unnecessary overhead (according to the author).

I would tend to agree, but then it got interesting - the author pointed out that there are workarounds (Gatsby plugins) which do away with the JS bundle and the hydration so that you have a truly minimal static site, without JS, generated with Gatsby.

The author then proceeded to question "what then is the point of Gatsby" but it got me thinking nevertheless.

 

Currently my working solution has been good old Server Side Includes. Yes, that is .shtml files. It isn't perfect, but works very well for a small personal site and it is simple. The challenging part is to split the repeating parts into their own HTML files and then include these as needed. The downside compared to pure HTML files is that you need to have a server running to be able to make sure you don't make mistakes before pushing changes to production.

However over time I probably make most of my smaller sites run on Deno + Oak. It is very simple to do the static parts with that combination and you don't really need to have any kind of bundle, build, or compile phase if you don't want to. And things feel much easier in general as there is no node_modules to deal with. I guess the biggest challenge is to make sure the Deno app keeps on running in production :)

 

After long initial picking options and trying this and that Iโ€™ve settled with Nuxt.js full static and Storyblok. Itโ€™s relatively easy (more so if you already know Vue, which is also easy to learn), configurable and flexible. Gridsome/Gatsby force the supposed โ€œright wayโ€ of doing things a little bit too much for my liking

 

I built my portfolio website using Next its pretty good but I did have a lot of bugs getting the pages to render properly at the start. If I was to do it again I would most likely go with Gatsby because it does not seem to be difficult to get it working with a CMS which would be good for freelance jobs. So it just makes sense to use it more often so that I become a natural with it. create-react-app is still my default way for creating react apps.

 

I don't have a personal portfolio yet ๐Ÿ™ƒ.

With that said, a personal site is where you can explore tech stacks with relatively more freedom compared to making websites for clients/products. Gatsby, Next, and dozens of other (meta-)frameworks take different approaches; naturally, they all address some aspects well and some other different aspects not very well.

IMO you should choose a stack you're interested in, but not very familiar/skilled with. That way, you get a better understanding of how it works, and whether it would be a good fit for your next production site.

 

I use 11ty for my portfolio (and many of my projects)

 

Plain HTML and CSS, anything more is excessive

 

I felt similar, but after making a Gatsby site recently, I see two real advantages.

  1. The separation between the data and the HTML structure/design with Markdown.
  2. Well maintained plugins, which save hours adding certain features.

Regarding Markdown: I think having content in Markdown has a lot to be said for it, especially as I can easily syndicate the same content to dev.to, hashnode, medium, etc. To add content, I just open a text file and blog without having to delicately copy and paste new files and content into DOM structure. Views like the collection page also auto-update, adding one blog posts to my site updates 3-4 visual views, (homepage, collection, tags, etc.) this would take much longer by hand and is more error-prone.

Regarding plugins: When adding an SEO plugin, for example. I modified one template, I populated the meta description from the same markdown description data, and it was much faster than editing all previous posts to add that same functionality. Also, future data edits roll out to all the various places, again less error-prone.

 

Those points are fair but this seems like overkill for a personal portfolio. Especially the SEO

 

by order Jekyll > Gatsby > Hugo

 

Eleventy, ESPECIALLY if you're using markdown files for content.

 

I used ssg from nextjs to build my portfolio, I think it's an overkill since it's only serve one page. I think I will remake it with plain html/css/js

 

Neither :) I wanted something Vue based so went with Gridsome (the Vue based Gatsby equivalent) deployed on Netlify.

 

I use Jekyll although I have to admit it can become quite slow when the site grows. Should I decide to change, I'd probably go either Gridsome way or Zola way.

 

I personally went with Gatsby for my portfolio website and do not regret it :)