Pages can be rendered on your website either by using the default plugins, or by using a simple React component (both included in the
Let's see in more detail how and we we can utilize each approach.
Using default plugins
If you are not already familiar with how plugins work, we recommend you first take a look at the Plugins Crash Course before reading this article.
With a default Webiny project, you get everything set up for you in the
apps/site app. But if you want to setup your own app and register those plugins manually, you can import them from
This file contains a set of plugins that sets up automatic data prefetching and rendering while the user is navigating your website. With that, the included plugins also do the following:
Register render plugins for Page Builder elements
When creating pages via the Page Builder, you are using page elements (e.g. Text, Image, Form, ...), which are registered in the system via plugins. In terms of rendering, every element has to have two plugins, one that defines how it's rendered in the actual Page Builder, and the other that defines how it's rendered on the website, which is precisely what is included in this set of plugins.
Tracks links that are present on the page being viewed, and fetches the content of those linked pages in advance. By doing so, we populate Apollo Client cache which in turn enables smooth transitions while the user is navigating your website.
<head/> portion of the page
For SEO purposes, it fetches basic website information like title or default OG image, and populates the
<head/> portion of the page with it.
To check out the actual code, click here.
Page React component
Page React component is useful when you want to programmatically include a page, for example, on a custom route. You can even use this component if you want to bring the Page Builder app into your existing React app (that wasn't created with Webiny at all).
The component can be imported like so:
You can then render any published page by simply passing an adequate set of props to the imported
Page component, for example:
This will automatically fetch the content for the published page that has "/my-awesome-page" set as its URL via the Page Builder.
More information on publishing pages and page revisions can be found here
The following code shows a simple component in which we utilize the
Manually passing the page data
When you pass the
url prop to the
Page component, fetching of data is abstracted from you.
But in some cases, you might want to fetch the page data manually and that's when you can utilize other props.
Consider the following example:
GET_PUBLISHED_PAGE GraphQL query that we've used to fetch the page data. Very convenient if you want to be sure that all of the relevant page information gets retrieved, which the
Page component will internally utilize.
If you just want to render the page content explicitly, you can also utilize the
content prop allows you tu literally just render the page content. The following example shows how to do it:
Existing React apps
As mentioned, the
Page React component can also be used if you want to bring the Page Builder app into your existing React app (that wasn't created with Webiny at all). If that is your case, when importing the Page Builder plugins, it's best to just manually import only the functionality that's actually needed.
Consider the following import statement:
This will import just the default set of plugins that define the rendering of page elements. More importantly, this way we didn't import the plugin that's responsible for automatic page fetching and rendering while the user is navigating your app, leaving you free to rely on your existing routing options that you might already have in place.
The following props can be passed to the
Page React component.
|URL of the page you wish to render. Always renders the published page revision.|
|Revision ID of the page you wish to render. Can render unpublished page revisions too.|
|Renders a published page revision which is a child of the provided parent ID.|
|Instead of relying on the |
|Allows you to pass page content directly. Useful if you just want to render the page content, without rendering the layout and setting appropriate |