[docs] Using react-snapshot

[jessevdp]

Hi there, So sorry if this is a duplicate or just a plainly stupid question 🤷🏻‍♂️

I'm working on a project (that's already in production) where it would be really beneficial (SEO wise) to implement some sort of server/pre-rendering. However the app is already on the air on some basic LAMP stack server (Appache webserver) so it's not like there is room to write our own custom server etc.

For this reason it seems like a good idea to pre-render our pages. And this project [react-snap] just so happens to be listed as one of the best options to go to. Awesome! 🤘

Anyway, I toyed around for a bit, running react-snap from the command line (or as a post-build step) and watched the result.

I don't quite grasp how I should use this output, how to deploy it etc. Any chance anyone could fill me in here?

[stereobooster]

By default react-snap outputs in the same folder as your current project build folder (which you already deploy), so it should continue to work.

before

/src -(build step)-> /dist -(deploy step)-> /www

after

/src -(build step)-> /dist -(react-snap)-> /dist -(deploy step)-> /www

if you have different folder, than you need to copy initial folder first and copy over react-snap's output and deploy this folder.

[jessevdp]

What about the files that are generated? [200.html, 404.html] Do I need to tell my server to handle those routes in any specific way?

I guess my real question is what do all of these files mean? How should I use those?

[stereobooster]

you can use 404.html as 404 page - this is optional you can use 200.html as fallback page, for pages which are not possible to prerender, like pages behind login or if you have too many pages and decided to prerender some pages, but not all of them

[ddennis]

But how is 200.html used as a fallback? is this already handle by react-snap?

I am trying to understand the following:

If content is coming from a CMS and loaded at runtime. Serving the static/snapshot version will not show changes made since last snapshot. This will require a build everytime content changes, which requires build server.

Is it possible to only use the snapshot version for googlebot (SEO indexing)? Or is there another way to handle this? I saw an example modifying .htaccess to serve static version based on useragent.

I understand that if snapshot is not aligned with content, SEO will suffer.

Sorry for hijacking - let me know if this should be in its own issue.

[stereobooster]

But how is 200.html used as a fallback

You need to configure your server to respond with 200.html if there is no page (instead of 404 page).

This will require a build everytime content changes, which requires build server.

Yes this is static website generator, same as jekyll, hugo, gatsby etc.

Is it possible to only use the snapshot version for googlebot (SEO indexing)?

Not sure what you ask. Maybe you need something like this https://github.com/stereobooster/react-snap/blob/master/doc/alternatives.md#seo-only-server-prerenderers

[ddennis]

Thanks a lot, it makes sense - i misunderstood.

Was looking for a way to serve the static content to search engines robots and the javascript version to users.

[jessevdp]

you can use 404.html as 404 page - this is optional you can use 200.html as fallback page, for pages which are not possible to prerender, like pages behind login or if you have too many pages and decided to prerender some pages, but not all of them

This explanation really helped! Is this in the docs somewhere? That might be a good idea. Else I think this issue is closed. 🤘

[stereobooster]

No. I want to write better documentation, but do not have time for it