Please provide some more detail on the boundary between server side and client side rendering

[cameronbraid]

I make heavy use of marko js purely client side at the moment, and I think its a great framework.

I am looking into the feasibility of using marko on the server.

How does marko identify which components are rendered on the server. Is there a way to explicitly make a component render on the client only ?

I see in the docs that 'top-level UI components' are rendered and their data serialised. What is a 'top-level UI component' ?

What I am trying to achieve is to render the main html (page layout, header logo, top nav etc..), and the above-the-fold components on the server (they would pull their data server side using fetch). Then once the UI has been assembled on the client the below-the-fold components would pull their data from the server using fetch.

[jasonmacdonald]

While this is not a complete answer, you should have a look at https://markojs.com/docs/components/#split-components to start. Also the docs for https://markojs.com/docs/server-side-rendering/ can also be useful.

To try and answer your scenario, I'll explain one way I have done it. When I want something to only render in the browser, but not the server, I use a Webpack environment variable of BROWSER to flag content to be excluded from the code for my server-side build. Note that to do this, it requires that both your server-side and browser-side code needs to be compiled as two separate outputs (which is useful anyway since the compiled server-side code can be slightly faster). Then you use the one to be run on the server, and other to be used for the browser rendering. Hope that makes sense.

The "top level component" is basically whatever you would call your "app" component, it's the parent component that is called first, which then includes all the other components. It's the highest component in your component hierarchy. So, it's whatever tag you require in and use .render() on to start the whole Marko rendering process.

I should also mention that, unless you use something like Split components, or do flagging as I mentioned above, browser side and server side rendering use the exact same components. They are pretty much interchangeable. It's more about when you want the specific functionality of only to render on one side or the other that there's a difference.

[jasonmacdonald]

I'll also just add that "above-the-fold" is a very hard thing to nail down statically on the server-side since the concept of "the fold" is dependant on the device, screen orientation, aspect ratio and many more factors. You'll like find that you need to decide on some acceptable base height to make that call. And if the content of the components above the fold has dynamic content, thereby making their rendered height variable, the task is even harder. Not trying to rain on your parade, but I have tried to go down that road and it's a much tougher task than you might think since the server side has no information about the client or its dimensions. At least not without something rendering first and passing that info back.