How to configure Gridsome to generate thousands of product pages using API's to insert the data into static site template? - vue.js

I am looking to utilize a static site generator framework to work with Vue in order to generate static pages with product info, however we need to create thousands of pages with a different product for each page, we hope to make api calls to retrieve data and then fill in our templates with the different data and pictures for each product, the hope is it boost our search results for part #'s and bring in more business, does Gridsome do this? If so, how do I go about setting up this functionality? Or is Gridsome not the best option for this? I am open to exploring different frameworks but we would like to use Vue still for UI development though we are open to just plain html, css, and vanilla javascript.
Thanks

Yes. Gridsome was designed to handle exactly your situation. From gridsome.org:
You can make API calls to retrieve the data:
Gridsome makes it painlessly easy to build Jamstack websites using data from multiple sources such as Content API's, Headless CMSs, and other web services.
It's SEO-friendly to boost your search results:
Gridsome sites load as static HTML before they hydrate into fully Vue.js-powered SPAs. This makes it possible for search engines to be able to crawl content and give better SEO ranking, and still have all the power of Vue.js.
A good next step might be to check out the various starter templates on the Gridsome website.

Related

How can I use Vue.js to make a MPA? (Or should this project be a SPA?)

I have just picked up Vue and am trying to figure out the best way to structure this project.
Requirements:
A basic MPA (traditional site) with about 6 pages. This will be static info.
There will need to be a login section where customer will transmit data via form. Payment will happen here as well so will need to be secure.
My question is how should I be using Vue here? (I've already used VueCLI to scaffold out the project)
Should I:
A) use it for some components (Navbar, buttons, forms, etc) and keep structure traditional? How would i build out the User Dashboard to submit form info in this case - just as a new page?
B) or should I build this whole site as a SPA and have the new 'page' info loaded in on click? This would be easier for the login section?
One thing that may be clear on reading this is I don't understand well how the site will recognize users and deal with logins. Would this be easier if it were structured as a SPA? (more secure?)
(Also, I'm using this site to teach myself front-end development, specifically would like to learn more about building SPAs - so I realize I could use a web editor or easier solutions, but want to learn how to do a lot of this from 'scratch')
From what you've described it is entirely up to you. Both SPA or MPA would work fine and either would be totally reasonable given the requirements.
Have you worked with Vue-router before? SPAs don't need to appear as a single page to the user. They can still function as an MPA with different routes, page files, permissions, etc.
If you are hoping to use this project to teach yourself front-end web dev and know you have a particular interest in learning about SPAs, I think that is your answer.
I would go with an SPA and set up vue-router to manage your routes, and pages.

Prerendering Vue? Nuxt.js or plugin, what is better for existing website

I have webiste which is available in the internet. Front is written in Vue.js and CMS is created using Laravel (PHP). These are separate applications.
Unfortunatelly Google dosen't see the page because of lack of SEO (yeah! Vue). The website is big, has a lot of routes, fetches data from API ex. for a blog.
Here is my question. What is a better solution? Move website to Nuxt.js or use some fancy plugin like https://github.com/chrisvfritz/prerender-spa-plugin and fetch data from API.
I'll be gratefull for any tips!
Use #prerenderer/renderer-puppeteer if: You're prerendering up to a couple hundred pages and want accurate results.
Use #prerenderer/renderer-jsdom if: You need to prerender thousands upon thousands of pages, but quality isn't all that important, and you're willing to work around issues for more advanced cases. (Programmatic SVG support, etc.)

Bigcommerce - Implementing custom code that runs on server-side to create multiple versions of page for a product?

I'm new to Bigcommerce but experienced with web app development. I have a need to make customizations to a Bigcommerce store where I need to implement custom logic that runs on the server-side which affects the output in the UI by deciding which page to serve. For example, I want to have different versions of a product page for different locations. I want each version to have a static URL, however, for SEO purposes. I need to implement logic in the server-side to do something like detect user location based on IP and then determine which of the product version pages to serve. I realize I can do this with JavaScript but I don't want to as I don't think that would work as well for SEO.
I have looked over their API and templating briefly but am not seeing a real way that this is possible. Wondering if anyone can guide me in the right direction or is Bigcommerce too simplified to allow this sort of customization?
You do not have server side access on Bigcommerce. The only would to do this would be client side with javascript.

Shopify API: How to load a content from 3rd party server into Shopify's store during the page load?

I'm building a Shopify's app which suppose to add Schema.org rich snippets according to data which is remotely stored on my server. In order that Google's crawler will actually analyze this snippets, they must be loaded during the page load, and not dynamically by some JavaScript.
Any suggestions if / how can I do something like that?
Take a look at modifying an existing theme on their documentation page.
You could also try assets, based on this answer.

Shopify search engine add-on

I'm working on a search engine add-on.
Is it possible to add my search engine add-on into shopify frontpage?
I have research http://www.searchifyapp.com, how they can customize shopify search page?
I am not familiar with searchifyapp.com, so I won't tell you how it works, but I can tell you how it could be done.
If you want to have the shop's data indexed on your search server, then you will want to import the data from shopify on installation and use webhooks for updates. The Syncing with a Store Shopify Wiki page explains how this is done.
You can use ScriptTags to inject javascript into the storefront. Then the javascript can find and enhance/modify the search field/form (e.g. for autocompletion/suggestions as they type, or modify the url for the search results page).
If you want to custom search results (e.g. from your own search server), then you could create an Application Proxy to serve results from your own web application.