Reuse Content Across Pages
React Bricks offers several methods for reusing content across pages. In this section, we’ll summarize these methods, highlighting the use case for each and providing links to the relevant documentation.
Summary
| Reusing content need | How to achieve it |
|---|---|
| ”Cookie cutter” to reuse bricks’ configuration | Stories |
| ”Change once, apply everywhere” block | Embed |
| Layout fragment, like header and footer | Dedicated <PageViewer> in layout |
Stories
Stories are a way to save and reuse a brick’s configuration, reapplying the same set of props. They can be created in code, pre-configuring a single brick into different relevant configurations, or by content editors to save and reuse a particular brick configuration.
Bricks configured using a story aren’t bound to that story: changing the story afterwards won’t affect the bricks created using that story, much like changing a cookie cutter shape won’t affect cookies already baked.
Read the Stories documentation.
Embed
Embed bricks allow you to embed the content of a page inside other pages. In this case, changing the original page will affect all the pages embedding it, updating them accordingly.
This provides a single source of truth, useful for elements like CTAs that you want to change everywhere on your website simultaneously.
Read the Embed documentation.
Header and Footer
Some layout elements, like header and footer, are shared across all pages of a website.
It’s usually better not to use an embed for these elements to avoid triggering a fetch of these header and footer entities for every page during the build process. Instead, it’s more efficient to have two dedicated <PageViewer>s in the layout rendering the children routes, as seen in the starter projects scaffolded by the CLI.
You can create the header and footer pages under a dedicated pageType with isEntity set to true. This makes them visible under the “Entities” tab rather than among all other pages.