Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Themes: SSR testing branch #846

wants to merge 17 commits into from

Themes: SSR testing branch #846

wants to merge 17 commits into from


Copy link

@ehg ehg commented Nov 26, 2015


This PR is a playground for testing Server Side Rendering on the Showcase. It's full of hacks and test code, and is only intended for exploration of techniques, and to top-down test recently merged SSR related PRs.

Copy link
Member Author

ehg commented Nov 26, 2015

@mcsf @ockham — this may be a good space to test our shiny new redux actions/stores.

@@ -172,12 +173,27 @@ function boot() {
if ( config.isEnabled( 'oauth' ) ) {
LoggedOutLayout = require( 'layout/logged-out-oauth' );
} else {
LoggedOutLayout = require( 'layout/logged-out' );
LoggedOutLayout = require( 'layout/themes-logged-out' );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since themes-logged-out is a 'pure' render tree, we can't render into sections directly in our controllers. How do we update our routing & controllers to take this into account, and how do we make this generically usable?

@ockham ockham mentioned this pull request Nov 26, 2015
2 tasks
ockham and others added 6 commits November 30, 2015 12:46
Render themes/main on server

- Inject i18n mixin
- Init i18n
- Render themes/main

Allow localStorage on node

Add primary/tertiary elements to ThemesLoggedOutLayout

Use ThemesSelection for the logged-out design/ route

Stub things with NormalModuleReplacementPlugin

Make InfiniteList not depend on the DOM
It doesn't crash the browser any more, and there are no markup
difference warnings(!)

This commit needs tidying up, and contains some extraneous stuff, but:

- Trees must be the same for client and server, so only render
  themes-selection in client for logged out --HACK--
	* We may have to consider starting SSR logged out only on /themes. Routing &
	the current way of replacing whole sections in the DOM is
- We can't use React to render the whole `document`, so let's stick with
  Jade for now.
- Components with _instance vars updated to only update the instance id
  in componentDidMount, otherwise the server will increment on each
- Spinner moved to components for now, stubbing is only useful for
  components that don't get rendered on the first pass.
- `Main` moved to shared, and put directly in ThemesLoggedOutLayout
- Disabled the controller from rendering on client /design - otherwise
  boom, crash.
Moved most /design specific handling out of client/boot/index.js so
that other logged out routes will work as normal.

Layout parameters are being passed to the layout component via
setState(), which could be causing the problems with React failing
to reconcile that component with the server-rendered version.
seear and others added 11 commits November 30, 2015 14:44
Until we have a solution that allows rendering of entire React layout
depending on the route, move the necessary themes-layout props
inside the themes-logged-out component so that the client can immediately
render indentically to the server.

(Previously, the first client render of the themes-logged-out component
was empty.)
(Since Spinner comopnent has already been moved to shared). This
fixes a difference between the server and client renders.
If we're using our own layout and echewing routing for now, we can get
rid of some code in pages/index.js

We can also employ a poor man's tier routing, using a regex hack and
'dynamic' tier prop insertion.

/cc @seear
Removes a dependency for logged-out server-side rendering.
Themes search uses the url-search mixin, which causes the controller
to pass the search query down as a prop whenever it changes. Since
themes-logged-out is not using a controller, that does not happen.

This change sets state on search to cause a re-render, much like
tier selection.
@ehg ehg added this to the Themes: Future milestone Jan 8, 2016
@ehg ehg removed this from the Themes: Showcase M3-LoggedOut milestone Jan 8, 2016
Copy link

Closing for now since no activity in 6 months — feel free to re-open and continue discussing when the time allows or interest picks back up.

@lancewillett lancewillett deleted the try/node-webpack-stubbing branch May 13, 2016 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

None yet

5 participants