4 ms·

I'm having a brain freeze here. How do you render a DOM on the server and then push it out to the client? Convert in memory DOM to a text/html representation be

I'm having a brain freeze here. How do you render a DOM on the server and then push it out to the client? Convert in memory DOM to a text/html representation before sending?

williamcotton 13y ago
You could use something like Phantom JS. To iterate a point in the article, a number of client-heavy sites built on Angular and Ember have been rendering their content on the server-side to be presented to crawlers like the Googlebot for SEO purposes.
- michaelwww 13y ago
  I understand node.js with V8 and also Phantom JS but how does a client browser view the DOM rendered on the server is what I'm asking. I'm guessing it gets rendered and serialized to JSON for transport, but I could be over-thinking it. Server side rendering is the same as it ever was, just with new tools.
  - hackerboos 13y ago
    >I understand node.js with V8 and also Phantom JS but how does a client browser view the DOM rendered on the server is what I'm asking. It's returned in the request as HTML if the USER_AGENT matches Googlebot just like it would in a normally non-SPA web app.
    - michaelwww 13y ago
      Then I don't understand the problem with SEO because we can feed the crawlers whatever HTML is relevant for search engines
      - williamcotton 13y ago
        The issue is that frameworks like Angular and Ember generate markup AFTER the HTTP GET response has been returned. If a crawler executes the web page without a full Javascript context it will miss out on the intended content.
frontendbeauty 13y ago
There are a few options. Easiest is to just render HTML strings on the server, not actual DOM. But, you can also use a DOM implementation if you want to, like jsdom or PhantomJS, and then capture the outerHTML of an element as an HTML string to serve. But, that is slower. React.js has a nice middleground approach; it has a fast pure-JavaScript DOM abstraction that can emit either DOM (browser) or HTML (server).
- michaelwww 13y ago
  > Easiest is to just render HTML strings on the server That's old school way. Sometimes old ways are presented as new, which confuses me. > then capture the outerHTML of an element as an HTML string to serve That makes sense. Do the fancy building on the server and then convert it for transport > React.js That sounds interesting. You answered my question enough that I can do more research. Thanks.
wmf 13y ago
Yes, you generate HTML and send that to the browser.

I'm having a brain freeze here. How do you render a DOM on the server and then push it out to the client? Convert in memory DOM to a text/html representation before sending?

williamcotton 13y ago

You could use something like Phantom JS. To iterate a point in the article, a number of client-heavy sites built on Angular and Ember have been rendering their content on the server-side to be presented to crawlers like the Googlebot for SEO purposes.

michaelwww 13y ago
I understand node.js with V8 and also Phantom JS but how does a client browser view the DOM rendered on the server is what I'm asking. I'm guessing it gets rendered and serialized to JSON for transport, but I could be over-thinking it. Server side rendering is the same as it ever was, just with new tools.
- hackerboos 13y ago
  >I understand node.js with V8 and also Phantom JS but how does a client browser view the DOM rendered on the server is what I'm asking. It's returned in the request as HTML if the USER_AGENT matches Googlebot just like it would in a normally non-SPA web app.
  - michaelwww 13y ago
    Then I don't understand the problem with SEO because we can feed the crawlers whatever HTML is relevant for search engines
    - williamcotton 13y ago
      The issue is that frameworks like Angular and Ember generate markup AFTER the HTTP GET response has been returned. If a crawler executes the web page without a full Javascript context it will miss out on the intended content.

frontendbeauty 13y ago

There are a few options. Easiest is to just render HTML strings on the server, not actual DOM. But, you can also use a DOM implementation if you want to, like jsdom or PhantomJS, and then capture the outerHTML of an element as an HTML string to serve. But, that is slower. React.js has a nice middleground approach; it has a fast pure-JavaScript DOM abstraction that can emit either DOM (browser) or HTML (server).

michaelwww 13y ago
> Easiest is to just render HTML strings on the server That's old school way. Sometimes old ways are presented as new, which confuses me. > then capture the outerHTML of an element as an HTML string to serve That makes sense. Do the fancy building on the server and then convert it for transport > React.js That sounds interesting. You answered my question enough that I can do more research. Thanks.

wmf 13y ago

Yes, you generate HTML and send that to the browser.