Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update building-apps-with-gatsby.md #10255

Closed
wants to merge 3 commits into from
Closed

Update building-apps-with-gatsby.md #10255

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97c7ed6
Update building-apps-with-gatsby.md
jaredpalmer Dec 3, 2018
4892659
Update docs/docs/building-apps-with-gatsby.md
LekoArts Dec 3, 2018
3af984c
Run prettier
LekoArts Dec 3, 2018
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
15 changes: 15 additions & 0 deletions docs/docs/building-apps-with-gatsby.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,18 @@ exports.onCreatePage = async ({ page, actions }) => {
> [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.

### Known Issues
Copy link
Author

Choose a reason for hiding this comment

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

Probably needs a better heading.


Some Gatsby plugins manipulate the DOM prior to mounting (e.g. [`gatsby-plugin-twitter`](/packages/gatsby-plugin-twitter/). In order to support these plugins, Gatsby adds a top level `key` which causes the root to remount each page transition (even those to client only routes). For some hybrid apps, this behavior causes unecessary overfetching/request waterfalls. To avoid this, you can add the following to your site's `gatsby-browser.js`

```js
jaredpalmer marked this conversation as resolved.
Show resolved Hide resolved
import React from "react"

export const replaceComponentRenderer = ({ props }) => (
<props.pageResources.component key={props.pageResources.page.path} {...props} />
)
```

By using the page path as the `key`, Gatsby will only remount when the `path` changes. This allows you to preserve state between routes inside the dynamic part of your application (e.g. `/app/*`) just like a single page application (SPA) does.