Update: the latest release is v0.26.2
This release introduces the new Prerender feature, which is the culmination of months of work by many individuals across the community. Prerender in Redwood is opt-in (simply add a prop to a Route!) with built-in support that âjust worksâ â itâs fully compatible with other Redwood features like Cells. This is the first new feature from the Redwood at Scale initiative, which will bring many future improvements to application performance.
We think youâre going to like it 
This release contains Breaking Changes and requires code modifications. See the âBreakingâ and âHow to Upgradeâ sections for more information.
v0.26.0 Highlights 
Redwood Prerender
Both @dac09 and @peterp carried this one to the finish line. Well done, you two!
Although prerendering is as easy as adding a prerender prop to a Route, thereâs more you can do and need to know:
- Redwood Prerender Doc: how to, helpers, and specific considerations
- For reference, youâll want to understand how Redwood is now automatically handling
App.jsmounting to the DOM. And for complex cases, you might need to customizeindex.js. Take a look at the Custom Index Doc - For a full walk-through of Redwood Prerender, including discussion and Q&A, watch this YouTube Video from the most recent Meetup
Ready to get started?
All new Redwood projects are ready for prerendering once theyâre installed! 'Cause thatâs the Redwood way 
If youâre upgrading your project, start with the âManual Code Modificationsâ section below before you set up prerender on your Routes.
Nhost Auth Provider
The fine folks at Nhost have added a Redwood Auth provider. Check it out!
- Redwood Nhost Auth Doc
- Learn more about Nhost Auth
Changed
- Docs: link to the roadmap in readme #996 by @jtoar
- Router:
<Route redirect="">#1704 by @Tobbe - Router: Generate globals for routes #1744 by @Tobbe
- Seed: Use createMany in Seed database example #1776 by @simoncrypta
- Prisma: Prisma: use new âprismaâ package to replace â@prisma/cliâ #1800 by @thedavidprice
- Auth: Ethereum auth update to v0.2.1 #1807 by @pi0neerpat
- Internal: Update typescript lint rule for no-unused-vars #1808 by @jangxyz
- Internal: Make ESLint configuration aware of âenv.â #1827 by @peterp
- Internal: Improve/template and auth setup tests #1834 by @dac09
- Internal: Editorconfig and VSC recommendation changes #1841 by @Krisztiaan
- Internal: Remove bundlesize dependency #1844 by @Krisztiaan
- Docs: Add Gravatar to the list of Tomâs accomplishments #1813 by @bl-ue
Added
- Prerender: Render landing/marketing/static pages + Private page whileLoading #1641 by @dac09
- Prerender: image support #1721 by @dac09
- Prerender: Better messages when no routes marked with prerender #1821 by @dac09
- Prerender: Hide entry.js | Add setup command to restore #1842 by @dac09
- Prerender: Changes for prerender release #1855 by @dac09
- Auth: Nhost Auth 1.0 provider #1725 by @nunopato
- CSS: Minify CSS in production builds #1697 by @dac09
- Internal: Add Cypress Step6 Test #1780 by @wafuwafu13
- Internal: New contributor workflow #1792 by @dac09
- Internal: Add curly rule for blocks #1836 by @Krisztiaan
- Docs: Docs: Update contributor workflow to yarn rwt link #1803 by @jtoar
- Docs: Update CONTRIBUTING.md
rwt linkdocs #1852 by @dac09 - TS: Add types to Flash, clean up some logic #1824 by @Krisztiaan
Fixes
- Prerender: Fixes to crwa template for prerender #1819 by @dac09
- Prerender: Adds types for pageLoadingContext | Fix for pageLoader during prerender #1832 by @dac09
- Prerender: replace instances of web/src/index.js with web/src/App.js #1857 by @thedavidprice
- Prisma: use new âprismaâ package to replace â@prisma/cliâ #1800 by @thedavidprice
- CLI: Passthrough error codes on cli failures #1791 by @dac09
- CLI: Remove backticks #1826 by @adriatic
- CLI: Fix
dataMigratecommand import error via babel register #1845 by @dac09 - CLI: fix
rw testcommand when run from dir other than root and upgrade execa #1846 by @thedavidprice - Storybook: Donât open storybook when --open=false is given #1795 by @jvanbaarsen
- Template: Lint the create-redwood-app template #1822 by @peterp
- TS: Fix Router TS types #1823 by @Tobbe
- Internal: E2E if path to project given, use the installed packages #1837 by @thedavidprice
- Internal: webpack config use || instead of ?? #1881 by @Tobbe
- Generators: Fixes generating scenarios for relations where the field name is different than the relation name #1848 by @cannikin
- Tests: Run Teardown after each test #1818 by @jvanbaarsen
Breaking
To offer built-in Prerender support, Redwood now handles mounting the React <App /> to the DOM internally. This enhancement required breaking changes to the existing web/src/index.js.
- in
web/src/index.js, the React root element is now a component. References to the browser window, e.g.document.will throw an error web/src/index.jshas been renamed toweb/src/App.js
To learn more about how Redwood is automatically handling mounting, see this Custom Web Index doc. For some applications with specific index.js requirements, this document provides customization instructions.
How to upgrade Redwood to the latest v0.26
IMPORTANT: Skipping versions when upgrading is not recommended and will likely cause problems. Do read through all Release Notes between your current version and this latest version. Each minor release will likely require you to implement breaking change fixes and apply manual code modifications.
Manual Code Modifications
1. Rename web/src/index.js to web/src/App.js
2. In web/src/App.js, convert the React root element to a component named App
Any references to the browser window need to either be removed or wrapped in a conditional like isBrowser (see step 4 for more about the Prerender utils Redwood provides to make checking for these cases easier). For existing Redwood projects, this means at a minimum youâll need to remove ReactDOM.render(...document.getElementbyID()...
-import ReactDOM from 'react-dom'
import { FatalErrorBoundary } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'
import './index.css'
-ReactDOM.render(
+ const App = () => (
<FatalErrorBoundary page={FatalErrorPage}>
<RedwoodApolloProvider>
<Routes />
</RedwoodApolloProvider>
</FatalErrorBoundary>,
- document.getElementById('redwood-app')
)
+ export default App
Depending on other custom implementations to your projects App.js, you may need to make additional changes or, in some cases, even create a custom web/src/index.js to handle Reacting mounting. If so, see the Custom Web Index doc
3. Update web/src/index.html to support prerender
This lets Redwood know where to place your pre-rendered HTML.
...
<body>
<div id="redwood-app">
+ <%= prerenderPlaceholder %>
</div>
...
4. Special Prerender Considerations
If youâre ready to take Prerender for a spin, now is the time to look through the Redwood Prerender Doc, especially the section âPrerender Utilsâ.
Sometimes youâll need granular control over what gets prerendered. For example, if youâre using Netlify Identity, you can only initialize it on the browser. Youâll need to use the isBrowser helper in your web/src/App.js:
+ import { isBrowser } from '@redwoodjs/prerender/browserUtils'
...
+ if (isBrowser) {
netlifyIdentity.init()
+ }
Donât worry, we donât expect you to know how to identify every case like this. You can check using the following debugging flow:
- First run
yarn rw build web. If elements canât run on Node.js, theyâll throw errors here, which will show you what needs specific handling. - Once you can build successfully, then run
yarn rw prerender --dry-run. You may get a lot of warnings, which is fine. Keep a lookout especially forerror, which indicates other elements that require special handling.
Upgrade Packages
Run the following command within your Appâs directory:
yarn rw upgrade
Need help or having trouble upgrading packages? See this forum topic for manual upgrade instructions and general upgrade help.
Redwood Releases on GitHub
You can see all Redwood release notes and version history on GitHub