I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
Related
I created a Vue.js app without using Vue CLI, so that means I did everything from scratch including setting up Webpack 4. The reason I did this was because I don't like the idea of frameworks concealing the inner workings of things so that I can't fix things myself.
As an SPA, I have got the basic demo site working with an Home and About view. But I am looking to create a multi-page app with Express. The only information on multi-page Vue.js apps seems to be linked to the pages option that only comes with Vue CLI (see here)
Is there a way to have a multi-page app for projects created without Vue CLI?
Sure, you could handle routing with Express and have the page rendered server-side.
You can use Vue official package for routing, vue-router and choose between SSR (server-side rendering) or client side.
I suggest you to check this official doc about it: https://ssr.vuejs.org/
Good evening, there is a ready spa written in a vue.cli. How can I upload it to the hosting for publishing?
I'm not sure if vue.cli would support this feature, although I have a solution that does not use vue.cli but it does belong to the vue.js universe, I'm reffering to the Nuxt.js cli.
You can simply use SPA mode using nuxt --spa. In combination with the generate feature, it gives you a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.
The SPA idea is simple! When SPA mode is enabled using mode: 'spa' or --spa flag, and we run build, generation automatically starts after the build. This generation contains common meta and resource links, but not page content - this one you'll have to create on your own of course, but you won't need to worry about SEO matters on your static code.
So, for an SPA deployment, you must do the following:
Change mode in nuxt.config.js to spa.
Run npm run build.
Deploy the created dist/ folder to your static hosting like Surge, GitHub Pages or nginx.
More on:
https://nuxtjs.org/guide/#single-page-applications-spa-
https://nuxtjs.org/guide/commands#single-page-application-deployment-spa-
If nuxt.js is totally new to you, there's a nice introduction on the official website:
https://nuxtjs.org/guide
Hope it helps
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,
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).