Server-side rendering #1394
Server-side rendering #1394
Conversation
To server-side render, we need to import our routes file in iris, i.e.
in a Node context. The issue is that in a Node context window is
undefined, navigator is undefined, etc. etc.
I removed everything that requires window access from the import path
when importing routes.js, while making sure the app still works as
expected.
This patch means we can `const App = require('../src/routes')` from Iris
which sets us up to do SSR!
These changes make it possible to create a Redux store on the server with the server-side Apollo client and render our App in Node.
|
I've got a first working version of SSR!
Notice the JavaScript disabled being ticked. Lots of things still missing but I think we'll be able to make it work. |
|
Mind trying this locally @brianlovin? # Install new deps
yarn
# Build a new version of the client
yarn run build:client
# Run iris, forcing it to serve the SSR'd client
DEV_SSR=true yarn run dev:irisNow visit
|
|
Working great! |
|
What do you need me to test? I've tried navigating to most pages and doing cold starts on most pages - seems to be working |
|
Nothing else to test, just gotta iron out some last bits then this should be ready to go! |
|
The new homepage on The old homepage with SSR on the same connection has the first meaningful paint after 1.2s. 😱 😱 😱
|
mxstbr
force-pushed
the
sweet-sweet-seo
branch
from
837fcd2
to
73e6297
Compare
|
Based on the above numbers I want to ship this before I publish my blogpost. 😅 Keep pushing it out, but after this is shipped I'll publish it for sure! Got through that ugly af merge with master, everything is still working. Now I gotta make sure the client-side rehydration is working as intended and not re-rendering, and then I have to implement some meta tags to make sure Google doesn't index |
mxstbr
force-pushed
the
sweet-sweet-seo
branch
from
d97fa3c
to
208b984
Compare
|
Sorry maybe I phrased that badly. DO NOT USE The only only only reason to use Would appreciate a follow-up commit to make that clearer in the docs if you want to rephrase it! |
|
Haha gotcha, will rephrase that :) |
|
I fucked up the Babel merge, deploy didn't go through. Some or other plugin is missing, one minute... |
|
NEW DEPLOY IS UP, TEST THE SHIT OUT OF THIS BABY THEN 🚢 https://spectrum-vcdymaxhmu.now.sh/ |
|
Testing now. Initial notes is that our thread fetching is very slow all of a sudden. Even when viewing a community page directly. But that's unrelated to this branch. |
|
Everything I can think to test is working great man! |
|
On /notifications we don't update the
|
|
Fixed meta tags in 761d1a5.
|
|
I'm going to bed soon, feel free to deploy and alias all those together, but merge this one first! |
|
To be honest I'm a bit nervous to ship this immediately before you go to bed :P |
|
If we merge it now could you stay up for an hour or so just to make sure things work? Don't want to keep you up though, we can do it tomorrow if you want and I'll deploy those other two PRs separately |
Worst case scenario just revert to the last iris deploy; it's not like we're running irreversible migrations or anything! 😊 (seriously, you shouldn't feel blocked by me) That being said, I'll be up for a couple of hours if shit really hits the fan just call me +436642324261. |
|
Alright. Let's do this shit. |
|
I think we accidentally merged in a deleted file. Removing quickly. |
|
Running locally
|
|
I've run |
|
That error occurs because |
|
This is an upstream issue, it'll work on deploy: facebook/create-react-app#3041 (have to |
|
Great, merging everything in! Could you approve those other PRs? |
|
YESSSS FINALLY!! |
react-helmetoutputting default meta tags on the server