DEV Community

Cover image for Personal portfolio: Gatsby vs Next?

Personal portfolio: Gatsby vs Next?

Madza on August 07, 2020

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...
Collapse
 
ramesh profile image
Ramesh Elaiyavalli

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.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

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.
Collapse
 
rockykev profile image
Rocky Kev

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.

Collapse
 
leob profile image
leob

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

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

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 👍

Thread Thread
 
leob profile image
leob • Edited

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).

Thread Thread
 
ramesh profile image
Ramesh Elaiyavalli

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! 👍🚀

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

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
Collapse
 
dangoslen profile image
Dan Goslen

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

Collapse
 
webbureaucrat profile image
webbureaucrat
  • 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.
Collapse
 
leob profile image
leob

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.

Collapse
 
sdiamante13 profile image
Steven Diamante • Edited

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.

Collapse
 
leob profile image
leob • Edited

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.

Collapse
 
merri profile image
Vesa Piittinen

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 :)

Collapse
 
cyberbobs profile image
Boris Moiseev

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

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.

Collapse
 
ekafyi profile image
Eka • Edited

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.

Collapse
 
brob profile image
Bryan Robinson

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

Collapse
 
shane profile image
Shane McGowan

Plain HTML and CSS, anything more is excessive

Collapse
 
fasani profile image
Michael Fasani

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.

Collapse
 
shane profile image
Shane McGowan

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

Collapse
 
katafrakt profile image
Paweł Świątkowski • Edited

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.

Collapse
 
zikrimarquel profile image
Marquel

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

Collapse
 
cguttweb profile image
Chloe

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

Collapse
 
arnaudcortisse profile image
Arnaud Cortisse

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