A static site generator based on React, does that even make sense? GatsbyJS tries to answer this question with a hypermodern, feature-packed, jamst...
For further actions, you may consider blocking this person and/or reporting abuse
Excellent post! I've recently been working through a JAMstack design with a client utilising the following architecture stack:
It's been utterly awesome to work with and really shows the power of the JAMstack.
That's great! I'll need to have a look at Algolia as well, and hooking it up with Contentful is the next step. Ah testing, could you maybe elaborate a bit on what and how you test? It's something I've been actively ignoring so far and I know that's not good.
But I agree, the
JAMstackis an excellent concept and makes projects a lot of fun to work with. I'm looking forward to integrate it more in my professional environment.We will be using Jest and enzyme for our basic testing. There's a nice overview of that here: hackernoon.com/testing-react-compo...
We are also looking into using nightwatch / phantom / casper (we aren't fully committed to one of these yet so its up for debate) to automate the testing of some our mission critical customer journeys through out website. The client has quite a large testing team which focus their testing mainly on the mobile app, but they haven't really had the website as part of their scope historically. Whilst this seems like a missed opportunity to utilise them as a resource for web testing, it is also actually leaving us with optionality. I would much prefer to have automated unit, integration and to an extent our pre-canned UAT tests. The human eye should really only be cast over some of the newer components we release, with everything else checking/failing before or during our build pipeline.
We created our initial site using graphQL, Gatsby and Markdown. The switch to Contentful instead of Markdown was a breeze when we had all of the graphQL queries already modelling what we needed.
Likewise. I’ve been working in a similar stack. It really is amazing to work with. Now, we’re just starting to use Netlify’s open source CMS which uses git to handle content versioning. Did you guys look at that at all before picking Contentful? I think Contentful looks awesome too, just curious if there were any pros/cons between the two.
I think there are a few nice perks, such as visualising the models you produce as well as the media library aspects. End of the day it felt a bit more friendly for the marketing guys to understand and use (They arent changing or configuring YAML). The developer team were happy to use either and I think if you are working with a pure dev team then there is no issue using Netlify openCMS, but where there are "business" users involved, the confluent UI proves to give the right level of abstraction away from coding (Yes even markdown files scares some people!). It also feels a lot closer to the traditional CMS for content creation, they like to see the layout and previews, images rendered before fully publishing etc.
We also found the pricing model at contentful to be really friendly, to set up a proof of concept and allow the business users to mess around creating their content with the benefits mentioned in the previous paragraph made it an easy sell when it came to moving into a small subscription. There's also the support model wrapped around all of this and since the content is served over multiple channels, the internal due diligence from service management and security teams forced our hand to an extent to keep away from a self hosted open source product.
This got me really into Gatsby. I'm pretty familiar with all of the Gatsby tech independently, but even though I knew what it was, I never took the time to look this closely at it. Thanks for the post.
That's awesome, you're welcome! It took me a while to pick up Gatsby as well but as I mentioned I found it really hard to ignore all the happy developers. Since I do enjoy working with React it was really easy to get into and the experience has been stellar so far! I'll do some more technical posts on Gatsby soon.
Hi
Do you know whether anyone tested how gatsby works with lost of page?
For many years I have this problem where I'm not totally satisfied with my note-taking setup. About two years or so a go I started using jekyll, it was fantastic till I wrote over 100 posts when it slowed down and lost it's goodness.
Do you know whether I'll hit the same problem with gatsby?
The idea is I want to run it locally as a way to manage personal/private notes that I write every day.
Thanks
Good question on which I don't have a definitive answer yet. As far as I can see it should be able to handle lots of pages but I haven't seen any examples yet. Let me ask around and get back to you!
The new reactjs.org site is built with Gatsby.
I don't think you'd run in to performance issues. Gatsby is a static file generator, so all your pages are pretty much just static html with whatever interactions the out of the box React components offer or custom ones you make. Here's a good write up on performance from the creator of Gatsby. Some main takeaways in Thar article in regards to Gatsby:
Hey Nick, thanks for your reply! I think most of us are aware of the performance of the actual static sites by Gatsby. But that wasn't the question, which is: How will Gatsby hold up when building 100's to 1000's of pages?
(to be honest, I just re-read the original post and I kinda assumed it was about building. Nowhere is it stated but it's been an issue I've had with multiple static site generators as well!)
Ahh, that'll teach me for responding very late at night. 😉. I'd recommend combing through other issues in the repo. There appears to be at least a few in regards to build times in there.
Having said that, the main benefit of Gatsby is a fast site, not a blazingly fast build time (within reason of course, DX is important). I use it for my blog and it works great, but it's not hundreds of pages.
Logically, I can only assume as more and more pages get added, the build time will slowly increase.
Haha well you might've been right, I kinda just assumed build time was the issue.
In any case, I think it would be nice to have incremental builds, something that the team is working on although I haven't heard much about it lately
@nickytonline I used to use jekyll to keep my personal notes, hence I updated it very frequently. It worked great before I got 90 posts (90 markdown files) then it was a drag. Clearly a normal blog - updated 1-3 times a week, would not feel the problem.
It be cool if Gatsby worked like "Ok there are no changes to the 90 posts, so let me build only the 99th".
Clearly it's not meant to be used for daily note-taking but it be nice to know if that's something the developers might have in the pipeline
According to the tweet Arden posted in this thread, it looks like you're gonna get your wish 😉
Great article! I always see Gatsby and think: What are the benefits comparing it with next.js? The only thing that I could think is that it has a bunch of tools built-in (for example, GraphQL) but besides that in my opinion, next.js could easily replace Gatsby.
I want to hear your opinion on this comparison: Gatsby vs next.js!
I went through the tutorial of Next.js and have a few quick observations:
Gatsby.js comes with GraphQL baked in, circumventing graphQL might be difficult. Next.js has an
async/awaitfunction to pre-populate your components props with data you can pull from anywhere. If you want to use GraphQL you can combine next.js with Apollo.In general, Gatsby is more opinionated. It has it's own plugin ecosystem (including data handlers), aggressive pre-fetching, the whole PRPL pattern and the works. It still leaves you very free in how you write and style your components though. Especially for static site generating, Next.js is more barebone and you'll need to configure which links you want to pre-fetch and which assets you want to lazy-load.
I can't say anything on performance with building because I've yet to actually build something with Next.js yet.
Also, there's React Static, another contender in the ring. I might give that one a go as well.
Great answer, I agree with you.
So we can affirm that if we want to build the same application in Gatsby and next.js, we will have to put a lot more effort in the next.js one.
But in the case, we want to expand the application to have any dynamic behavior, Gatsby won't suit.
That's a great question! I've yet to have any experience with Next.js and to be honest, up until now I didn't realize what it was exactly. A comparison is a great idea and something I'll pick up soon. Thank you for the inspiration!
A very nice post. I'll definitely play with Gatsby soon
Here is a step by step guide about how to create your blog site using Gatsby.
zeptobook.com/create-your-blog-sit...
nice
test