“Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.”
Why would we need a framework on top of a framework (or a library)? Isn’t React a tool that “helps developers build websites and apps”? This is a reasonable question. It is often posed about tools such as Next.js.
React is a library that is meant to provide a certain set of core functionality for developers to leverage. It is intended to be lightweight and broadly applicable.
Gatsby, on the other hand, is, “a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.”
Gatsby is a static site generator that leverages React.
What are static sites?
Static sites have been around for a very long time. In fact, they are probably the original website: just HTML, CSS, and JavaScript. They are not rendered during runtime; there is no server-side code, no database, etc.
A static site generator is a tool that generates static sites. With regard to JS frameworks and libraries, these usually generate HTML content on the client side during runtime. Static site generators generate this content during build time. Then, once loaded, React takes over, and you have a single-page application!
How is this different from server-side rendering? This is a great question. The main difference is that there is no server-side code. So, unlike a tool such as Next.js, Gatsby does not render anything on the server when a request is made. This is all done at build time of the application.
Some of the benefits of a static site are: speed, search engine optimization, and security. Not only are sites made with Gatsby blazing fast, but they have an implicit security since there is no database or server, and unlike standard React applications, they make SEO much easier since crawlers can find the content.
What you are going to learn in this course:
Gatsby Fundamentals
How to build fast static websites with Gatsby
Build a Blog inGatsby
Build an E-commerce website in Gatsby
How to use GraphQL, React to build static websites
