I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.
Related
I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.
Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?
Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?
Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?
I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.
I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!
It's important to understand different "kinds" of navigation.
If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).
If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only
There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....
I need to develop a Vue.js SPA where some of its pages need to be referenced by search engines.
I've read about multiple ways to make SPAs SEO-Friendly so I found the following solutions
Server-rendered pages
Prerendering
Since we have a lot of dynamic content to index, generating a static page for each "row" in the database seems not acceptable since we have hundreds if not thousands of content pages.
Creating multiple routes (one for users to visualize and one for bots to crawl)
This solution has been proposed by my manager and it interests me since it's more suitable for our case.
I found this article that illustrates the idea using another SPA framework
My question here is how can I detect that a crawler or an indexation bot have accessed our SPA in order to redirect it to our server rendered web pages and how to actually achieve that in Vue.js 2 (Webpack) ?
If you are concerned about SEO, the solution is to use SSR. Read through https://v2.vuejs.org/v2/guide/ssr.html#The-Complete-SSR-Guide.
If you already have server rendered webpages, as you mentioend in your question, then using SSR would be less work than keeping the Vue SPA and server app in sync. Not to mention, if the Vue SPA and server app show different content, this could hurt SEO and frustrate users.
Any method you use to target web crawlers can be by-passed, so there is no generic solution for this. Instead, try and focus on specific web crawlers, like Google's.
For Google, start by registering your app at https://www.google.com/webmasters. If you need to determine if the Google crawler visited your server, look at the user agent string; there are already other answers for that: Is it possible to find when google bot is crawling any urls on my site and record the last access time to a text file on server, https://support.google.com/webmasters/answer/80553?hl=en.
We have Rails app with Webpacker that serves just the initial HTML file, after which the client will download everything (inc. vue .js and .css) files.
Our problem is that we want to display something initial on the html so the user will feel as the site already loaded. This logic is in the main vuejs component. Is there a way to offline render this so it will be easily be embedded on our index page? instead of having to maintain and re-write this everytime?
It sounds like pre-rendering might be a better fit for you than full-on SSR. Since you're already rolling Webpack, there is a plugin that helps to that end called prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
The idea behind this plugin is that, as part of your build process, it prerenders the resulting static HTML of your SPA using Puppeteer (i.e. headless Chrome), and drops it into your static HTML folder. It maintains links to your SPA code so it's still fully functional, it's just fully rendered by the time the user hits it.
What I'd suspect you'd want to try is the following:
Add the prerender-spa-plugin to your webpack.config.js
Configure the plugin to prerender your initial route and any additional routes that are truly static
Output the resulting files to the folder your Rails app uses to distribute static assets (HTML, CSS, images, etc)
Going the pre-render route is actually technically superior to SSR for truly static routes like a landing page or marketing pages. You won't need to mess with a complex pre-render setup on your Rails server, you offload content distribution to the static folder (i.e. lesser load on your Rails server), and you still get to use all the benefits of your SPA.
That being said, if you strongly feel like you do need full-blown SSR, the generally "accepted" approach is rolling a Node.js server (https://ssr.vuejs.org/). If you decide to go down this route, I'd keep your SPA assets in their own separate Git repo from your Rails server and manage DevOps appropriately.
Good luck!
There's a feature in Angular Universal that allows you to pre-render pages at build-time. Can this be used to pre-render all your pages and run Angular Universal without a server?
Once html pages have been pre-rendered using angular universal (using nodejs server or asp.net core server), you can use any CDN to serve the pre-generated html.
See https://universal.angular.io/overview/
Edit: have a look at the starer kit
https://github.com/angular/universal-starter
Basically, you can reuse the prerender.js file which will write the rendered html files (for specified static routes) to the dist/browser folder, or wherever you want to. This is that folder that you deploy to a static host after
Well, you're always going to need to have a server somewhere in the equation: the only question is how much you have to set it up yourself versus how much can the current crop of tools and technologies do it for you.
In this talk from Node Summit Steven Fluin from Google talks about Firebase at the end. Pay attention to the bit about 'cloud functions' (at about 20 mins). Your Angular app will be rendered on the server using Firebase cloud functions. When a user interacts with your app, some JS is run to figure out what to send down (from the Firebase server) to the user. "You don't need to set up a server at all; everything is running in Firebase."
I haven't used Firebase myself - I'm using Angular Universal, which has a Node.js server as you know - but this sounds very nice. I found setting up Angular Universal really tricky (but got there in the end).
I have an idea to develop iOS App which update user if any feed is updated on wordpress website. Please tell the way/steps how i can achieve the same.
I have tried and searched on google but didn't got solution for my problem. This is one thing i got on youtube about web site reader : http://www.youtube.com/watch?v=Bk0d1npGoq4 But, I doesn't have to developer such app which reads web site content, i would like to show notification as soon as feed on the web is updated.
This is the website ( http://www.webhostingbreak.com/ ) whose reader i want to developer.
Please suggest me some solutions or logic which can help me to complete my task.
You've got several way to access the content of a Wordpress blog.
First and easiest solution is to use the basic RSS feed which is available on any Wordpress, and which is compatible with other kinds of websites.
With Wordpress, more specifically, you can use the XML-RPC API embed by the CMS.
This API need to be enable on the Wordpress website and every request will have to be authenticated with a real user to the Wordpress website (you can implement the registration process in the app or use a generic user in every installed app).
You have several library which handle the XML-RPC calls such as https://github.com/corristo/xmlrpc