React-styleguidist: Use `renderToStaticMarkup` in when running build.

Created on 11 Apr 2016  路  10Comments  路  Source: styleguidist/react-styleguidist

Not sure how feasible this is, but could the style guide be statically rendered into the index.html using ReactDOMServer when compiled with the build option? Then rendered again via ReactDOM to hook up the events.

This could be useful to have static output.

enhancement help wanted

Most helpful comment

@mik01aj good point, I'll take a look.
I'd still be interested to see how much better a static page loads though. As @sapegin said, if it's a fairly straightforward update I'll submit a PR.

I'm not sure if theres any real SEO impact thought. React does state you'd use renderToStatic for this very reason, but my understanding is that most bots execute js and wait for the page to load anyway, so this may be a non issue.

All 10 comments

How is it better than styleguidist build?

I guess load time for end users would be a factor for a large number of complex components. Also so bots can crawl. I guess for the same reasons as you'd want to pre-render on the server.

I don鈥檛 ;-) But feel free to submit a pull request if it鈥檚 not very complicated to implement.

@marklundin in React 15, the HTML should be more lightweight. Do you use it?

And I think that long load time is caused mostly by #86. (If the page opens significantly faster in FF, then it's this one)

@mik01aj good point, I'll take a look.
I'd still be interested to see how much better a static page loads though. As @sapegin said, if it's a fairly straightforward update I'll submit a PR.

I'm not sure if theres any real SEO impact thought. React does state you'd use renderToStatic for this very reason, but my understanding is that most bots execute js and wait for the page to load anyway, so this may be a non issue.

I'm very interested to have a static rendering, because I'm making a styleguide for an application which is not in React. It would be very cool to have a static output which can be copied/pasted, without the React clutter. How would be the best way to do that?

I'm also interested in this and might give it a try.

@okonet Awesome! Unfortunately I have no experience with static rendering.

Only some bots execute js (google spider does for example), but most of them don't wait for ajax calls to finish. I say most because I don't know any of them that do wait.

Static rendering is the MUST for SEO optimization if you fetch data from a server using ajax and dynamically generate HTML afterward. Otherwise, it can improve the first-time-loading experience and allow your page to be cached more efficiently.

In any case, it is nice to have such capability.

We have an unfinished branch #330 but I think @kof didn't have time last time. I'd like to push it, though.

Was this page helpful?
0 / 5 - 0 ratings