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
How do I troubleshoot server rendering? #915
Comments
If you’re page is fetching blank then you have broken your SSR or hydration scheme. Razzle does not suffer from what you’ve described out of the box, in fact, it is used on SEO-focused sites like BBC.com. can you paste your server.js file? Are you fetching your data on the sever? |
Hi Jared, Thanks for the prompt reply, yes we do fetch data from a server. Here is my server.js
|
I can confirm that out of the box Razzle doesn't suffer from it, just loaded a clean install and using phantomjs none of the warning showed up, which means it's probably something some library we installed. Do you see anything obvious in the above? It feels like a wild goose chase at the moment! :-) |
So my suggestion (and maybe we need a troubleshooting guide in the docs about this) is to comment out as much as you can from The goal is to make sure that there is no blank white frame in the timeline area. After you get a proper render with no flashes, you should add back more and more of your old code. Take baby steps. This is quite easy to mess up if you are not careful. As for your specific case, I would start with removing all that google tag manager stuff, all of your CSS, as well as whatever code-splitting you are doing. Just get it to render and work backwards. Next, get Redux working. Then add back react-helmet, and then, once you think you got it right, double check by doing a Lighthouse test as well (Audits tab). Commit this state to a new branch so you can go back to it in the future. Next, add back your analytics scripts and check rendering again. Finally, attempt to add back code-splitting.
|
Ok, thanks for the awesome work with Razzle, and now for this. I'm going to Audit it nicely and report back. |
Of course, the first thing to check on any "empty" (not blank, that's an error ) seo page, is: does your page depend on |
Ah, all of my custom fonts are not getting loaded until much later. I'm loading my fonts through via CSS' @font-face {}.
|
@jaredpalmer I too have the same issue. Fonts and assets are not loaded in my client page. I have not added any webpack.config file in my application setup, which i cloned from your repo. I just taken the copy from your repo and installed npm modules , then i started using the application by running a npm start command. Please help me to resolve this issue. My App.css file looks like this.. @font-face { thanks inadvane :) |
Hello,
We've noticed a problem where if you log in to Google's Search console, and fetch as Google, the website is rendered as a blank page.
I've done some research, and some of it lead me to this article:
https://medium.com/@gajus/react-application-seen-as-a-blank-page-via-fetch-as-google-afb11dff8562
It's very likely the search engine, and fetch as google itself don't behave the same way, or else we would have lost rankings by now, nevertheless I would like to resolve this issue, as it would keep any website owner awake.
I have downloaded phantomjs, with the assumption it's the same as fetch as Google, and trying to render it returns a number of errors:
This problem may be as simple to resolve as changing the target browsers being compiled, however simply installing babel/polyfil and importing doesn't work.
Would anyone be able to point me in the right direction here?
The text was updated successfully, but these errors were encountered: