GatsbyJS считают убийцей WordPress и компилятором с кучей плюшек. Екатерина Шиповская рассматривает плюсы и минусы использования GatsbyJS. И помогает разобраться, так ли он хорош, и что делает его особенным.
4. What is Gatsby.js
• Gatsby widely known as a Static Site Generator (SSG)
• Uses a combination of React & GraphQL
• Gatsby calls itself a Modern Site Generator
6. Static Websites
• Uses static HTML pages (with maybe JS & CSS)
• Pages uploaded to a CDN / web host
Drawbacks
• Hard to update / maintain pages (re-writing a lot of the same code on every page)
• Fresh request to the server for every page (slows website down)
• Generally do not contain dynamic data
Server
page request
Types of Websites
SEO
Speed
Easy to update
7. Types of Websites
Single Page Applications
• Typical React / Vue website
• Only a single server request mode for the initial HTML page (empty)
• Everything else (routing, data) is handled by the SPA in the browser
SEO
Speed
Easy to update
Drawbacks
• Web pages are not SEO friendly (initial request is for a blank HTML page)
Server
initial request only
8. Types of Websites
Server Side Rendered (SSR)
• Pages rendered on the server after every request
• Server sources data (e.g. mongodb) & uses templates to render HTML pages
• Resulting pages are sent back to the browser
SEO
Speed
Easy to update
Drawbacks
• Fresh request needs to be made for every page
• Server can take time getting data and rendering pages
Server
page requests
renders pages using
templates & data
9. Types of Websites
Static Site Generator (Gatsby)
• Static pages are compiled at build-time (before deployment)
• Gatsby sites / pages are made using React components
• Static pages are then deployed to the web
• After initial request, the site behaves more like an SPA
SEO
Speed
Easy to update
Server
initial request
(fully rendered – good for SEO)
13. 0. Set Up Your Development Environment → Create Your First Gatsby Site
npm install -g gatsby-cli
gatsby new my-awesome-project
https://github.com/gatsbyjs/gatsby-starter-hello-world
cd my-awesome-project
Installing CLI and creating new project
Using CLI to Run, Build and Serve project
gatsby develop
gatsby build
gatsby serve
15. 2. Use and Style React Components
Create a page component
Task: Update the home page content
localhost:8000
16. 2. Use and Style React Components
Task: Create a new page component for an About page
localhost:8000/about
17. 2. Use and Style React Components
Use the <Link> component
Task: On the Home page, import the Link component from the Gatsby package
18. 2. Use and Style React Components
Create a reusable layout component
Task: Create a new
fi
le called src/components/layout.js
19. 2. Use and Style React Components
Task: Update your Home page component to use the Layout component instead of the
hard-coded Link component you added in the previous section
20. 2. Use and Style React Components
Style components with CSS Modules
Task: Create a new
fi
le: src/components/layout.module.css
21. 2. Use and Style React Components
Task: Then import that class into your Layout component .js
fi
le, and use the className prop to
assign it to the top-level <div> element:
23. 3. Add Features with Plugins
Task: Use gatsby-plugin-image to add a static image to your home page
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-
fi
lesystem
24. 3. Add Features with Plugins
Task: Use gatsby-plugin-image to add a static image to your home page
26. 4. Query for Data with GraphQL
Use GraphiQL to explore the data layer and write GraphQL queries
http://localhost:8000/___graphql
27. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• In your web browser, go to localhost:8000/___graphiql to see the GraphiQL interface.
• In the Explorer pane, open the dropdown for the site
fi
eld.
• Within the site
fi
eld, open the second dropdown for the siteMetadata
fi
eld (the blue one). This corresponds to
the siteMetadata object in your gatsby-con
fi
g.js
fi
le.
28. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Import the useStaticQuery function and the graphql tag from the Gatsby package.
29. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Call useStaticQuery and pass it the query you created in GraphiQL. Be sure to use the graphql tag so Gatsby
knows that the string you’re passing in is a GraphQL query. Store the return value from useStaticQuery in a
variable.
30. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Now that you have a variable with the results of your query, you can render the title of your site in the JSX
for your Layout component.
31. 4. Query for Data with GraphQL
Task: Create a new blog page
Create a new
fi
le: src/pages/blog.js. De
fi
ne and export a new page component for your blog page.
Use your existing Layout component to add some basic structure.
32. 4. Query for Data with GraphQL
Task: Create a new blog page
Add a link to your new blog page to the navigation bar in your Layout component:
33. 4. Query for Data with GraphQL
Task: Create some MDX blog posts
• Create a new directory called blog at the top level of your project folder.
• Create three new
fi
les in the blog directory: one for each post.
34. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• Now that you have some posts saved to your local
fi
lesystem, it’s time to pull those
fi
les into the
Gatsby data layer. To do that, you’ll use a plugin called gatsby-source-
fi
lesystem.
• Con
fi
gure gatsby-source-
fi
lesystem in your gatsby-con
fi
g.js
fi
le. Since gatsby-source-
fi
lesystem requires some additional con
fi
guration options, you’ll use a con
fi
guration object instead
of a string. The code example below shows how to “source”
fi
les from your blog directory (in other
words, how to add them to the data layer).
35. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• Restart your local development server to make sure it picks up the con
fi
guration changes and
adds your
fi
les to the data layer.
• You can use the allFile
fi
eld to request data about multiple
fi
les at once. In GraphiQL, try exploring
the different
fi
elds within allFile to see what sorts of data you get back. Then build a query using
the allFile
fi
eld to get the name of all the
fi
les in your blog folder:
36. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
Import the graphql tag from the Gatsby package.
37. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
De
fi
ne and export your page query. Copy over the query you built in GraphiQL
38. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
Add in the data prop to the function de
fi
nition.
40. 4. Query for Data with GraphQL
Some example posts that you can use for inspiration:
41. 4. Query for Data with GraphQL
Render each post’s contents on the Blog page
Now that you have some MDX content inside your blog posts, it’s time set up
the gatsby-plugin-mdx transformer plugin.
The gatsby-plugin-mdx plugin provides some new tools for you to use in your site:
• The allMdx and mdx
fi
elds (for your GraphQL queries)
• An MDXRenderer component (for processing and displaying MDX content)
42. 4. Query for Data with GraphQL
Task: Install and con
fi
gure the MDX transformer plugin (and dependencies)
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
43. 4. Query for Data with GraphQL
Task: Update the Blog page query to use the allMdx
fi
eld instead of allFile
44. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
45. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
Next, update the JSX for your Blog page to use the data
fi
elds of your response.
Start by rendering just the title and date for each post.
46. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
The
fi
nal step in this part of the Tutorial is to render the actual contents of your MDX blog posts.
To do that, you’ll need to use a component from gatsby-plugin-mdx called MDXRenderer. Start by
importing the component into your Blog page:
47. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
In the JSX for your Blog page, use the MDXRenderer component to wrap the contents of the body
fi
eld
for each node:
49. Gatsby cons
Don’t use Gatsby if:
• There will be a lot of content – for example, if it’s a large blog, generating a static website can
take up to 15 minutes. However, for those using Gatsby Cloud, there is a solution called
Incremental Builds which shortens build time up to 1000x, but it’s not free (cost starts from $19/
month)
• You need to update content a lot – because those updates won’t be visible instantly as in, for
example, WordPress
• It’s a corporate-size webshop – this point is similar to the
fi
rst one because the more content
you have, the longer the build time will be. Although the solution is Gatsby cloud,
fi
rst of all, you
have to pay for this, and second of all, any updates still won’t be visible right away