Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: How to only have preloaded html for certain routes #112

Closed
wallslide opened this issue Jan 11, 2018 · 4 comments
Closed

Question: How to only have preloaded html for certain routes #112

wallslide opened this issue Jan 11, 2018 · 4 comments
Labels

Comments

@wallslide
Copy link

I have a create-react-app-based webapp with several different routes, including my homepage at / and a search page at /search . If I setup react-snap with crawl: false, and include: ["/"], then how do I prevent my homepage content from flashing on the screen when a user tries to go directly to a /search url? Thanks.

@stereobooster
Copy link
Owner

From what you described the issue is flash of index.html not crawling. I suspect there is no search/index.html on a filesystem, otherwise, this is a bug. Flash can be caused by a configuration of a web server or by a configuration of a service worker. If you configured a web server to use index.html as a fallback, you need to change it to 200.html (which is the same as index.html before prerendering). How to deal with service workers is described in README

Question: do you have a link to /search page? If no, you do not need crawl: false. If yes, why you do not want it to be prerendered?

@wallslide
Copy link
Author

wallslide commented Jan 11, 2018

You're right, there is no search/index.html. Basically, the pre-rendering is working properly for my homepage because I updated it to, but there are issues on my search page preventing it from working properly. That's why I'd like my homepage to show the pre-rendered react-snap content when someone visits it, but to just load as if react-snap didn't exist when going to a /search url.

As for why my search page isn't working, one big issue is that I am using https://github.com/contra/react-responsive to adjust which react components/structure to render based on the browser's width. Unfortunately that means that the pre-rendered version might not match up w/ the device that ends up viewing the content. On my hompage I switched to using pure-css based media queries so that the content is identical for both mobile and desktop devices, and I hope that I can do the same on my search url.

There also might be another issue with dynamic import statements, but I haven't dived into that yet.

There are also several other routes, like account-settings views and the like that I just don't want to pre-render.

@stereobooster
Copy link
Owner

There also might be another issue with dynamic import statements, but I haven't dived into that yet.

Want to remind you there is a section in Readme about it.

@wallslide
Copy link
Author

I was able to use 200.html as a fallback and everything is working. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants