Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions docs/docs/building-apps-with-gatsby.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
title: "Building Apps with Gatsby"
---

Gatsby is an excellent framework for building web apps. You can use Gatsby to create personalized, logged-in experiences with two different methods.
Gatsby is an excellent framework for building web apps. You can use Gatsby to create personalized, logged-in experiences with two different approaches.

The first approach is to build "hybrid" app pages which are statically rendered with dynamic sections. The second is, if needed, add client-only multi-page sections of the site.
1. "hybrid" app pages, and
2. client-only routes & user authentication

## Hybrid app pages

With this method, Gatsby renders the initial page with shared page content -- then when your React components load in the browser, they can fetch and render data from APIs. The [React docs have a simple example of how to do this.](https://reactjs.org/docs/faq-ajax.html)
With this method, Gatsby initially renders the page statically, and then when your React components load in the browser they can fetch and render data from APIs.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is kinda awkward language — perhaps change it to describe how a visitor to a Gatsby site first loads an HTML file and then the JavaScript.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modified the language


Some examples of how you could use this:
> 💡 The [React docs](https://reactjs.org/docs/faq-ajax.html) have a great, straightforward example demonstrating this approach.

Some examples of how you could apply this:

- A news site with live data like sports scores or the weather
- An e-commerce site with universal product pages and category pages, but also personalized recommendation sections
Expand All @@ -25,12 +28,11 @@ A classic example would be a site that has a landing page, various marketing pag

Gatsby uses [@reach/router](https://reach.tech/router/) under the hood. You should use @reach/router to create client-only routes.

These routes will exist on the client only and will not correspond to index.html files in an app's built assets. If you wish people to visit client routes directly, you'll need to setup your server to handle these correctly.
These routes will exist on the client only and will not correspond to index.html files in an app's built assets. If you wish people to visit client routes directly, you'll need to set up your server to handle these correctly.

To create client-only routes, you want to add code to your site's `gatsby-node.js` like the following:
These routes will exist on the client only and will not correspond to index.html files in an app's built assets. If you'd like site users to be able to visit client routes directly, you'll need to set up your server to handle those routes appropriately.

_Note: There's also a plugin that can aid in creating client-only routes:
[gatsby-plugin-create-client-paths](/packages/gatsby-plugin-create-client-paths/)_.
To create client-only routes, add the following code to your site’s `gatsby-node.js` file:

```javascript
// Implement the Gatsby API “onCreatePage”. This is
Expand All @@ -49,4 +51,7 @@ exports.onCreatePage = async ({ page, actions }) => {
}
```

The [example site "simple auth"](https://github.com/gatsbyjs/gatsby/blob/master/examples/simple-auth/README.md) demos how to combine user authentication with restricted client-only routes.
> 💡 Note: There's also a plugin to simplify the creation of client-only routes in your site:
[gatsby-plugin-create-client-paths](/packages/gatsby-plugin-create-client-paths/).

Check out the ["simple auth" example site](https://github.com/gatsbyjs/gatsby/blob/master/examples/simple-auth/README.md) for a demo implementing user authentication and restricted client-only routes.