I dont know is this a right place to ask this question, so i planned to make a blog website with SPA (Single Page Application) model using vuejs, we all know SPA websites are not SEO friendly and we need SSR or Prerendering to overcome this problem.
From some source on the internet i found out that apllying SSR to a Website make it consume more server resource and i need to upgrade my hosting plan if needed and it will affect to my website operating cost.
can you guys give me advice what should i do?
from your experience did ssr cost server resources that much?
should i make my website without javascript framework and using fully dynamic php page?
Related
We have a CMS where we are trying to provide the support of VueJS framework to our client websites. The views and their logic will be coded from the CMS Panel itself. The problem comes when trying to render the website having the support for both SPA and SSR due to SEO.
When client requests for a page, the SSR should work during that time but once the page is rendered, the SPA should take the control and let the user navigate(vue-router) wihtout page reload as it works in Vue SPA.
I checked on with this question and it won't help due to my unique requirement. There are no static bundles available for my case.
Any help will be appreciated!
I have tried many examples to achive this however they aren't exactly helping for my case.
https://github.com/0x00000001A/vuejs-spa-ssr-vuex
https://github.com/shenron/vue3-example-ssr
You may need nuxtjs. It can help you spa+ssr on vue
I'm new using Vue.js. I'm trying to build the frond-end design for a large system for a company. In this system the users have an account where they can access multiple pages to administrate their accounts, interactuate with other accounts, make appoinments, administrate or delete other users, etc. I think that since is a big system, I should use a MPA aproach, because I've read that SPA should not be used for webpages as blogs or online shops because those webpages that are constantly getting updated (as this system will be).
My question is: I can't find a propper guide to configure MPA on vue, is there one guide for this?
I already followed up this stackoverflow anwser by PJ.Wanderson: multiple pages in Vue.js CLI
but is still have doubts.
Should I still be using the vue router? What kind of configuration should I use there?
How can I handle routes with parameters in this case? Should I use SSR too in this case?
Thanks in advance.
If you want to build a MPA in Vuejs, your best bet is building it in Nuxt. Nuxt wil handle all the SSR for you. I'm wondering why even build it in Vue in the first place? The reason there isn't that much information on MPA's with Vuejs is because most people build SPA's with it. Another alternative would be to build a SPA in Vuejs and deploy that on a subdomain. Then have al your marketing and other relevant pages on a simple wordpress site. Hope this helped.
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
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 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.