CODEWITHSUNDEEP
vue.jssingle-page-applicationsitemapprerender
rdhainaut
rdhainaut

Reputation: 3553

Guidance for vuejs SPA application and prerendering (+ sitemap)

I have read a lot of articles about the prerendering and how to implement it in vue js application. I have successfully used https://github.com/chrisvfritz/prerender-spa-plugin/ on my vuejs application. After some pain with the config, I have now several [routename].html files (Hourra o/).

But now I m a little lost. I m looking for general guidance (how to).

Prerendenring pages should be used for clients (because it s html and it will be speed up but then how to switch to vuejs client page?) or only for crawlers (as googlebot) ? If a crawler try to access to a page should I redirect it to the prerending page ?

One other question : Should I add these prerendering pages to my sitemap or not ?

Upvotes: 0

Views: 734

Answers (1)

Luckyfella
Luckyfella

Reputation: 662

So far I got it prerendering SPA pages is for SEO reasons in the first place. If you don't prerender the search engine bots can't crawl the content which is generated by javascript when calling the page with a browser. The prerendred pages have to be uploaded to your server and linked in your sitemap. The bot (not supporting js) will call the prerendered html page. If you call the page with your browser having js enabled - the javascript-file (that is loaded in the prerendered pages as well as long you have js enabled) will take over and rerender the page.

Remember you might need a .htaccess file to map the route-paths to the rerendered files. Could look like:

# .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

I just tested this for the first time and got it to work like that. In my setup I had this file structure in my dist folder:

index.html
    about/index.html
    work/index.html
    etc.

with matching routes in my app

/
/about
/work

Upvotes: 1

Related Questions