Fixes #651 - Serialize only input and state on top-level server-rendered UI components #672

patrick-steele-idem · 2017-04-18T17:12:29Z

For context, please see Issue #651 - Proposal: serialize only input and state on top-level server-rendered UI components #651

This Pull Request introduces some important changes to Marko:

Only the data (including state, input and properties added to the UI component instance) for top-level UI components is serialized down to the browser (previously, this data was serialized for every UI component rendered on the server)
When the page boots in the browser, the top-level UI components are "partially" re-rendered using the serialized data
As part of the partial re-render, the rendering logic executes but the DOM is not updated and no VDOM nodes are actually created (the partial re-render is only used to mount nested UI components)
NOTE: If a top-level UI component is "split" (that is, rendering logic is not sent down to the browser) then the old behavior will be continued
The out.global object is not serialized, but specify properties can be whitelisted to be serialized. For example, to have the out.global.apiKey and the out.global.locale properties serialized you would do the following:

template.render({
        $global: {
            serializedGlobals: {
                apiKey: true,
                locale: true
            }
        }
    }, res);

There is a chance that this might break existing apps. To revert back to the old behavior on a page-by-page basis you can do the following:

<marko no-browser-rerender />

<html>
  ...
</html>

…-level UI components in the browser

…rerender

…-651

…globals on re-render

… early mount of UI components in async fragments

coveralls · 2017-04-18T17:28:11Z

Coverage increased (+0.03%) to 90.296% when pulling 6ff3706 on issue-651 into 9604a85 on master.

patrick-steele-idem added 18 commits Apr 5, 2017

Fixes #651 - Only serialize top-level component data and rerender top…

5c67def

…-level UI components in the browser

4.3.0-beta

9809dfb

Fixed ServerComponent

c4bcd01

4.3.0-beta.0

ae2b3e6

Added more tests for #651

3073225

Optimization for #651 - Don't bother creating VDOM nodes for browser …

73c3c19

…rerender

Added 'use strict'

6655394

Added 'use strict' for node v4 compatibility

07d4b75

4.3.0-beta.1

17df9cd

Added test for component globals

6e14ec1

Fixes #670 - serialized and retained globals

1c82c5a

Merge branch 'master' of https://github.com/marko-js/marko into issue…

75588a0

…-651

mocha describe should match filename

25c7790

Final fixes for #670 - Add support for serialized globals and retain …

3d1ceab

…globals on re-render

4.3.0-beta.2

8a6735c

Changes related to #670 - Globals must be serialized earlier to allow…

77b8613

… early mount of UI components in async fragments

Improved docs for SSR

f1a1fe5

4.3.0-beta.3

6ff3706

patrick-steele-idem merged commit 845c177 into master Apr 18, 2017
3 checks passed

DylanPiercey deleted the issue-651 branch Mar 10, 2018

mlrawlings mentioned this pull request May 16, 2018

hydration not working alongside server-only onCreate #1043

Closed

Fixes #651 - Serialize only input and state on top-level server-rendered UI components #672

Fixes #651 - Serialize only input and state on top-level server-rendered UI components #672

patrick-steele-idem commented Apr 18, 2017

coveralls commented Apr 18, 2017 •

edited

Fixes #651 - Serialize only input and state on top-level server-rendered UI components #672

Fixes #651 - Serialize only input and state on top-level server-rendered UI components #672

Conversation

patrick-steele-idem commented Apr 18, 2017

coveralls commented Apr 18, 2017 • edited

coveralls commented Apr 18, 2017 •

edited