Server-side rendering #1394

mxstbr · 2017-08-21T09:43:11Z

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.

mxstbr · 2017-08-21T12:09:59Z

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.

mxstbr · 2017-08-24T22:18:05Z

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:iris

Now visit localhost:3001 with JavaScript disabled (DevTools -> three dots -> settings -> scroll to bottom -> disable javascript) and the ServiceWorker deleted (DevTools -> Application -> ServiceWorkers -> Unregister) and you should see the page even though no JavaScript runs! 🎉

Note: I'll likely end up turning off the ServiceWorker caching again because it doesn't make any sense with server-side rendering, still thinking about this.

brianlovin · 2017-08-24T22:23:05Z

Working great!

brianlovin · 2017-08-24T22:23:23Z

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

mxstbr · 2017-08-25T03:38:21Z

Nothing else to test, just gotta iron out some last bits then this should be ready to go!

mxstbr · 2017-08-30T19:25:26Z

REMINDER FOR MYSELF

Reset the last commit 837fcd2 before merging in the changes from #1400 since I moved those over manually!

mxstbr · 2017-08-31T10:00:19Z

The new homepage on spectrum.chat on a fast 3G connection (throttled by DevTools) has the first meaningful paint after ~5-6s.

The old homepage with SSR on the same connection has the first meaningful paint after 1.2s.

😱 😱 😱

Note: The homepage is likely the only page anybody will see SSR'd, as after that the ServiceWorker kicks in and caches the bundle. The next time they visit the page they'll get the bundle served from their browser and they'll see the loading indicators immediately, no SSR happening there.

mxstbr · 2017-08-31T10:36:11Z

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 /notifications et al. and theeeeen we might be good to go?

mxstbr · 2017-09-07T18:50:35Z

Sorry maybe I phrased that badly.

DO NOT USE localhost:3001 UNLESS YOU'RE WORKING ON SSR ITSELF

The only only only reason to use localhost:3001 is to develop SSR itself, otherwise always always stick with your current workflow and just use localhost:3000. Literally nothing changes from your current setup, nothing at all. Keep it as-is!

Would appreciate a follow-up commit to make that clearer in the docs if you want to rephrase it!

brianlovin · 2017-09-07T18:51:11Z

Haha gotcha, will rephrase that :)

mxstbr · 2017-09-07T18:52:45Z

I fucked up the Babel merge, deploy didn't go through. Some or other plugin is missing, one minute...

mxstbr · 2017-09-07T19:02:00Z

NEW DEPLOY IS UP, TEST THE SHIT OUT OF THIS BABY THEN 🚢 https://spectrum-vcdymaxhmu.now.sh/

brianlovin · 2017-09-07T19:04:39Z

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.

brianlovin · 2017-09-07T19:11:57Z

Everything I can think to test is working great man!

brianlovin · 2017-09-07T19:13:31Z

Before we deploy and alias can we piggyback #1431 and #1430 into the release?

brianlovin · 2017-09-07T19:14:31Z

On /notifications we don't update the <title>:

mxstbr · 2017-09-07T19:25:40Z

Fixed meta tags in 761d1a5.

Note that it's very imperfect meta tags right now, I'll be doing another pass over those after we merge this probably. Let's shipit for now though.

mxstbr · 2017-09-07T19:26:08Z

I'm going to bed soon, feel free to deploy and alias all those together, but merge this one first!

brianlovin · 2017-09-07T19:26:43Z

To be honest I'm a bit nervous to ship this immediately before you go to bed :P

brianlovin · 2017-09-07T19:27:55Z

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

mxstbr · 2017-09-07T19:41:26Z

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?

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.

brianlovin · 2017-09-07T19:42:19Z

Alright. Let's do this shit.

brianlovin · 2017-09-07T19:43:56Z

I think we accidentally merged in a deleted file. Removing quickly.

brianlovin · 2017-09-07T19:46:34Z

Running locally yarn run dev:client returns this error:

brianlovin · 2017-09-07T19:46:56Z

I've run yarn to get the latest packages, btw

brianlovin · 2017-09-07T19:48:16Z

That error occurs because yarn run dev:client opens localhost:3000 - everything works just fine if I load localhost:3001, but I thought we weren't doing that?

mxstbr · 2017-09-07T19:51:25Z

This is an upstream issue, it'll work on deploy: facebook/create-react-app#3041 (have to rm -rf node_modules locally)

brianlovin · 2017-09-07T19:52:38Z

Great, merging everything in! Could you approve those other PRs?

mxstbr · 2017-09-07T19:53:35Z

YESSSS FINALLY!!

mxstbr added 2 commits August 21, 2017 09:22

Make frontend Redux setup server-side renderable

f3d3ff7

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.

mxstbr added the WIP: Building label Aug 21, 2017

mxstbr had a problem deploying to PR staging August 21, 2017 09:43 Error

First working version of serving HTML

8d06e4a

mxstbr added 9 commits August 23, 2017 11:54

Use actual index.html from client, implement react-helmet SSR

7197b16

Refactor

5f33a9b

Fix src env variable

0645bf3

Fix comment

3a5f56c

Modularization

1c91323

Maybe implement rehydration?

036aff7

Make it work after building

74e1852

Swithc to localstorage memory

c31d96c

localstorage noop

73e6297

mxstbr mentioned this pull request Aug 29, 2017

Splash page marketing update #1400

Merged

mxstbr force-pushed the sweet-sweet-seo branch from 837fcd2 to 73e6297 Compare August 31, 2017 10:07

Merge branch 'master' into sweet-sweet-seo

26e4cdc

mxstbr added 3 commits August 31, 2017 14:27

Ignore vim .swp files

84c2c2d

Fix <Redirect />s

0830fc6

Add rel="nofollow"

208b984

mxstbr changed the title ~~WIP Server-side rendering PoC~~ Server-side rendering Aug 31, 2017

mxstbr force-pushed the sweet-sweet-seo branch from d97fa3c to 208b984 Compare August 31, 2017 13:09

Update server-side-rendering.md

e55abe8

mxstbr added 2 commits September 7, 2017 21:24

Fix babel

11d04dc

Add meta tags to notifications

761d1a5

brianlovin previously approved these changes Sep 7, 2017

View reviewed changes

Remove unused mutation file

6428c42

brianlovin dismissed their stale review via 6428c42 September 7, 2017 19:50

brianlovin approved these changes Sep 7, 2017

View reviewed changes

brianlovin merged commit 60ae8c0 into master Sep 7, 2017

brianlovin deleted the sweet-sweet-seo branch September 7, 2017 19:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server-side rendering #1394

Server-side rendering #1394

mxstbr commented Aug 21, 2017 •

edited

Loading

mxstbr commented Aug 21, 2017

mxstbr commented Aug 24, 2017

brianlovin commented Aug 24, 2017

brianlovin commented Aug 24, 2017

mxstbr commented Aug 25, 2017

mxstbr commented Aug 30, 2017

mxstbr commented Aug 31, 2017 •

edited

Loading

mxstbr commented Aug 31, 2017

mxstbr commented Sep 7, 2017 •

edited

Loading

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

mxstbr commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

mxstbr commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017 •

edited

Loading

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017 •

edited

Loading

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

Server-side rendering #1394

Server-side rendering #1394

Conversation

mxstbr commented Aug 21, 2017 • edited Loading

mxstbr commented Aug 21, 2017

mxstbr commented Aug 24, 2017

brianlovin commented Aug 24, 2017

brianlovin commented Aug 24, 2017

mxstbr commented Aug 25, 2017

mxstbr commented Aug 30, 2017

mxstbr commented Aug 31, 2017 • edited Loading

mxstbr commented Aug 31, 2017

mxstbr commented Sep 7, 2017 • edited Loading

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

mxstbr commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

mxstbr commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017 • edited Loading

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017 • edited Loading

brianlovin commented Sep 7, 2017

mxstbr commented Sep 7, 2017

mxstbr commented Aug 21, 2017 •

edited

Loading

mxstbr commented Aug 31, 2017 •

edited

Loading

mxstbr commented Sep 7, 2017 •

edited

Loading

mxstbr commented Sep 7, 2017 •

edited

Loading

mxstbr commented Sep 7, 2017 •

edited

Loading