Prerender Part 1 & 2: Render landing/marketing/static pages + Private page whileLoading #1641
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ender-p1 * 'main' of github.com:redwoodjs/redwood: v0.23.0 GH Action PR Comment: Formatting add learn.rwjs.com repo to contributors (redwoodjs#1634) update PR Package Action formatting Updated All-Contributors Data (redwoodjs#1621) sync yarn.lock (redwoodjs#1632) Resolve promises in the console (redwoodjs#1619) Replace prisma deprecated fineOne() -> findUnique() (redwoodjs#1629)
|
Closes #217 |
dac09
force-pushed
the
feature/prerender-p1
branch
from
6cd517c
to
adf9644
Compare
|
This is awesome @dac09! Everything sounds good to me. My initial thought when we talked about getting this working was the prop name |
|
Thanks @cannikin! Yeah it does hydrate after the page loads, so more like a "partial render", that the browser then enhances to become more dynamic. Still quite a bit to do, but it's taking shape! |
peterp
reviewed
Feb 17, 2021
…dwood into feature/prerender-p1 * 'show/circular-dep-prerender' of github.com:redwoodjs/redwood: Use global instead of process.env. Update yarn.lock. Remove babel deps and organize devDeps. Fix references and deps. Add prerender to TS references. Interally use env-vars instead of helper functions to determine prerendering. Commit changes to show peterp
|
One more tweak needed :), template variables don't match. then I'll merge |
dac09
added a commit
to dac09/redwood
that referenced
this pull request
Feb 18, 2021
…rib-workspaces * 'main' of github.com:redwoodjs/redwood: Prerender Part 1 & 2: Render landing/marketing/static pages + Private page whileLoading (redwoodjs#1641)
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
How do you use this?
For pages you'd like to prerender add the prerender prop
In your redwood.toml, add
[web] port = 8910 apiProxyPath = "/.netlify/functions" + experimentalPrerender = trueNow when you build your redwood app, it will add an extra build step to prerender your pages.
You can also manually trigger prerendering with
If you have an existing app, some changes to your index.js and index.html file (see create-redwood-app template)
So far looking ok on:
bypass App.js (to limit how much we need to change), and only render pagesuseIsBrowserto detect if its in running in the browser, this will become very important (if you've tried some SSG stuff on next/express you probably recognise why). I'm not the biggest fan of this solution though<BrowserOnly>to bypass prerenderingTodo
yarn rw build webit doesn't show errors if it fails to prerender. This isn't that bad, because your app will still run. This is limitation of how we're doing Listr tasks I guess?Need help / still in progress:
- renderingwhileLoadingfor Private routesAfter a lot of hacking around with babel and tsmorph (thanks @aldonline) - modifying the router and the routes-autoloader plugin was the correct approach
getting babel-plugin-redwood-directory-import to play niceThanks @peterp
importing TypeScript pages in the router (is this a general problem, or an issue I just created?)unrelated issue, solved elsewhere
should we form a list of routes inside the prerender context separately instead of rendering<Routes/>? This feels like a workaround to me, just to makerouter.routes.homepage()work for example.Not relevant anymore, as we're rerendering the whole App
remove window from the rest of the codebase, so I can remove the window shim. While the shim works great with just redwood, it can start to show issues on external libraries because they think its running in the browserExecution flow is clear of window
Couple other things to note:
Out of scope for this PR, but important:
[ ] the way svgs are imported can be an issue[ ] image imports in general are an issue, because the currently build workflow is using webpack’s url-loader, we’d need to transition to something like https://github.com/ahalimkara/babel-plugin-import-static-files or https://github.com/cyrilwanner/react-optimized-image and remove the webpack plugin for it to work on both serverside and client side. This gives us other benefits, but requires changing how we recommend using images in redwood^^ Covered in Feature/prerender image support #1721